Movie Search App is a small web application that lets users search for movies using the OMDb API, view details in a modal, paginate through results, and save favorite movies to localStorage. The UI is responsive and designed for quick lookups and lightweight browsing.
- Search movies by title (powered by the OMDb API).
- Keyboard support: press Enter to search.
- Paginated results with Previous / Next controls.
- Responsive grid layout for movie cards.
- Movie detail modal with poster, genre, director, actors, rating, and plot.
- Add movies to Favorites (stored in
localStorage). - Scroll-to-top button.
- HTML5
- CSS3 (Google Font: Poppins)
- Vanilla JavaScript (ES6)
- OMDb API (https://www.omdbapi.com/)
- Install Visual Studio Code from here https://code.visualstudio.com/.
- Open Visual Studio Code and Install the Live Server extension from the Extensions tab.
- Clone this repository to your local machine using the command: git clone https://github.com/msindelic/redi_final_project
- Open the cloned folder in Visual Studio Code
- Right-click on the index.html file and select "Open with Live Server".
- If you don't have Live Server Installed, just go to the extentions tab on the left side, look for it and Install
- Your default web browser will open and display the website.
- And that's it! You have successfully created and run The Movie Search App!!
- Replace the API key in
js/script.jswith your own OMDb API key:
const API_KEY = 'YOUR_OMDB_API_KEY';- Type a movie title into the search box and click Search or press Enter.
- Browse results in the grid. Click a movie card to open the details modal.
- Inside the modal, click Add to Favorites to save a movie to your browser's
localStorage. - Use the Previous and Next buttons to paginate through results. Each page shows up to 10 results from OMDb.
- Use the ⬆️ button to quickly scroll back to the top of the page.