Netflix Clone

Ingredients

🕸️ Projects!

🖥️ Live Demo

🪶 Features

• Advanced Search Movie, TV and All in Homepage / My List 🎬
• Watch Trailer Banner whenever you click on play / watch btn 🍿
• Touch slider for movies img 👈🏼👉🏼
• Modal pop-up Movie Detail after clickling movie img 🃏
• Dark mode 🌙 & Light mode 🌞
• Add movie to list 📃 (localStorage) ➕
• Delete movie from My List 💥

🔎 Search Method

SearchUtils fetch movies with title as a query

const searchUtils = (types, title) =>
  Promise.all(
    types.map(type =>
      fetch(
        `${BASE_PATH}/search/${type}?api_key=${API_KEY}&query=${title}`
      ).then(res => res.json())
    )
  )

Search search on input changes

const movies = document.querySelector('.search-movies .wrapper')
const searchWrapper = movies.parentElement

input.addEventListener('focus', () => {
  movies.firstChild && searchWrapper.classList.add('active')
})

input.addEventListener('input', e => {
  const closeBtn = document.querySelector('svg.close-btn')

  movies.textContent = ''
  searchWrapper.classList.add('active')

  if (!e.target.value) {
    searchWrapper.classList.remove('active')
    closeBtn.classList.remove('active')
    return
  }

  closeBtn.classList.add('active')
  closeBtn.addEventListener('click', () => {
    e.target.value = ''
    movies.textContent = ''
    searchWrapper.classList.remove('active')
    closeBtn.classList.remove('active')
  })

  searchUtils(types, input.value).then(res => {
    movies.textContent = ''
    res.forEach(({ results }, i) => {
      if (results.length === 0) return

      results.slice(0, 20).forEach(movie => {
        createSearchMovie({ ...movie, type: types[i] }, movies)
      })
    })
  })

  searchWrapper.addEventListener('click', e => {
    if (e.target !== e.currentTarget) return
    searchWrapper.classList.remove('active')
  })
})

⚙️ Before Started

By starting the server locally, you can easily change and check code

You can test Html, CSS, JS. in real time by starting a web server locally. To do this, you need to install node.js and npm. After that, you can install the live server by using the command below.

npm install -g live-server

start the server by running the command below.

live-server .

👏🏼 Contributing

Can't spell thank you without YOU.