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 20d31cc

Browse files
Add the project
1 parent 82cf947 commit 20d31cc

File tree

3 files changed

+157
-0
lines changed

3 files changed

+157
-0
lines changed
Lines changed: 20 additions & 0 deletions
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>

‎Source-Code/MovieSearchApp/script.js‎

Lines changed: 59 additions & 0 deletions
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+
});

‎Source-Code/MovieSearchApp/style.css‎

Lines changed: 78 additions & 0 deletions
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)

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