Welcome to Coding Torque! Are you ready to build a powerful and feature-rich Movie App using HTML, CSS, and JavaScript? In this tutorial, we will guide you through the process of creating a dynamic and interactive web application that allows you to browse and search through the vast IMDB database of films. You'll learn how to use APIs to access and display data from external sources, and you'll also learn how to add search functionality and other advanced features to your app. Whether you're a beginner or an experienced coder, this project is sure to challenge and engage you. So let's get started!
Join us on Telegram
Join Now
Before we start, here are some more JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. QR Code Generator using JavaScript
I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Movie App using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag
<div class="wrapper">
<div class="search-block">
<a href="/">
<h1>TheMovieDB</h1>
</a>
<form id="search-form">
<input type="text" id="query" placeholder="Search movies..." />
<button class="btn" type="submit">Search</button>
</form>
</div>
<div class="row" id="root"></div>
</div>
Output Till Now
CSS Code
Create a file style.css and paste the code below.
* {
margin: 0;
box-sizing: border-box;
outline: none;
}
body {
color: white;
font-family: "microsoft yahei", arial, -apple-system, BlinkMacSystemFont,
"segoe ui", roboto, oxygen, cantarell, "helvetica neue", ubuntu, sans-serif;
background: #080823;
}
.btn {
color: white;
cursor: pointer;
text-decoration: none;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.5);
transition: inherit;
}
.btn:hover {
background: #06c3dd;
border-color: #06c3dd;
}
.row {
display: flex;
max-width: 1200px;
gap: 15px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.wrapper {
width: 100%;
min-height: 100vh;
padding: 15px 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
.wrapper .card {
position: relative;
font-size: 14px;
line-height: 21px;
width: 285px;
height: 360px;
overflow: hidden;
transition: 0.5s ease all;
}
.wrapper .card .card-content {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding: 50px 10px 7px;
background-image: linear-gradient(
180deg,
rgba(51, 55, 69, 0),
rgba(16, 21, 40, 0.95)
);
transition: inherit;
}
.wrapper .card .card-content .card-cont-header {
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper .card .card-content .describe {
max-height: 0;
opacity: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: inherit;
}
.wrapper .card:hover {
cursor: pointer;
}
.wrapper .card:hover .card-content {
background-image: linear-gradient(180deg, rgba(51, 55, 69, 0) 0, #101528 48%);
}
.wrapper .card:hover .btn {
background: #06c3dd;
border-color: #06c3dd;
}
.wrapper .card:hover .describe {
max-height: 200px;
padding: 8px 0;
opacity: 1;
}
.search-block {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
align-items: center;
margin-bottom: 15px;
margin: 15px 0 30px 0;
}
.search-block #search-form {
display: flex;
max-width: 400px;
}
.search-block input {
width: 100%;
max-width: 400px;
padding: 15px;
border-radius: 0;
border: none;
background: rgba(255, 255, 255, 0.75);
}
.search-block .btn {
width: 120px;
background: rgba(255, 255, 255, 0.25);
border: 1px solid lightgray;
}
.search-block .btn:hover {
background: rgba(255, 255, 255, 0.5);
border: 1px solid white;
}
.btn-load {
background-color: skyblue;
padding: 10px 25px;
border: none;
margin-top: 15px;
}
a {
color: white;
text-decoration: none;
} Output Till Now
JavaScript Code
Create a file script.js and paste the code
below.
Get your own API Key from
imdb and replace it in
the code.
const apiKey = "YOUR_API_KEY"
const URL =
"https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=YOUR_API_KEY&page=1"
const imgURL = "https://image.tmdb.org/t/p/w1280"
const searchURL =
"https://api.themoviedb.org/3/search/movie?&api_key=YOUR_API_KEY&query="
const form = document.getElementById("search-form")
const query = document.getElementById("query")
const root = document.getElementById("root")
let movies = [],
page = 1,
inSearchPage = false
// Fetch json data from URL
async function fetchData(URL) {
try {
const data = await fetch(URL).then((res) => res.json())
return data
} catch (error) {
console.log(error.message)
return null
}
}
const fetchAndShowResults = async (URL) => {
const data = await fetchData(URL)
data && showResults(data.results)
}
const getSpecificPage = (page) => {
const URL = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${apiKey}&page=${page}`
fetchAndShowResults(URL)
}
const movieCard = (movie) =>
`<div class="col">
<div class="card">
<a class="card-media" href="./img-01.jpeg">
<img src="${movie.poster_path}" alt="PUBG Mobile" width="100%" />
</a>
<div class="card-content">
<div class="card-cont-header">
<div class="cont-left">
<h3 style="font-weight: 600">${movie.original_title}</h3>
<span style="color: #12efec">${movie.release_date}</span>
</div>
<div class="cont-right">
<a href="${movie.poster_path}" target="_blank" class="btn">See image</a>
</div>
</div>
<div class="describe">
${movie.overview}
</div>
</div>
</div>
</div>`
const showResults = (items) => {
let content = !inSearchPage ? root.innerHTML : ""
if (items && items.length > 0) {
items.map((item) => {
let { poster_path, original_title, release_date, overview } = item
if (poster_path) {
poster_path = imgURL + poster_path
} else {
poster_path = "./img-01.jpeg"
}
if (original_title.length > 15) {
original_title = original_title.slice(0, 15) + "..."
}
if (!overview) {
overview = "No overview yet..."
}
if (!release_date) {
release_date = "No release date"
}
const movieItem = {
poster_path,
original_title,
release_date,
overview,
}
content += movieCard(movieItem)
})
} else {
content += "<p>Something went wrong!</p>"
}
root.innerHTML = content // Inject content to root
}
const handleLoadMore = () => {
getSpecificPage(++page)
}
const detectEndAndLoadMore = (e) => {
let el = document.documentElement
if (
!inSearchPage &&
el.scrollTop + el.clientHeight == el.scrollHeight
) {
console.log("BINGO!")
handleLoadMore()
}
}
form.addEventListener("submit", async (e) => {
inSearchPage = true
e.preventDefault()
const searchTerm = query.value
searchTerm && fetchAndShowResults(searchURL + searchTerm)
query.value = ""
})
window.addEventListener("scroll", detectEndAndLoadMore)
function init() {
inSearchPage = false
fetchAndShowResults(URL)
}
init();
Join us on Telegram
Join Now
Code Credits: @aashish2058
If you have any doubts or any project ideas feel free to Contact
Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like this👨💻