<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Movie For Practice</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main id="user-input" class="card">
      <div class="control">
        <label for="title">Favourite Movie</label>
        <input type="text" id="title" />
      </div>
      <div class="inline-controls">
        <div class="control">
          <label for="extra-name">Extra Information (Name)</label>
          <input type="text" id="extra-name" />
        </div>
      </div>
      <div class="control">
        <div class="control">
          <label for="extra-value">Extra Information (Value)</label>
          <input type="text" id="extra-value" />
        </div>
      </div>
      <button id="add-movie-btn">Add Movie</button>
    </main>
    <section id="filter" class="card">
      <label for="filter-title">Filter by Title</label>
      <input type="text" id="filter-title" />
      <button id="search-btn">Search</button>
    </section>
    <ul id="movie-list" class="card"></ul>

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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
main {
  background-color: lightgreen;
  width: 500px;
  height: 50vh;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 3px 2px 2px rgba(1, 2, 3, 0.2);
}
main label {
  font-size: large;
  font-weight: bolder;
}
main input {
  display: block;
  padding: 10px;
  width: 90%;
  border: 0;
  margin: 10px;
}
main input:focus {
  outline: 0;
}
section {
  margin: 20px;
}
section label {
  display: block;
}
section input {
  width: 100%;
  display: block;
  padding: 10px;
  width: 90%;
  border: 0;
  margin: 10px;
}
section button {
  padding: 10px;
  background-color: tomato;
  color: #fff;
  font-weight: bold;
  border: navajowhite;
  margin: 10px;
}
#movie-list {
  display: none;
  list-style-type: none;
  padding: 1rem;
}
#movie-list.visible {
  display: block;
}
#movie-list li {
  margin: 1rem;
  color: #ff0062;
  font-weight: bold;
  font-size: 1.5rem;
}
button {
  display: block;
}
#add-movie-btn {
  padding: 10px;
  background-color: tomato;
  color: #fff;
  font-weight: bold;

  border: navajowhite;
  margin: 10px;
}

const addMovieButton = document.querySelector('#add-movie-btn');
const searchButton = document.getElementById('search-btn')
const allInput = document.querySelectorAll('input')

const movies = [];

const renderMovies = (filterTerm = '') => {
  const movieList = document.getElementById('movie-list');
  if (movies.length === 0) {
    movieList.classList.remove('visible')
    return;
  } else {
    movieList.classList.add('visible')
  }
  ;

  const filteredMovies = !filter ? movies : movies.filter(movie => movie.info.title.includes(filterTerm))



  filteredMovies.forEach((movie) => {
    const newMovieEl = document.createElement('li');
    const {info} = movie;
    const {formatted} = movie
    let text = formatted.call(movie) + '-';
    for (const key in info) {
      if (key !== 'title') {
        text = text + `${key}: ${info[key]}`
      }
    }
    newMovieEl.textContent = text;
    movieList.append(newMovieEl)

  })
}

const addMovieHandler = () => {
  const title = document.getElementById('title').value;
  const extraName = document.getElementById('extra-name').value;
  const extraValue = document.getElementById('extra-value').value;

  if (title.trim() === '' || extraName.trim() === "" || extraValue.trim() === "") {
    return;
  }

  allInput.forEach((input) => {
    return input.value = '';
  })

  const newMovie = {
    info: {
      title,
      [extraName]: extraValue,
    },
    id: Math.random(),
    formatted() {
      return this.info.title.toUpperCase();
    }
  };

  movies.push(newMovie)
  console.log(newMovie)
  renderMovies()
}

const searchMovieHandle = () => {
  const filtered = document.getElementById('filter-title').value;
  renderMovies(filtered)
}

addMovieButton.addEventListener('click', addMovieHandler)
searchButton.addEventListener('click', searchMovieHandle)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.