Hello Codere! Welcome to the Codewithrandom blog. In this article, we create a Movie Website using HTML, CSS, and JavaScript Code. On this movie website, you see some movie list on the main page and there's a search bar in the header so you can search for and movie and you get its Poster image, movie title, movie overview, and movie ratings.
So let's start with HTML Code for a movie app.
HTML Code For Movie Website
<!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 Search</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>
<!-- js here -->
<script src="app.js"></script>
</body>
</html>
There is all the HTML Code for the Movie App. Now, you can see output without Css and JavaScript Code, then we write Css & JavaScript for the Movie App.
CSS Code For Movie Website
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
*{ box-sizing: border-box; } body{ margin: 0; background-color: #cd094e;
font-family: "Poppins", sans-serif; } header{ background-color: #0615de;
padding: 1rem; display: flex; justify-content: flex-end; } .search { padding:
0.5rem 1rem; border-radius: 50px; border: 2px solid #22254b; background-color:
transparent; font-family: inherit; color: #eee; font-size: 1rem; }
.search::placeholder{ color: #afb2dc; } .search:focus{ outline: none;
background-color: #05082c; } main{ display: flex; flex-wrap: wrap; } /* ye baad
me dekhte hai */ .movie{ box-shadow: 0 4px 5px rgba(0,0,0,0.2); border-radius:
3px; width: 300px; background-color: #0d1dd2; margin: 1rem; overflow: hidden;
position: relative; } .movie img{ width: 100%; } .movie-info{ display: flex;
justify-content: space-between; padding: 0.5rem 1rem 1rem; color: #eee;
letter-spacing: 0.5px; align-items: center; } .movie-info h3{ margin: 0; }
.movie-info span{ background-color: #22254b; 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: orange; } .movie-info span.red{
color: red; } .overview{ position: absolute; top: 0; right: 0; left: 0; bottom:
0; background-color: #fff; padding: 2rem; transform: translateY(100%);
transition: transform 1s ease-in; max-width: 100%; overflow: auto; }
.movie:hover .overview{ transform: translateY(0); } .overview h4{ margin-top: 0;
}
Here is our Css Code Done for the Movie app.
JavaScript Code For Movie Website:-
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=";
// ye HTML WALE TAG const main = document.getElementById("main"); const form =
document.getElementById("form"); const search =
document.getElementById("search"); ///initalyy get fav movies getMovies(APIURL);
async function getMovies(url) { const resp = await fetch(url); const respData =
await resp.json(); // movie aa gyi console.log(respData); // yaha pe show
karenge showMovies(respData.results); } function showMovies(movies) { //clear
main main.innerHTML = ""; movies.forEach((movie) => { const { poster_path,
title, vote_average, overview } = movie; // raja 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 = ""; } });
This Is HTML, CSS, and JavaScript Code you can Use this code. Create 3 files and link them in HTML code.
Conclusion
Hope you like Movie App in javascript, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you
In this post, we learn how to create a Movie App using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by - Code With Random/Anki
Top comments (0)