diff --git a/MovieInfoApp/0kt1/README.md b/MovieInfoApp/0kt1/README.md new file mode 100644 index 000000000..c66c91521 --- /dev/null +++ b/MovieInfoApp/0kt1/README.md @@ -0,0 +1,25 @@ +# Movie Details Website + +A simple JavaScript web application to search for and display movie details. + + +## Features + +- Enter a movie name and get details about the movie. +- Uses the OMDB API to fetch movie data. +- Responsive and user-friendly design. + + +## Images + + +- [Screenshots](images/Screenshot1.png) +- [Screenshots](images/Screenshot2.png) +- [Screenshots](images/Screenshot3.png) +- [Screenshots](images/Screenshot4.png) + + + + + + diff --git a/MovieInfoApp/0kt1/images/Screenshot1.png b/MovieInfoApp/0kt1/images/Screenshot1.png new file mode 100644 index 000000000..d50842dc9 Binary files /dev/null and b/MovieInfoApp/0kt1/images/Screenshot1.png differ diff --git a/MovieInfoApp/0kt1/images/Screenshot2.png b/MovieInfoApp/0kt1/images/Screenshot2.png new file mode 100644 index 000000000..948dd0b1f Binary files /dev/null and b/MovieInfoApp/0kt1/images/Screenshot2.png differ diff --git a/MovieInfoApp/0kt1/images/Screenshot3.png b/MovieInfoApp/0kt1/images/Screenshot3.png new file mode 100644 index 000000000..30f08bc72 Binary files /dev/null and b/MovieInfoApp/0kt1/images/Screenshot3.png differ diff --git a/MovieInfoApp/0kt1/images/Screenshot4.png b/MovieInfoApp/0kt1/images/Screenshot4.png new file mode 100644 index 000000000..b83438833 Binary files /dev/null and b/MovieInfoApp/0kt1/images/Screenshot4.png differ diff --git a/MovieInfoApp/0kt1/index.html b/MovieInfoApp/0kt1/index.html new file mode 100644 index 000000000..7f5dd7449 --- /dev/null +++ b/MovieInfoApp/0kt1/index.html @@ -0,0 +1,23 @@ + + + + + + + + Movie Details + + + +
+

Movie Details

+ + + +
+
+ +
+ + + diff --git a/MovieInfoApp/0kt1/script.js b/MovieInfoApp/0kt1/script.js new file mode 100644 index 000000000..138a66c49 --- /dev/null +++ b/MovieInfoApp/0kt1/script.js @@ -0,0 +1,43 @@ +const apiKey = '76d079f0'; // Get an API key from http://www.omdbapi.com/apikey.aspx + +const movieInput = document.getElementById('movieInput'); +const searchButton = document.getElementById('searchButton'); +const movieDetails = document.getElementById('movieDetails'); + +searchButton.addEventListener('click', () => { + const movieName = movieInput.value.trim(); + + if (movieName !== '') { + fetch(`http://www.omdbapi.com/?t=${movieName}&apikey=${apiKey}`) + .then((response) => response.json()) + .then((data) => { + if (data.Response === 'True') { + // Display movie details + movieDetails.innerHTML = ` +
+
+ ${data.Title} poster +
+
+

${data.Title}

+

Year:

${data.Year}


+

Director:

${data.Director}


+

Genre:

${data.Genre}


+

Actors:

${data.Actors}


+

PLot:

${data.Plot}


+
+
+ + + + `; + } else { + movieDetails.innerHTML = 'Movie not found.'; + } + }) + .catch((error) => { + console.error('Error fetching data:', error); + movieDetails.innerHTML = 'An error occurred while fetching data.'; + }); + } +}); diff --git a/MovieInfoApp/0kt1/style.css b/MovieInfoApp/0kt1/style.css new file mode 100644 index 000000000..2c0f6cb9d --- /dev/null +++ b/MovieInfoApp/0kt1/style.css @@ -0,0 +1,101 @@ +/* Reset some default styles */ +body, h1, p { + font-family: 'Poppins', Arial, sans-serif; + margin: 0; + padding: 0; +} + +h2{ + color:#ffffff; + font-family: 'Poppins', Arial, sans-serif; +} + +body { + /* font-family: Arial, sans-serif; */ + background-color: #000000; + font-family: 'Poppins', Arial, sans-serif; +} + +.container { + max-width: 600px; + margin: 0 auto; + padding: 20px; + background-color: #1aa0c9; + background-image: linear-gradient(to top left, rgb(1, 14, 19), rgb(30, 41, 163)); + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + font-size: 30px; + font-weight: 500; + margin-bottom: 20px; + color: #ffffff; +} + +p{ + color: #ffffff; +} + + +input[type="text"] { + font-family: 'Poppins', Arial, sans-serif; + width: 90%; + padding: 10px; + border: 1px solid #032b34; + border-radius: 24px; + font-size: 16px; + margin-bottom: 10px; + color: #ffffff; + background-color: #000000; +} + +button { + font-family: 'Poppins', Arial, sans-serif; + background-color: #1db512; + color: #000000; + border: none; + border-radius: 4px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +button:hover { + background-color: #000000; + color: #ffffff; +} + +#movieDetails { + margin-top: 20px; + margin: auto; + text-align: center; +} + +img { + max-width: 100%; + height: auto; + margin-top: 10px; + border-radius: 8px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); +} + +h4{ + color: #158631; +} + +.float-container { + border: 1px solid rgb(255, 255, 255); + margin: 1rem; + padding: 2rem 2rem; + text-align: center; +} + +.float-child { + display: inline-block; + /* border: 1px solid red; */ + padding: 1rem 1rem; + vertical-align: middle; + text-align: left; +} \ No newline at end of file