Skip to content

Commit d40cf32

Browse files
harshita2216harshita2216
authored
Merge pull request #321 from Atif0604/main
Movie Search App
2 parents 0de6dae + 970e9d8 commit d40cf32

File tree

6 files changed

+286
-0
lines changed

6 files changed

+286
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,4 @@
122122
| [Classifiers using JS](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Classifier-Using-JS) | It is a website which contains three different classifiers, built with the help of API.
123123
| [String Palindrome Checker](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/String%20Palindrome%20Checker) | Checks if the entered word is a palindrome or not, and also checks the string length.
124124
| [2048 Game](https://github.com/Gyynnn/Web-dev-mini-projects/tree/2048game/2048%20Game) | A simple 2048 game on website.
125+
| [Movie Search App](https://github.com/Gyynnn/Web-dev-mini-projects/tree/main/Movie-Search-App) | Simple Movie Search App in HTML, CSS, and JavaScript using the APIs for fetching movies information.

‎Movie-Search-App/Movie-Search-App.png

1.48 MB
Loading

‎Movie-Search-App/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h1>Movie Search App</h1>
2+
3+
<p>Simple Movie Search App in HTML, CSS, and JavaScript using the APIs for fetching movies information.</p>
4+
5+
<h3>Used Technologies</h3>
6+
<ul>
7+
<li>HTML5</li>
8+
<li>CSS3</li>
9+
<li>JavaScript</li>
10+
</ul>
11+
12+
<h3>Used APIs</h4>
13+
<ul>
14+
<li>TMDB API</li>
15+
</ul>
16+
17+
### Steps to Use:
18+
---
19+
20+
- Download or clone the repository
21+
```
22+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
23+
```
24+
- Go to the directory
25+
- Run the index.html file
26+
- Just Type the movie name you want to know the details of, and then press Enter.
27+
- After that it will automatically display Details and TMDB rating.
28+
29+
30+
<h3> ScreenShots </h3>
31+
<img width="943" alt="Movie-Search-App" src="https://user-images.githubusercontent.com/64218887/127524703-566caee0-ee93-4802-b6c6-6173b6fbb4f6.png">
32+
33+
<br>

‎Movie-Search-App/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Movie Search App</title>
8+
9+
<!-- Custom CSS -->
10+
<link rel="stylesheet" href="./styles.css" />
11+
</head>
12+
<body>
13+
<header>
14+
<h3 class="logo">Movie Search App</h3>
15+
<form id="form">
16+
<input type="text" placeholder="Search" id="search" class="search" />
17+
</form>
18+
</header>
19+
20+
<main id="main"></main>
21+
<h1 hidden id="recommendations-header" style="text-align: center">
22+
Recommendations based on search results
23+
</h1>
24+
<div id="recommendations"></div>
25+
26+
<div class="footer">
27+
<h4>Designed & Developed with &#10084;&#65039; by Atif</h4>
28+
</div>
29+
30+
<!-- Custom Script -->
31+
<script src="./script.js"></script>
32+
</body>
33+
</html>

‎Movie-Search-App/script.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
const API_KEY = "api_key=1cf50e6248dc270629e802686245c2c8";
2+
const BASE_URL = "https://api.themoviedb.org/3";
3+
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
4+
const IMG_URL = "https://image.tmdb.org/t/p/w500";
5+
const searchURL = BASE_URL + "/search/movie?" + API_KEY;
6+
const recommendationsHeader = document.getElementById("recommendations-header");
7+
let movieId = "";
8+
let recommendationsURL = "";
9+
const main = document.getElementById("main");
10+
const recommendations = document.getElementById("recommendations");
11+
const form = document.getElementById("form");
12+
const search = document.getElementById("search");
13+
14+
getMovies(API_URL);
15+
function getMovies(url) {
16+
fetch(url)
17+
.then((res) => res.json())
18+
.then((data) => {
19+
showMovies(data.results);
20+
});
21+
}
22+
23+
function getRecommendations(url) {
24+
fetch(url)
25+
.then((res) => res.json())
26+
.then((data) => {
27+
movieId = data.results[0].id;
28+
recommendationsURL =
29+
BASE_URL +
30+
`/movie/${movieId}/recommendations?` +
31+
API_KEY +
32+
"&language=en-US&page=1";
33+
fetch(recommendationsURL)
34+
.then((res) => res.json())
35+
.then((data) => {
36+
showRecommendations(data.results);
37+
});
38+
});
39+
}
40+
41+
function showMovies(data) {
42+
main.innerHTML = "";
43+
data.forEach((movie) => {
44+
const { title, poster_path, vote_average, overview } = movie;
45+
const movieEl = document.createElement("div");
46+
movieEl.classList.add("movie");
47+
movieEl.innerHTML = `
48+
<img src="${IMG_URL + poster_path}" alt="${title}">
49+
<div class="movie-info">
50+
<h3>${title}</h3>
51+
<span class="${getColor(vote_average)}">${
52+
Math.round(vote_average * 10) / 10
53+
}</span>
54+
</div>
55+
<div class="overview">
56+
<h3>Overview</h3>
57+
${overview}
58+
</div>
59+
`;
60+
61+
main.appendChild(movieEl);
62+
});
63+
}
64+
65+
function showRecommendations(data) {
66+
recommendations.innerHTML = "";
67+
data.forEach((movie) => {
68+
const { title, poster_path, vote_average, overview } = movie;
69+
const movieEl = document.createElement("div");
70+
movieEl.classList.add("movie");
71+
movieEl.innerHTML = `
72+
<img src="${IMG_URL + poster_path}" alt="${title}">
73+
<div class="movie-info">
74+
<h3>${title}</h3>
75+
<span class="${getColor(vote_average)}">${
76+
Math.round(vote_average * 10) / 10
77+
}</span>
78+
</div>
79+
<div class="overview">
80+
<h3>Overview</h3>
81+
${overview}
82+
</div>
83+
`;
84+
85+
recommendations.appendChild(movieEl);
86+
});
87+
}
88+
89+
function getColor(vote) {
90+
if (vote >= 8) {
91+
return "green";
92+
} else if (vote >= 5) {
93+
return "orange";
94+
} else {
95+
return "red";
96+
}
97+
}
98+
99+
form.addEventListener("submit", (e) => {
100+
e.preventDefault();
101+
const searchTerm = search.value;
102+
if (searchTerm) {
103+
getMovies(searchURL + "&query=" + searchTerm);
104+
getRecommendations(searchURL + "&query=" + searchTerm);
105+
recommendationsHeader.hidden = false;
106+
} else {
107+
getMovies(API_URL);
108+
}
109+
});

‎Movie-Search-App/style.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Benne&display=swap");
2+
* {
3+
box-sizing: border-box;
4+
}
5+
:root {
6+
--primary-color: #22254b;
7+
--secondary-color: #373b69;
8+
}
9+
body {
10+
background-color: var(--primary-color);
11+
font-family: "Benne", serif;
12+
margin: 0;
13+
}
14+
15+
.logo {
16+
font-family: inherit;
17+
}
18+
header {
19+
padding: 1rem;
20+
display: flex;
21+
justify-content: space-evenly;
22+
background-color: var(--secondary-color);
23+
}
24+
.search {
25+
background-color: transparent;
26+
border: 2px solid var(--primary-color);
27+
padding: 0.5rem 1rem;
28+
border-radius: 50px;
29+
font-size: 1rem;
30+
color: #fff;
31+
font-family: inherit;
32+
margin-top: 10px;
33+
}
34+
.search:focus {
35+
outline: 0;
36+
background-color: var(--primary-color);
37+
}
38+
.search::placeholder {
39+
color: #7378c5;
40+
}
41+
main,
42+
#recommendations {
43+
display: flex;
44+
flex-wrap: wrap;
45+
justify-content: center;
46+
}
47+
.movie {
48+
width: 300px;
49+
margin: 1rem;
50+
border-radius: 3px;
51+
box-shadow: 0.2px 4px 5px rgba(0, 0, 0, 1);
52+
background-color: var(--secondary-color);
53+
position: relative;
54+
overflow: hidden;
55+
}
56+
.movie img {
57+
width: 100%;
58+
}
59+
.movie-info {
60+
color: #eee;
61+
display: flex;
62+
align-items: center;
63+
justify-content: space-between;
64+
padding: 0.5rem 1rem 1rem;
65+
letter-spacing: 0.5px;
66+
}
67+
.movie-info h3 {
68+
margin-top: 0;
69+
}
70+
.movie-info span {
71+
background-color: var(--primary-color);
72+
padding: 0.25rem 0.5rem;
73+
border-radius: 3px;
74+
font-weight: bold;
75+
}
76+
.movie-info span.green {
77+
color: lightgreen;
78+
}
79+
.movie-info span.orange {
80+
color: orange;
81+
}
82+
.movie-info span.red {
83+
color: red;
84+
}
85+
.overview {
86+
position: absolute;
87+
left: 0;
88+
right: 0;
89+
bottom: 0;
90+
background-color: #fff;
91+
padding: 1rem;
92+
max-height: 100%;
93+
transform: translateY(101%);
94+
transition: transform 0.3s ease-in-out;
95+
}
96+
.movie:hover .overview {
97+
transform: translateY(0);
98+
}
99+
.footer {
100+
padding: 0.4rem !important;
101+
margin: 10px;
102+
border-color: inherit;
103+
border-style: solid;
104+
border-width: 0;
105+
background-color: #212529 !important;
106+
}
107+
.footer h4 {
108+
color: white;
109+
text-align: center;
110+
}

0 commit comments

Comments
 (0)