adrienpoly/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Playground - JavaScript 101</title>
    <style media="screen">
      .red { color: red; }
    </style>
    <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container text-center">
      <form class="form-inline" id="search-form">
        <input type="text" class="form-control" placeholder="Find movie" id="search-input">
        <input type="submit" class="btn btn-primary">
      </form>
      <ul id="results" class="list-inline"></ul>
    </div>

    <input type="text" name="" value="" id="search">

    <!-- Add some HTML in here -->
    <script src="main.js"></script>
  </body>
</html>

## index.js
const results = document.querySelector("#results");
const form = document.querySelector("#search-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const input = event.currentTarget.querySelector(".form-control");
  results.innerHTML = "";
  search(input.value);
});

const search = (query) => {
  fetch(`http://www.omdbapi.com/?s=${query}&apikey=adf1f2d7`)
    .then(response => response.json())
    .then((data) => {
      data.Search.forEach((movie) => {
        const movieTemplate = `<li>
      <img src="${movie.Poster}" alt="">
      <p>${movie.Title}</p>
      </li>`;
        results.insertAdjacentHTML("beforeend", movieTemplate);
      });
    });
};

const searchAlgoliaPlaces = (event) => {
  fetch("https://places-dsn.algolia.net/1/places/query", {
    method: "POST",
    body: JSON.stringify({ query: event.currentTarget.value })
  })
    .then(reponse => reponse.json())
    .then((data) => {
      console.log("data", data);
    });
};
const input = document.querySelector("#search");

input.addEventListener("keyup", (event) => {
  searchAlgoliaPlaces(event);
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Playground - JavaScript 101</title>
	<style media="screen">
	.red { color: red; }
	</style>
	<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container text-center">
	<form class="form-inline" id="search-form">
	<input type="text" class="form-control" placeholder="Find movie" id="search-input">
	<input type="submit" class="btn btn-primary">
	</form>
	<ul id="results" class="list-inline"></ul>
	</div>

	<input type="text" name="" value="" id="search">

	<!-- Add some HTML in here -->
	<script src="main.js"></script>
	</body>
	</html>
	const results = document.querySelector("#results");
	const form = document.querySelector("#search-form");

	form.addEventListener("submit", (event) => {
	event.preventDefault();
	const input = event.currentTarget.querySelector(".form-control");
	results.innerHTML = "";
	search(input.value);
	});

	const search = (query) => {
	fetch(`http://www.omdbapi.com/?s=${query}&apikey=adf1f2d7`)
	.then(response => response.json())
	.then((data) => {
	data.Search.forEach((movie) => {
	const movieTemplate = `<li>
	<img src="${movie.Poster}" alt="">
	<p>${movie.Title}</p>
	</li>`;
	results.insertAdjacentHTML("beforeend", movieTemplate);
	});
	});
	};

	const searchAlgoliaPlaces = (event) => {
	fetch("https://places-dsn.algolia.net/1/places/query", {
	method: "POST",
	body: JSON.stringify({ query: event.currentTarget.value })
	})
	.then(reponse => reponse.json())
	.then((data) => {
	console.log("data", data);
	});
	};
	const input = document.querySelector("#search");

	input.addEventListener("keyup", (event) => {
	searchAlgoliaPlaces(event);
	});