├── README.md ├── index.html ├── index.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # MOVIE_SEARCH_APP-using-html-css-js -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | rizMovie 8 | 9 | 10 | 11 | 24 |
25 |
26 |
27 |

Search Movie Details Here

28 | 29 |
30 |
31 |
32 | 33 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const searchForm = document.querySelector('form'); 4 | const movieContainer = document.querySelector('.movie-container'); 5 | const inputBox = document.querySelector('.inputBox'); 6 | 7 | const getMovieInfo = async (movie) => { 8 | try { 9 | 10 | 11 | const myApiKey = "d0ec8f04"; 12 | const url = `http://www.omdbapi.com/?apikey=${myApiKey}&t=${movie}`; 13 | const response = await fetch(url); 14 | const data = await response.json(); 15 | showMovieData(data); 16 | } catch (error) { 17 | movieContainer.innerHTML = `

No Movie Foundhjh

`; 18 | } 19 | }; 20 | 21 | const showMovieData = (data) => { 22 | movieContainer.innerHTML = ""; 23 | movieContainer.classList.remove('noBackground'); 24 | 25 | const { Title, imdbRating, Genre, Released, Runtime, Actors, Plot, Poster } = data; // Corrected the variable name to imdbRating 26 | const movieElement = document.createElement('div'); 27 | movieElement.classList.add('movie-info'); 28 | movieElement.innerHTML = `

${Title}

29 |

Rating: ⭐${imdbRating}

30 | `; 31 | 32 | const movieGenreElement = document.createElement('div'); 33 | movieGenreElement.classList.add('movie-genre'); 34 | 35 | Genre.split(",").forEach(element => { 36 | const p = document.createElement('p'); 37 | p.innerText = element; 38 | movieGenreElement.appendChild(p); 39 | }); 40 | movieElement.appendChild(movieGenreElement); 41 | 42 | movieElement.innerHTML += `

Release Date:${Released}

43 |

Duration:${Runtime}

44 |

Cast:${Actors}

45 |

Plot:${Plot}

`; 46 | 47 | 48 | 49 | const moviePosterElement = document.createElement('div'); 50 | moviePosterElement.classList.add('movie-poster'); 51 | moviePosterElement.innerHTML = `` 52 | 53 | movieContainer.appendChild(moviePosterElement); 54 | 55 | 56 | movieContainer.appendChild(movieElement); 57 | }; 58 | 59 | searchForm.addEventListener('submit', async (e) => { // Added async keyword 60 | e.preventDefault(); 61 | const movieName = inputBox.value.trim(); 62 | if (movieName !== "") { 63 | await getMovieInfo(movieName); // Added await keyword 64 | } 65 | else { 66 | movieContainer.innerHTML = `

Enter Movie name to get information

`; 67 | movieContainer.classList.add('noBackground'); 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Verdana, Geneva, Tahoma, sans-serif; 6 | 7 | } 8 | 9 | body { 10 | background-color: #f5f5f5; 11 | 12 | } 13 | 14 | nav { 15 | background-color: #232f3e; 16 | color: #fff; 17 | } 18 | 19 | .navbar { 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | max-width: 1200px; 24 | margin: 0 auto; 25 | padding: 18px; 26 | } 27 | 28 | .search-container input, 29 | button { 30 | padding: 5px 10px; 31 | font-size: 16px; 32 | border: none; 33 | } 34 | 35 | .search-container input { 36 | border-radius: 3px 0 0 3px; 37 | } 38 | 39 | .search-container button { 40 | border-radius: 0 3px 3px 0; 41 | cursor: pointer; 42 | background: #f5c518; 43 | transition: all 0.2s; 44 | } 45 | 46 | .search-container button:hover { 47 | background: #ffdd45; 48 | } 49 | 50 | main { 51 | max-width: 1200px; 52 | margin: 0 auto; 53 | margin-block: 38px; 54 | } 55 | 56 | main section { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | min-height: 78vh; 61 | } 62 | 63 | .movie-container { 64 | display: flex; 65 | background: #fff; 66 | box-shadow: 0px 0px 10px #ccc; 67 | border-radius: 5px; 68 | width: 80%; 69 | justify-content: center; 70 | } 71 | 72 | .movie-container .noBackground { 73 | background: none; 74 | box-shadow: none; 75 | align-items: center; 76 | } 77 | 78 | .movie-poster img { 79 | height: 450px; 80 | margin-right: 30px; 81 | border-radius: 5px 0 0 5px; 82 | } 83 | 84 | .movie-info { 85 | padding-inline: 15px; 86 | } 87 | 88 | .movie-info h2 { 89 | text-align: center; 90 | font-size: 32px; 91 | margin: 20px 0 12px 0; 92 | } 93 | 94 | .movie-info h2+p { 95 | text-align: center; 96 | } 97 | 98 | .movie-info .movie-genre p { 99 | background-color: #232f3e; 100 | color: #fff; 101 | padding: 5px 14px; 102 | margin-inline: 5px; 103 | border: 2px solid #0000; 104 | font-weight: 700; 105 | border-radius: 6px; 106 | } 107 | 108 | .movie-info .movie-genre { 109 | display: flex; 110 | justify-content: center; 111 | margin-block: 5px; 112 | overflow-x: auto; 113 | } 114 | 115 | .movie-info p { 116 | font-size: 18px; 117 | margin-block: 16px; 118 | line-height: 24px; 119 | } 120 | 121 | footer { 122 | text-align: center; 123 | background: #232f3e; 124 | color: #fff; 125 | padding-block: 20px; 126 | font-size: 20px; 127 | 128 | } 129 | 130 | @media screen and (max-width:950px) { 131 | .movie-container { 132 | flex-direction: column; 133 | } 134 | 135 | .movie-poster img { 136 | width: 100%; 137 | height: fit-content; 138 | margin-right: 0; 139 | } 140 | 141 | .movie-info { 142 | padding-inline: 30px; 143 | } 144 | 145 | } 146 | 147 | @media screen and (max-width:630px) { 148 | .navbar { 149 | flex-direction: column; 150 | justify-content: center; 151 | align-items: center; 152 | } 153 | 154 | .search-container { 155 | margin-top: 12px; 156 | } 157 | } --------------------------------------------------------------------------------