anyweez · September 4, 2017 23:49
diff --git a/app.js b/app.js
 // DOM elements
 const searchBox = document.querySelector('#movie-search');  // search box
 const searchBtn = document.querySelector('#go-btn');        // search button
 const resultsBox = document.querySelector('ul');            // search results

 // When the search button is clicked, run this function.
 searchBtn.addEventListener('click', function () {
  const searchText = searchBox.value;
  
  searchFor(searchText);
 });

 // This function searches for the specified text and renders the results.
 function searchFor(text) {
  fetch(`http://custom-api.com/api/movies?name=${text}`)
    .then(function (response) {
      return response.json();
    })
    .then(function (body) {
      // Get rid of all DOM elements before adding new ones.
      resultsBox.innerHTML = '';
      // Assume that 'body' is an object with a 'movies' property (an array) 
      for (let i = 0; i < body.movies.length; i++) {
        const html = `<li>Movie name: ${body.movies[i].name}</li>`;
        
        resultsBox.innerHTML += html;
      }
    });
 }
diff --git a/page.html b/page.html
 <!doctype html>

 <html>
  <head>
  </head>
  
  <body>
    <h1>Popular Movies</h1>
    <input type="text" id="movie-search">
    <button id="go-btn">Go</button>
    
    <ul>
    </ul>
    
    <script src="app.js"></script>
  </body>
 </html>
	// DOM elements
	const searchBox = document.querySelector('#movie-search'); // search box
	const searchBtn = document.querySelector('#go-btn'); // search button
	const resultsBox = document.querySelector('ul'); // search results

	// When the search button is clicked, run this function.
	searchBtn.addEventListener('click', function () {
	const searchText = searchBox.value;

	searchFor(searchText);
	});

	// This function searches for the specified text and renders the results.
	function searchFor(text) {
	fetch(`http://custom-api.com/api/movies?name=${text}`)
	.then(function (response) {
	return response.json();
	})
	.then(function (body) {
	// Get rid of all DOM elements before adding new ones.
	resultsBox.innerHTML = '';
	// Assume that 'body' is an object with a 'movies' property (an array)
	for (let i = 0; i < body.movies.length; i++) {
	const html = `<li>Movie name: ${body.movies[i].name}</li>`;

	resultsBox.innerHTML += html;
	}
	});
	}
	<!doctype html>

	<html>
	<head>
	</head>

	<body>
	<h1>Popular Movies</h1>
	<input type="text" id="movie-search">
	<button id="go-btn">Go</button>

	<ul>
	</ul>

	<script src="app.js"></script>
	</body>
	</html>