Fake API Call with javascript vanilla code. Fetch

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Movie Search</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 col box">
                <h1 class="title">Movie Search</h1>
                
                <form id="search_form">
                    <div class="form-group">
                        <input
                        type="text"
                        id="q" 
                        placeholder="Title search" 
                        class="form-control"
                        onkeypress="onKeyPress(event)" />
                    </div>
                    <button 
                        type="button" 
                        class="btn btn-default btn-search" 
                        onclick="onClickSearch()">Search</button>                
                </form>
            </div>
            <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 col">
                <ul id="results" class="list-group"></ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8" src="script.js"></script>
  </body>
</html>

// Code goes here

function onClickSearch() { 
    getMovies();          
}

function onKeyPress(e) {            
    return false;
    if (e.keyCode == 13) {               
        return false;
    }
}

function getMovies() {
    var query = document.getElementById('q').value;
    fetch('https://jsonmock.hackerrank.com/api/movies/search/?Title=' + query + '&page=10')
        .then(function(response){
            return response.json();
        })
        .then(function(json){                    
            setSearchData(json.data);
        });
}

function setSearchData(data = []) {            
    var ul = document.getElementById('results');
    
    ul.innerHTML = "";

    if(data.length == 0) {                
        var li = document.createElement('li');            
        li.setAttribute("class", 'list-group-item');
        li.appendChild(document.createTextNode('No data Found'));
        ul.appendChild(li);  
    }

    for(var i = 0; i < data.length; i++){
        var title = data[i].Title;
        var li = document.createElement('li');            
        li.setAttribute("class", 'list-group-item');
        li.appendChild(document.createTextNode(title));
        ul.appendChild(li);  
    }
}

/* Styles go here */

body {
  background: #545c69;
}

.title {
  color: #6f7784;
  text-align: center;
  font-size: 2em;
}

.box {
  background: #262c38;
  border-radius: 10px;
  margin-top: 6%;
}

.btn {
  background: #79b8a9;
  color: #1d5451;
  border: none;
  width: 100%;
  border-radius: 0px 0px 10px 10px;
  transition: all 1.5s ease !important;
  -webkit-transition: all 2s ease !important;
  -moz-transition: all 2s ease !important;
}

.btn:hover {
  background: #1d5451;
  color: #79b8a9;            
}

.btn:active {
  background: #1d5451 !important;
  color: #79b8a9 !important;
}

input[type="text"] {
  background: #2f3543;
  color: #6f7784;
  border: none;
  transition: all 1.5s ease !important;
  -webkit-transition: all 2s ease !important;
  -moz-transition: all 2s ease !important;
}

.list-group {
  margin-top: 5%;
  transition: all 1.5s ease !important;
  -webkit-transition: all 2s ease !important;
  -moz-transition: all 2s ease !important;
}

.list-group-item  {
  margin-top: 10px; 
  background: #262c38;
  color: #6f7784;
  border-radius: 5px;
  border: none;         

  transition: all 1.5s ease !important;
  -webkit-transition: all 2s ease !important;
  -moz-transition: all 2s ease !important;
}

.col {
  padding: 0 !important;
}

.form-group {
  padding: 10px;
}