Create a Simple Movie Website using Html, CSS & JavaScript – codejuster

In today’s blog we will create a movie database website using HTML, CSS and JavaScript. We will use the TMDB api to fetch the movie database.

01. HTML Code :-

<!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 Database</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <form id="form">
            <input type="text" autocomplete="off" id="search" placeholder="Search" class="search">
        </form>
    </header>
    <main id="main">
    </main>
    <script src="script.js"></script>
</body>
</html>

02. CSS Code :-

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

* {
    box-sizing: border-box;

}

body {
    margin: 0;
    background-color: whitesmoke;
    font-family: "Poppins", sans-serif;
}

header {
    background-color: lightgrey;
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
}

.search {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 2px solid #000000;
    background-color: transparent;
    font-family: inherit;
    color: rgb(0, 0, 0);
    font-size: 1rem;
}

.search::placeholder {
    color: #000000;
}

.search:focus {
    outline: none;
    background-color: #ffffff;
}


main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


/* ye baad me dekhte hai */

.movie {
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    width: 300px;
    background-color: lightsteelblue;
    margin: 1rem;
    overflow: hidden;
    position: relative;

}

.movie img {
    width: 100%;

}

.movie-info {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem 1rem;
    color: #000000;
    letter-spacing: 0.5px;
    align-items: center;
}

.movie-info h3 {
    margin: 0;
}

.movie-info span {
    background-color: rgb(20, 20, 73);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: bold;
}

.movie-info span.green {
    color: rgb(46, 194, 46);
}

.movie-info span.orange {
    color: goldenrod;
}

.movie-info span.red {
    color: red;

}

.overview {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #e7dddd;
    padding: 2rem;
    transform: translateY(100%);
    transition: transform 1s ease-in;
    max-width: 100%;
    overflow: auto;
    text-align: center;
}

.movie:hover .overview {
    transform: translateY(0);

}

.overview h4 {
    margin-top: 0;
}

03. JavaScript Code :-

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

const IMGPATH = "https://image.tmdb.org/t/p/w1280";

const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

getMovies(APIURL);

async function getMovies(url) {
  const resp = await fetch(url);
  const respData = await resp.json();

  console.log(respData);
  showMovies(respData.results);

}

function showMovies(movies) {
  main.innerHTML = "";
  movies.forEach((movie) => {
    const { poster_path, title, vote_average, overview } = movie;
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");


    movieEl.innerHTML = `
       <img src="${IMGPATH + poster_path}" alt="${title}"/>

     <div class="movie-info">
         <h3>${title}</h3>
         <span class="${getClassByRate(vote_average)}">${vote_average}</span>
     </div> 

     <div class="overview">

     <h2>Overview:</h2>
     ${overview}
     </div>
     `;

    main.appendChild(movieEl)
  });

}

function getClassByRate(vote) {
  if (vote >= 8) {
    return 'green';
  } else if (vote >= 5) {
    return 'orange'
  } else {
    return 'red';
  }

}

form.addEventListener("submit", (e) => {
  e.preventDefault();


  const searchTerm = search.value;

  if (searchTerm) {

    getMovies(SEARCHAPI + searchTerm);

    search.value = "";
  }
});

Related Posts

Leave a Comment Cancel Reply