diff --git a/README.md b/README.md index ec6af70..ef4e7c2 100644 --- a/README.md +++ b/README.md @@ -485,6 +485,17 @@ In order to run this project you need: +
  • +
    +Movie Search App +

    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.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/MovieSearchApp/index.html b/Source-Code/MovieSearchApp/index.html new file mode 100644 index 0000000..6434f2c --- /dev/null +++ b/Source-Code/MovieSearchApp/index.html @@ -0,0 +1,20 @@ + + + + + + Movie Search App + + + +
    +

    Movie Search App

    +
    + + +
    +
    +
    + + + diff --git a/Source-Code/MovieSearchApp/script.js b/Source-Code/MovieSearchApp/script.js new file mode 100644 index 0000000..860da01 --- /dev/null +++ b/Source-Code/MovieSearchApp/script.js @@ -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 = ` + ${movie.Title} +

    ${movie.Title}

    +

    Year: ${movie.Year}

    + `; + + movieContainer.appendChild(movieCard); + }); +}; + +// Show Error Message +const showError = (message) => { + movieContainer.innerHTML = `

    ${message}

    `; +}; + +// 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.'); + } +}); diff --git a/Source-Code/MovieSearchApp/style.css b/Source-Code/MovieSearchApp/style.css new file mode 100644 index 0000000..2c8a42c --- /dev/null +++ b/Source-Code/MovieSearchApp/style.css @@ -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; +}