Skip to content

Commit 258d324

Browse files
CodingBDXCodingBDX
authored
Add files via upload
1 parent 53286c9 commit 258d324

3 files changed

Lines changed: 218 additions & 0 deletions

File tree

‎prototype/movie-app/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
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>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<header>
12+
<form id="form">
13+
<input type="text" placeholder="search" id="search" class="search">
14+
</form>
115

16+
</header>
17+
<main id="main">
18+
19+
</main>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎prototype/movie-app/script.js‎

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

‎prototype/movie-app/style.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
2+
body {
3+
margin: 0;
4+
background-color: blueviolet;
5+
}
6+
7+
header{
8+
padding: 1rem;
9+
display: flex;
10+
background-color: darkmagenta;
11+
justify-content: center;
12+
}
13+
14+
.search {
15+
background-color: transparent;
16+
border: 2px solid blueviolet;
17+
border-radius: 50px;
18+
font-size: 1rem;
19+
padding: .5rem .5rem;
20+
text-align: center;
21+
}
22+
23+
.search::placeholder{
24+
color: crimson;
25+
26+
}
27+
28+
.search:focus{
29+
background-color: blue;
30+
outline: none;
31+
}
32+
33+
main {
34+
display: flex;
35+
flex-wrap: wrap;
36+
}
37+
38+
.movie img {
39+
width: 100%;
40+
}
41+
.movie {
42+
width:300px;
43+
margin: 1rem;
44+
background-color: darkorchid;
45+
padding: .3rem;
46+
position: relative;
47+
overflow: hidden;
48+
}
49+
50+
51+
52+
.movie-info {
53+
align-items: center;
54+
justify-content: space-between;
55+
display: flex;
56+
color: aliceblue;
57+
padding: .5rem 1rem .5rem;
58+
letter-spacing: 5px;
59+
}
60+
61+
.movie-info h3 {
62+
margin-top: 0;
63+
64+
}
65+
66+
.movie-info span {
67+
background-color: aliceblue;
68+
color: blueviolet;
69+
padding: .25rem 1rem ;
70+
border-radius: 25px;
71+
font-weight: bold;
72+
}
73+
.movie-info span.green {
74+
color: chartreuse;
75+
}
76+
.movie-info span.orange {
77+
color: coral;
78+
}
79+
.movie-info span.red {
80+
color: crimson;
81+
}
82+
83+
84+
.overview {
85+
background-color: aliceblue;
86+
color: blueviolet;
87+
padding: 15px;
88+
text-align: center;
89+
position: absolute;
90+
left: 0;
91+
92+
bottom: 0;
93+
right: 0;
94+
max-height: 101%;
95+
transform: translateY(101%);
96+
transition: 0.3s transform;
97+
}
98+
99+
.movie:hover .overview {
100+
padding: .5px;
101+
transform: translateY(0);
102+
}
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+

0 commit comments

Comments
 (0)