Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7eb7728

Browse files
Chore: All Activites completed for Day-25
1 parent f8620dd commit 7eb7728

File tree

7 files changed

+240
-0
lines changed

7 files changed

+240
-0
lines changed

‎Day25/Task.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Day 25: Project 2 - Movie Search App 🎬🎥
2+
3+
Ready to dive into your second project? Today, you'll be building a Movie Search App that fetches movie data from a public API, displays search results, and allows users to explore detailed information about their favorite films. Let's get rolling! 🍿🎉
4+
5+
## Tasks/Activities 📝
6+
7+
### Activity 1: Setting Up the Project 🛠️
8+
- [ ] **Task 1:** Initialize a new project directory and set up the basic HTML structure for the movie search app.
9+
- [ ] **Task 2:** Add a basic CSS file to style the movie search app, including a container for displaying movie search results.
10+
11+
### Activity 2: Fetching Movie Data 🌐
12+
- [ ] **Task 3:** Use the Fetch API to get movie data from a public movie API (e.g., OMDB API or The Movie Database API). Log the response data to the console.
13+
- [ ] **Task 4:** Parse the movie data and display the movie title, poster, and release year on the web page.
14+
15+
### Activity 3: Adding Search Functionality 🔍
16+
- [ ] **Task 5:** Add an input field and a search button to the HTML structure. Style the input and button using CSS.
17+
- [ ] **Task 6:** Write a function to fetch and display movie data based on a search query entered in the input field. Log any errors to the console.
18+
19+
### Activity 4: Displaying Detailed Movie Information 📜
20+
- [ ] **Task 7:** Modify the search results to include a "More Info" button for each movie. When clicked, fetch and display additional details about the movie, such as the plot, director, and actors.
21+
- [ ] **Task 8:** Create a modal or a new section on the page to display the detailed movie information.
22+
23+
### Activity 5: Enhancing the UI 🎨
24+
- [ ] **Task 9:** Add CSS styles to improve the layout and design of the search results and detailed movie information.
25+
- [ ] **Task 10:** Add CSS animations or transitions to make the movie search app more interactive and visually appealing.
26+
27+
## Feature Request 🎯
28+
29+
1. **Movie Data Fetching Script:** Write a script that fetches movie data from a public API and displays the title, poster, and release year on the web page.
30+
2. **Search Functionality Script:** Create a script that allows users to search for movies by title and displays the search results.
31+
3. **Detailed Information Script:** Write a script that fetches and displays additional details about a selected movie, such as the plot, director, and actors.
32+
4. **UI Enhancement Script:** Create a script that improves the layout and design of the movie search app with CSS styles and animations.
33+
34+
## Achievement Unlocked 🏆
35+
36+
By the end of these activities, you will:
37+
38+
- ✅ Set up a basic project structure with HTML and CSS.
39+
- ✅ Use the Fetch API to retrieve and display movie data from a public API.
40+
- ✅ Implement search functionality to fetch and display movie data based on user input.
41+
- ✅ Fetch and display detailed information about selected movies.
42+
- ✅ Enhance the user interface with CSS styles and animations to make the movie search app more interactive and visually appealing.
43+
44+
---
45+
46+
happy Coding! 🎬💻

‎Day25/images/screenshot-1.png

402 KB
Loading[フレーム]

‎Day25/images/screenshot-2.png

1.38 MB
Loading[フレーム]

‎Day25/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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 Info</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
11+
/>
12+
<link rel="stylesheet" href="https://bootswatch.com/5/united/bootstrap.min.css" />
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
17+
<div class="container">
18+
<div class="navbar-header">
19+
<a class="navbar-brand" href="index.html">📽️ Movie Info App</a>
20+
</div>
21+
</div>
22+
</nav>
23+
<div class="container pt-4">
24+
<div class="jumbotron">
25+
<h3 class="text-center p-4">Search For Any Movie</h3>
26+
<form id="searchForm">
27+
<div class="input-group mb-2">
28+
<div class="input-group-prepend">
29+
<div class="input-group-text">🔍</div>
30+
</div>
31+
<input
32+
type="text"
33+
class="form-control pt-2"
34+
id="searchText"
35+
placeholder="Search Movies..."
36+
/>
37+
</div>
38+
</form>
39+
</div>
40+
</div>
41+
<div class="container">
42+
<div id="movies" class="row"></div>
43+
</div>
44+
45+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
46+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
47+
<script src="main.js"></script>
48+
</body>
49+
</html>

‎Day25/main.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
$(document).ready(() => {
2+
$("#searchForm").on("submit", (event) => {
3+
let searchText = $("#searchText").val();
4+
getMovies(searchText);
5+
event.preventDefault();
6+
});
7+
});
8+
9+
function getMovies(searchText) {
10+
axios
11+
.get(`http://www.omdbapi.com/?i=tt3896198&apikey=3a43dcb5&s=${searchText}`)
12+
.then((response) => {
13+
let movies = response.data.Search;
14+
let output = "";
15+
$.each(movies, (index, movie) => {
16+
output += `
17+
<div class="col-md-3">
18+
<div class="card text-center" style="border: none;">
19+
<img src="${movie.Poster}"/>
20+
<h5>${movie.Title}</h5>
21+
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-dark" href="#">Movie Details</a>
22+
</div>
23+
</div>`;
24+
});
25+
$("#movies").html(output);
26+
})
27+
.catch((error) => {
28+
console.log(error);
29+
});
30+
}
31+
32+
function movieSelected(id) {
33+
sessionStorage.setItem("movieId", id);
34+
window.location = "movie.html";
35+
return false;
36+
}
37+
38+
function getMovie() {
39+
let movieId = sessionStorage.getItem("movieId");
40+
41+
axios
42+
.get(`http://www.omdbapi.com/?i=${movieId}&apikey=3a43dcb5`)
43+
.then((response) => {
44+
let movie = response.data;
45+
46+
let output = `
47+
<div class="row">
48+
<div class="col-md-4">
49+
<img src="${movie.Poster}" class="img-thumbnail">
50+
</div>
51+
<div class="col-md-8">
52+
<h2>${movie.Title}</h2>
53+
<ul class="list-group list-group-flush">
54+
<li class="list-group-item"><strong>Genre: </strong> ${movie.Genre}</li>
55+
<li class="list-group-item"><strong>Released: </strong> ${movie.Released}</li>
56+
<li class="list-group-item"><strong>Rated: </strong> ${movie.Rated}</li>
57+
<li class="list-group-item"><strong>IMDB Rating: </strong> ${movie.imdbRating}</li>
58+
<li class="list-group-item"><strong>Director: </strong> ${movie.Director}</li>
59+
<li class="list-group-item"><strong>Writer: </strong> ${movie.Writer}</li>
60+
<li class="list-group-item"><strong>Actors: </strong> ${movie.Actors}</li>
61+
<li class="list-group-item"></li>
62+
</ul>
63+
</div>
64+
</div>
65+
<div class="row pt-4">
66+
<div class="card">
67+
<h3>Plot</h3>
68+
${movie.Plot}
69+
<hr>
70+
<a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-dark">View IMDB</a>
71+
<a href="index.html" class="btn btn-default">Go Back To Search</a>
72+
</div>
73+
</div>
74+
`;
75+
76+
$("#movie").html(output);
77+
})
78+
.catch((err) => {
79+
console.log(err);
80+
});
81+
}

‎Day25/movie.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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 Info</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
11+
/>
12+
<link rel="stylesheet" href="https://bootswatch.com/5/united/bootstrap.min.css" />
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
17+
<div class="container">
18+
<div class="navbar-header">
19+
<a class="navbar-brand" href="index.html">Movie Info App</a>
20+
</div>
21+
</div>
22+
</nav>
23+
24+
<div class="container pt-4 pb-4">
25+
<div id="movie" class="card" style="border: none"></div>
26+
</div>
27+
28+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
29+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
30+
<script src="main.js"></script>
31+
<script>
32+
getMovie();
33+
</script>
34+
</body>
35+
</html>

‎Day25/style.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#movies img,
2+
#movie img {
3+
width: 100%;
4+
}
5+
6+
@media (min-width: 960px) {
7+
#movies .col-md-3 .card {
8+
height: 390px;
9+
}
10+
11+
#movies .col-md-3 img {
12+
height: 290px;
13+
}
14+
}
15+
16+
html {
17+
--s: 94px; /* control the size*/
18+
--c1: #384670;
19+
--c2: #d86e4b;
20+
21+
--g:var(--c1) 0 25%,var(--c2) 0 50%,#0000 0;
22+
background:
23+
conic-gradient(from 135deg at 25% 75%, var(--g))
24+
calc(var(--s)/4) calc(var(--s)/-4),
25+
conic-gradient(from -45deg at 75% 25%, var(--g))
26+
calc(var(--s)/-4) calc(var(--s)/4),
27+
repeating-conic-gradient(var(--g));
28+
background-size: var(--s) var(--s);
29+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /