Skip to content

Commit 41b672c

Browse files
tajulafreentajulafreen
authored
Merge pull request #46 from tajulafreen/Movie_Search_App
50Projects-HTML-CSS-JavaScript : Movie search app
2 parents 82cf947 + f608698 commit 41b672c

File tree

4 files changed

+168
-0
lines changed

4 files changed

+168
-0
lines changed

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,17 @@ In order to run this project you need:
485485
</details>
486486
</li>
487487

488+
<li>
489+
<details>
490+
<summary>Movie Search App</summary>
491+
<p>The Movie Search App is a simple and responsive web application that allows users to search for movies and view their details. It utilizes a public API like OMDB to fetch and display movie information, including the title, year of release, and poster.</p>
492+
<ul>
493+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MovieSearchApp/">Live Demo</a></li>
494+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MovieSearchApp">Source</a></li>
495+
</ul>
496+
</details>
497+
</li>
498+
488499
</ol>
489500

490501
<p align="right">(<a href="#readme-top">back to top</a>)</p>

Diff for: ‎Source-Code/MovieSearchApp/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
<title>Movie Search App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Movie Search App</h1>
12+
<div class="search-container">
13+
<input type="text" id="search" placeholder="Search for a movie...">
14+
<button id="search-btn">Search</button>
15+
</div>
16+
<div id="movie-container" class="movie-container"></div>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

Diff for: ‎Source-Code/MovieSearchApp/script.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const searchBtn = document.getElementById('search-btn');
2+
const searchInput = document.getElementById('search');
3+
const movieContainer = document.getElementById('movie-container');
4+
5+
// API Details
6+
const API_KEY = '40bbd9b4'; // Replace with your OMDB or TMDB API key
7+
const API_URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=`;
8+
9+
// Display Movies
10+
const displayMovies = (movies) => {
11+
movieContainer.innerHTML = ''; // Clear previous results
12+
13+
movies.forEach((movie) => {
14+
const movieCard = document.createElement('div');
15+
movieCard.classList.add('movie-card');
16+
17+
movieCard.innerHTML = `
18+
<img src="${
19+
movie.Poster !== 'N/A' ? movie.Poster : 'placeholder.jpg'
20+
}" alt="${movie.Title}">
21+
<h3>${movie.Title}</h3>
22+
<p><strong>Year:</strong> ${movie.Year}</p>
23+
`;
24+
25+
movieContainer.appendChild(movieCard);
26+
});
27+
};
28+
29+
// Show Error Message
30+
const showError = (message) => {
31+
movieContainer.innerHTML = `<p class="error">${message}</p>`;
32+
};
33+
34+
// Fetch Movies
35+
async function fetchMovies(query) {
36+
try {
37+
const response = await fetch(`${API_URL}${query}`);
38+
const data = await response.json();
39+
40+
if (data.Response === 'True') {
41+
displayMovies(data.Search);
42+
} else {
43+
showError(data.Error);
44+
}
45+
} catch (error) {
46+
console.error('Error fetching data:', error);
47+
showError('Unable to fetch data. Please try again later.');
48+
}
49+
}
50+
51+
// Event Listener
52+
searchBtn.addEventListener('click', () => {
53+
const query = searchInput.value.trim();
54+
if (query) {
55+
fetchMovies(query);
56+
} else {
57+
showError('Please enter a movie name.');
58+
}
59+
});

Diff for: ‎Source-Code/MovieSearchApp/style.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f4f4f4;
6+
text-align: center;
7+
}
8+
9+
.container {
10+
padding: 20px;
11+
}
12+
13+
h1 {
14+
color: #333;
15+
}
16+
17+
.search-container {
18+
margin: 20px 0;
19+
}
20+
21+
#search {
22+
padding: 10px;
23+
width: 300px;
24+
border: 1px solid #ccc;
25+
border-radius: 4px;
26+
}
27+
28+
#search-btn {
29+
padding: 10px 20px;
30+
background-color: #007bff;
31+
color: #fff;
32+
border: none;
33+
border-radius: 4px;
34+
cursor: pointer;
35+
}
36+
37+
#search-btn:hover {
38+
background-color: #0056b3;
39+
}
40+
41+
.movie-container {
42+
display: flex;
43+
flex-wrap: wrap;
44+
justify-content: center;
45+
gap: 20px;
46+
margin-top: 20px;
47+
}
48+
49+
.movie-card {
50+
background-color: #fff;
51+
border: 1px solid #ddd;
52+
border-radius: 4px;
53+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
54+
width: 250px;
55+
text-align: left;
56+
overflow: hidden;
57+
}
58+
59+
.movie-card img {
60+
width: 100%;
61+
height: auto;
62+
}
63+
64+
.movie-card h3 {
65+
padding: 10px;
66+
font-size: 18px;
67+
}
68+
69+
.movie-card p {
70+
padding: 0 10px 10px;
71+
font-size: 14px;
72+
color: #555;
73+
}
74+
75+
.error {
76+
color: red;
77+
margin-top: 20px;
78+
}

0 commit comments

Comments
 (0)