Skip to content

50Projects-HTML-CSS-JavaScript : Movie search app #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 22, 2024
Merged

50Projects-HTML-CSS-JavaScript : Movie search app #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20d31cc
Add the project
tajulafreen Dec 22, 2024
f608698
update the readme with the project description
tajulafreen Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -485,6 +485,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Movie Search App</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MovieSearchApp/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MovieSearchApp">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
20 changes: 20 additions & 0 deletions Source-Code/MovieSearchApp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Search App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Movie Search App</h1>
<div class="search-container">
<input type="text" id="search" placeholder="Search for a movie...">
<button id="search-btn">Search</button>
</div>
<div id="movie-container" class="movie-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
59 changes: 59 additions & 0 deletions Source-Code/MovieSearchApp/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const searchBtn = document.getElementById('search-btn');
const searchInput = document.getElementById('search');
const movieContainer = document.getElementById('movie-container');

// API Details
const API_KEY = '40bbd9b4'; // Replace with your OMDB or TMDB API key
const API_URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=`;

// Display Movies
const displayMovies = (movies) => {
movieContainer.innerHTML = ''; // Clear previous results

movies.forEach((movie) => {
const movieCard = document.createElement('div');
movieCard.classList.add('movie-card');

movieCard.innerHTML = `
<img src="${
movie.Poster !== 'N/A' ? movie.Poster : 'placeholder.jpg'
}" alt="${movie.Title}">
<h3>${movie.Title}</h3>
<p><strong>Year:</strong> ${movie.Year}</p>
`;

movieContainer.appendChild(movieCard);
});
};

// Show Error Message
const showError = (message) => {
movieContainer.innerHTML = `<p class="error">${message}</p>`;
};

// Fetch Movies
async function fetchMovies(query) {
try {
const response = await fetch(`${API_URL}${query}`);
const data = await response.json();

if (data.Response === 'True') {
displayMovies(data.Search);
} else {
showError(data.Error);
}
} catch (error) {
console.error('Error fetching data:', error);
showError('Unable to fetch data. Please try again later.');
}
}

// Event Listener
searchBtn.addEventListener('click', () => {
const query = searchInput.value.trim();
if (query) {
fetchMovies(query);
} else {
showError('Please enter a movie name.');
}
});
78 changes: 78 additions & 0 deletions Source-Code/MovieSearchApp/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
}

.container {
padding: 20px;
}

h1 {
color: #333;
}

.search-container {
margin: 20px 0;
}

#search {
padding: 10px;
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
}

#search-btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

#search-btn:hover {
background-color: #0056b3;
}

.movie-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.movie-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 250px;
text-align: left;
overflow: hidden;
}

.movie-card img {
width: 100%;
height: auto;
}

.movie-card h3 {
padding: 10px;
font-size: 18px;
}

.movie-card p {
padding: 0 10px 10px;
font-size: 14px;
color: #555;
}

.error {
color: red;
margin-top: 20px;
}