Skip to content

Commit 951443e

Browse files
Gavin-WangSCGavin-WangSC
authored
Merge pull request #3 from Whfkqreodgh/master
feat: add tutorial 03 movie website
2 parents f9844f9 + c78b23d commit 951443e

File tree

5 files changed

+186
-0
lines changed

5 files changed

+186
-0
lines changed

‎03-movie_website/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Movie Website
2+
This project is a dynamic movie search application that fetches real-time data from the TMDB (The Movie Database) API. Users can view popular movies on the landing page or search for specific titles using the search bar.
3+
4+
## Features
5+
- Dynamic Data Fetching: Retrieves movie titles and posters directly from the TMDB API.
6+
7+
- Search Functionality: Allows users to search for any movie in the TMDB database.
8+
9+
- Responsive Grid Layout: Displays movies in a card-based column system using CSS.
10+
11+
- Modern UI: Features a dark-themed, sleek interface with customized form inputs and hover-ready cards.
12+
13+
## Technologies Used
14+
- HTML5: Structure of the navigation, search form, and movie display section.
15+
16+
- CSS3: Custom styling, including a flexbox search container and a multi-column grid layout.
17+
18+
- JavaScript: Handles the fetch API requests, DOM manipulation, and search event listeners.
19+
20+
- TMDB API: The external data source for movie information.
21+
22+
## Project Structure
23+
- index.html: The main entry point containing the layout and search form.
24+
25+
- style.css: Contains the styling for the navigation bar, movie cards, and responsive columns.
26+
27+
- script.js: The logic for fetching data, clearing the previous results, and dynamically creating movie elements on the page.
28+
29+
## How to Use
30+
Clone the repository.
31+
32+
Open the 03-movie_website folder.
33+
34+
Launch index.html in your favorite web browser.
35+
36+
Browse the "Popular" movies that load by default, or type a movie name into the search box and press Enter to update the list.

‎03-movie_website/img/avengers_3.jpg‎

5.2 MB
Loading

‎03-movie_website/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Movie site</title>
5+
<link rel="stylesheet" href="style.css">
6+
</head>
7+
<body>
8+
<div class="topNavigation">
9+
<a href="#">Movie Site</a>
10+
<!-- top of the current page -->
11+
<div class="searchContainer">
12+
<form role="search" id="form">
13+
<input type="search" id="query" name="q" placeholder="Search...">
14+
</form>
15+
</div>
16+
</div>
17+
18+
<section id="section">
19+
20+
<div class="row">
21+
<div class="column">
22+
<div class="card">
23+
<img src="avengers_3.jpg" class="thumbnail">
24+
<h3>Movie Title</h3>
25+
</div>
26+
</div>
27+
</div>
28+
</section>
29+
</body>
30+
<script src="script.js"></script>
31+
</html>

‎03-movie_website/script.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const APILINK = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=d8aadb2b27981f543b5d6d89810470a7&page=1';
2+
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280';
3+
const SEARCHAPI = 'https://api.themoviedb.org/3/search/movie?api_key=d8aadb2b27981f543b5d6d89810470a7&query=';
4+
5+
const main = document.getElementById("section");
6+
const search = document.getElementById("query");
7+
8+
returnMovies(APILINK)
9+
function returnMovies(url){
10+
fetch(url).then(res => res.json())
11+
.then(function(data){
12+
console.log(data.results);
13+
data.results.forEach(element => {
14+
const div_row = document.createElement('div');
15+
div_row.setAttribute('class', 'row');
16+
17+
const div_column = document.createElement('div');
18+
div_column.setAttribute('class', 'column');
19+
20+
const div_card = document.createElement('div');
21+
div_card.setAttribute('class', 'card');
22+
23+
const image = document.createElement('img');
24+
image.setAttribute('class', 'thumbnail');
25+
image.setAttribute('id', 'image');
26+
27+
const title = document.createElement('h3');
28+
title.setAttribute('id', 'title');
29+
30+
title.innerHTML = `${element.title}`;
31+
image.src = IMG_PATH + element.poster_path;
32+
33+
div_card.appendChild(image);
34+
div_card.appendChild(title);
35+
div_column.appendChild(div_card);
36+
div_row.appendChild(div_column);
37+
main.appendChild(div_row);
38+
});
39+
});
40+
}
41+
42+
form.addEventListener("submit", (e) => {
43+
e.preventDefault();
44+
main.innerHTML = ''
45+
46+
const searchItem = search.value;
47+
if (searchItem) {
48+
returnMovies(SEARCHAPI + searchItem);
49+
search.value = "";
50+
}
51+
})

‎03-movie_website/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
* {
2+
box-sizing: border-box;
3+
/* let width be the total width includes padding and border */
4+
}
5+
body {
6+
background-color: #131720;
7+
font-family: sans-serif;
8+
}
9+
10+
h3 {
11+
color: white;
12+
}
13+
14+
.topNavigation {
15+
overflow: hidden;
16+
background-color: #131720;
17+
padding: 10px;
18+
}
19+
20+
.topNavigation a{
21+
float: left;
22+
display: block;
23+
text-align: center;
24+
color: white;
25+
padding: 14px 16px;
26+
text-decoration: none;
27+
font-size: 1.2rem;
28+
text-transform: uppercase;
29+
}
30+
31+
.topNavigation .searchContainer{
32+
float:right;
33+
}
34+
35+
form{
36+
background-color: #151f30;
37+
width: 300px;
38+
height: 43px;
39+
border-radius: 11px;
40+
display: flex;
41+
}
42+
input {
43+
all: unset;
44+
font: 15px system-ui;
45+
color: #fff;
46+
height: 100%;
47+
width: 100%;
48+
padding: 6px 9px;
49+
}
50+
51+
.thumbnail {
52+
height: 350px;
53+
width: 300px;
54+
border-radius: 19px;
55+
}
56+
.column {
57+
float:left;
58+
width: 25%;
59+
padding: 10px 10px;
60+
61+
}
62+
63+
.card {
64+
border-radius: 19px;
65+
padding: 15px;
66+
text-align: center;
67+
background-color: #151f30;
68+
}

0 commit comments

Comments
 (0)