<div class="container">
  <div><img src="https://logos-download.com/wp-content/uploads/2016/09/Star_Wars_logo-1.png"></div>
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <form>
    <input type="text" class="search" placeholder="Search...">
    <ul class="characters">
      <li><p>Search Star Wars Data</p></li>
    </ul>
  </form>
  <footer>Star Wars API By LouieCode</footer>
</div>

html {
  color: #FFE81F;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 30px;
  @media (max-width: 500px) {
    font-size: 20px;
  }
}

body {
  background-image: url("https://i.pinimg.com/originals/9d/60/89/9d608920445f4edeee286646f8b5510e.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

img {
  width: 250px;
}

input {
  border-radius: 5px;
}

ul {
  margin: 20px;
  list-style: none;
}

li{
    perspective: 200px;
    margin: 30px;
}
p {
      transform: rotateX(30deg);
    }

footer {
  font-size: 0.6rem;
  margin-top: 20px;
}

const characters = [];
const rootURL = 'https://swapi.co/api/people/?page=';

for(let i = 1; i < 10; i++){
  let url = rootURL + i.toString();
  fetch(url)
    .then(blob => blob.json())
    .then(data => characters.push(...data.results))
}

function searchCharacters(input, characters) {
  return characters.filter(character => {
    const regexInput = new RegExp(input, 'gi');
    return character.name.match(regexInput) || character.gender.match(regexInput)
  });
}

function showCharacters() {
  const matchInput = searchCharacters(this.value, characters);
  const element = matchInput.map(character => {
    const listItem = `<li><p>${character.name}, ${character.gender}, ${character.height}cm</p></li>`
    return listItem;
  }).join('');
  charactersList.innerHTML = element;
}

const input = document.querySelector('.search');
const charactersList = document.querySelector('.characters');
input.addEventListener('keyup', showCharacters);
input.addEventListener('change', showCharacters);