Skip to content

Commit b17c6c1

Browse files
solygambassolygambas
committed
add movie app
1 parent d025ca7 commit b17c6c1

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

Diff for: ‎17-movie app/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Movie App</title>
8+
</head>
9+
<body>
10+
<header>
11+
<form id="form">
12+
<input type="text" placeholder="Search" id="search" class="search" />
13+
</form>
14+
</header>
15+
<main id="main"></main>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

Diff for: ‎17-movie app/script.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const API_URL =
2+
"https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1";
3+
// For education purpose only - Do not use this key in production
4+
const IMG_PATH = "https://image.tmdb.org/t/p/w1280";
5+
const SEARCH_API =
6+
'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="';
7+
8+
const main = document.getElementById("main");
9+
const form = document.getElementById("form");
10+
const search = document.getElementById("search");
11+
12+
const getClassByRate = (vote) => {
13+
if (vote >= 8) return "green";
14+
else if (vote >= 7) return "orange";
15+
else return "red";
16+
};
17+
18+
const showMovies = (movies) => {
19+
main.innerHTML = "";
20+
movies.forEach((movie) => {
21+
const { title, poster_path, vote_average, overview } = movie;
22+
const movieElement = document.createElement("div");
23+
movieElement.classList.add("movie");
24+
movieElement.innerHTML = `
25+
<img
26+
src="${IMG_PATH + poster_path}"
27+
alt="${title}"
28+
/>
29+
<div class="movie-info">
30+
<h3>${title}</h3>
31+
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
32+
</div>
33+
<div class="overview">
34+
<h3>Overview</h3>
35+
${overview}
36+
</div>
37+
`;
38+
main.appendChild(movieElement);
39+
});
40+
};
41+
42+
const getMovies = async (url) => {
43+
const res = await fetch(url);
44+
const data = await res.json();
45+
showMovies(data.results);
46+
};
47+
48+
getMovies(API_URL);
49+
50+
form.addEventListener("submit", (e) => {
51+
e.preventDefault();
52+
const searchTerm = search.value;
53+
if (searchTerm && searchTerm !== "") {
54+
getMovies(SEARCH_API + searchTerm);
55+
search.value = "";
56+
} else window.location.reload();
57+
});

Diff for: ‎17-movie app/style.css

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

0 commit comments

Comments
 (0)