Hey everyone. Welcome to today’s tutorial. Today’s tutorial will teach us how to create a movie guide app. To build this app, we need HTML, CSS and Javascript. We make use of the Open Movie Database API to fetch the information.
I would suggest this project to javascript intermediates who have basic fetch knowledge (). If you are looking for more projects to improve your javascript skills, you should check out this playlist from my youtube channel.
This playlist consists of about 90+ javascript projects. The difficulty of these projects varies from easy to quite complex. Therefore this playlist is suitable for all kinds of javascript learners.
Let us take a look at how this project works. Our project consists of a search bar with an input field and a search button. The user enters the movie of their choice and hits the button. We display information related to the movie.
If the input field is empty, we display the message – ‘Please Enter A Movie Name’. In case the movie entered by the user does not exist in the database, we show the message- ‘Movie Not Found’. Finally, if some error occurs while fetching the data from the API, we display the message- ‘Error Occurred.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you should check out the video down below. Also, subscribe to my youtube channel, where I post exciting tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – “Movie Guide App”. Inside this folder, we have five files. The first is index.html which is the HTML document.
The next is style.css which is the stylesheet. Next, we have script.js, a script file. We have one more script file called key.js that I have used to store the API key and keep it hidden for privacy reasons. The final file is the star icon SVG.
HTML:
We start with the HTML section. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movie Guide App</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="search-container">
<input
type="text"
placeholder="Enter movie name heree..."
id="movie-name"
value="dark knight"
/>
<button id="search-btn">Search</button>
</div>
<div id="result"></div>
</div>
<script src="key.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style these elements using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#000000 50%, #ffb92a 50%);
}
.container {
font-size: 16px;
width: 90vw;
max-width: 37.5em;
padding: 3em 1.8em;
background-color: #201f28;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2);
}
.search-container {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1.2em;
}
.search-container input,
.search-container button {
font-size: 0.9em;
outline: none;
border-radius: 0.3em;
}
.search-container input {
background-color: transparent;
border: 1px solid #a0a0a0;
padding: 0.7em;
color: #ffffff;
}
.search-container input:focus {
border-color: #ffffff;
}
.search-container button {
background-color: #ffb92a;
border: none;
cursor: pointer;
}
#result {
color: #ffffff;
}
.info {
position: relative;
display: grid;
grid-template-columns: 4fr 8fr;
align-items: center;
margin-top: 1.2em;
}
.poster {
width: 100%;
}
h2 {
text-align: center;
font-size: 1.5em;
font-weight: 600;
letter-spacing: 0.06em;
}
.rating {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
margin: 0.6em 0 0.9em 0;
}
.rating img {
width: 1.2em;
}
.rating h4 {
display: inline-block;
font-size: 1.1em;
font-weight: 500;
}
.details {
display: flex;
font-size: 0.95em;
gap: 1em;
justify-content: center;
color: #a0a0a0;
margin: 0.6em 0;
font-weight: 300;
}
.genre {
display: flex;
justify-content: space-around;
}
.genre div {
border: 1px solid #a0a0a0;
font-size: 0.75em;
padding: 0.4em 1.6em;
border-radius: 0.4em;
font-weight: 300;
}
h3 {
font-weight: 500;
margin-top: 1.2em;
}
p {
font-size: 0.9em;
font-weight: 300;
line-height: 1.8em;
text-align: justify;
color: #a0a0a0;
}
.msg {
text-align: center;
}
@media screen and (max-width: 600px) {
.container {
font-size: 14px;
}
.info {
grid-template-columns: 1fr;
}
.poster {
margin: auto;
width: auto;
max-height: 10.8em;
}
}
Javascript:
Finally, we add functionality to this code using Javascript. To do this, copy the code below and paste it into your script file.
//Initial References
let movieNameRef = document.getElementById("movie-name");
let searchBtn = document.getElementById("search-btn");
let result = document.getElementById("result");
//Function to fetch data from API
let getMovie = () => {
let movieName = movieNameRef.value;
let url = `http://www.omdbapi.com/?t=${movieName}&apikey=${key}`;
//If input field is empty
if (movieName.length <= 0) {
result.innerHTML = `<h3 class="msg">Please Enter A Movie Name</h3>`;
}
//If input field is NOT empty
else {
fetch(url)
.then((resp) => resp.json())
.then((data) => {
//If movie exists in database
if (data.Response == "True") {
result.innerHTML = `
<div class="info">
<img src=${data.Poster} class="poster">
<div>
<h2>${data.Title}</h2>
<div class="rating">
<img src="star-icon.svg">
<h4>${data.imdbRating}</h4>
</div>
<div class="details">
<span>${data.Rated}</span>
<span>${data.Year}</span>
<span>${data.Runtime}</span>
</div>
<div class="genre">
<div>${data.Genre.split(",").join("</div><div>")}</div>
</div>
</div>
</div>
<h3>Plot:</h3>
<p>${data.Plot}</p>
<h3>Cast:</h3>
<p>${data.Actors}</p>
`;
}
//If movie does NOT exists in database
else {
result.innerHTML = `<h3 class='msg'>${data.Error}</h3>`;
}
})
//If error occurs
.catch(() => {
result.innerHTML = `<h3 class="msg">Error Occured</h3>`;
});
}
};
searchBtn.addEventListener("click", getMovie);
window.addEventListener("load", getMovie);
Next, go to this link. Submit the form and you will receive your API key at your email address. Copy the API key and save it as a global variable key in the key.js file.
//Enter the API key recieved on your email here key = "12345a6b";
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also, I would love to hear from you guys, so if you have any queries, suggestions or feedback, comment below.
Happy Coding.
It is not showing the movies. I have written the code as it is.