From 26e13743ecf6d791bb5c7a045f704c3253f62035 Mon Sep 17 00:00:00 2001 From: AckermanLevi1 Date: Wed, 11 Oct 2023 13:37:45 +0530 Subject: [PATCH] Added --- MovieInfoApp/AckermanLevi1/index.css | 57 +++++++++++++++++++++++++++ MovieInfoApp/AckermanLevi1/index.html | 34 ++++++++++++++++ MovieInfoApp/AckermanLevi1/index.js | 32 +++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 MovieInfoApp/AckermanLevi1/index.css create mode 100644 MovieInfoApp/AckermanLevi1/index.html create mode 100644 MovieInfoApp/AckermanLevi1/index.js diff --git a/MovieInfoApp/AckermanLevi1/index.css b/MovieInfoApp/AckermanLevi1/index.css new file mode 100644 index 000000000..d50c7b20e --- /dev/null +++ b/MovieInfoApp/AckermanLevi1/index.css @@ -0,0 +1,57 @@ +body { + font-family: Arial, sans-serif; +} + +header { + text-align: center; + background-color: #333; + color: #fff; + padding: 1rem; +} + +main { + max-width: 800px; + margin: 0 auto; + padding: 1rem; +} + +.search-bar { + text-align: center; + margin-bottom: 1rem; +} + +#search-input { + width: 60%; + padding: 0.5rem; + border: 1px solid #ccc; +} + +#search-button { + padding: 0.5rem 1rem; + background-color: #333; + color: #fff; + border: none; + cursor: pointer; +} + +.movie-info { + display: flex; + align-items: center; +} + +.poster img { + max-width: 200px; +} + +.details { + margin-left: 1rem; +} + +#movie-title { + font-size: 1.5rem; + margin: 0; +} + +p { + margin: 0.5rem 0; +} diff --git a/MovieInfoApp/AckermanLevi1/index.html b/MovieInfoApp/AckermanLevi1/index.html new file mode 100644 index 000000000..38653b13c --- /dev/null +++ b/MovieInfoApp/AckermanLevi1/index.html @@ -0,0 +1,34 @@ + + + + + + + Movie Info Website + + +
+

Movie Info Website

+
+
+
+ + +
+
+
+ Movie Poster +
+
+

+

Genre:

+

Cast:

+

IMDb Rating:

+

Released Date:

+

Director:

+
+
+
+ + + diff --git a/MovieInfoApp/AckermanLevi1/index.js b/MovieInfoApp/AckermanLevi1/index.js new file mode 100644 index 000000000..7f5fb1e9c --- /dev/null +++ b/MovieInfoApp/AckermanLevi1/index.js @@ -0,0 +1,32 @@ +const searchButton = document.getElementById('search-button'); +const searchInput = document.getElementById('search-input'); +const movieTitle = document.getElementById('movie-title'); +const movieGenre = document.getElementById('movie-genre'); +const movieCast = document.getElementById('movie-cast'); +const movieRating = document.getElementById('movie-rating'); +const movieReleased = document.getElementById('movie-released'); +const movieDirector = document.getElementById('movie-director'); +const moviePoster = document.getElementById('movie-poster'); + +searchButton.addEventListener('click', () => { + // Fetch movie data from an API or your database and update the DOM elements accordingly. + // For example, you can use the OMDB API for this purpose. + const apiKey = 'adff2bf8'; + const query = searchInput.value; + + // Make an API request to get movie data + fetch(`https://www.omdbapi.com/?t=${query}&apikey=${apiKey}`) + .then(response => response.json()) + .then(data => { + movieTitle.textContent = data.Title; + movieGenre.textContent = data.Genre; + movieCast.textContent = data.Actors; + movieRating.textContent = data.imdbRating; + movieReleased.textContent = data.Released; + movieDirector.textContent = data.Director; + moviePoster.src = data.Poster; + }) + .catch(error => { + console.error('Error fetching data: ', error); + }); +});