"Movie Watchlist" is a solo project aimed at practicing RESTful API implementation. It is a movie watchlist app built using vanilla JavaScript, HTML, and CSS.
You can view the live demo of the "Movie Watchlist" app here.
The "Movie Watchlist" project is part of Scrimba's Frontend Career Path. It consists of two main pages, index.html
and watchlist.html
. The index.html
page serves as the search page where users can search for movies using the Open Movie Database (OMDB) API with the title they enter, and it displays the search results. The watchlist.html
page displays the movies that the user has added to their watchlist, which are saved in the local storage of the browser.
The "Movie Watchlist" project has the following requirements:
-
Two Pages: The project must have two pages -
index.html
andwatchlist.html
. -
Search Page: The
index.html
page serves as the search page where users can search for movies using the OMDB API with the title they enter, and it displays the search results. -
Add to Watchlist: The
index.html
page must have a button that allows users to "add to watchlist", which saves the movie data to the local storage of the browser. -
Watchlist Page: The
watchlist.html
page loads and displays the movies that the user has added to their watchlist from the local storage of the browser.
The "Movie Watchlist" app is built using the following technologies:
- Vanilla JavaScript: For implementing the logic and functionality of the app.
- HTML: For structuring the web pages.
- CSS: For styling and layout.
The "Movie Watchlist" app includes the following features:
-
Movie Search: Users can search for movies by entering a movie title in the search field and clicking the "Search" button.
-
Search Results: The app displays search results, including movie title, year, and poster.
-
Add to Watchlist: Users can add movies from the search results to their watchlist by clicking the "Add to Watch
During the development of the "Movie Watchlist" project, the following skills and topics were acquired and researched:
-
REST API: Implementation of a RESTful API in JavaScript to fetch movie data from the OMDB API.
-
Web Storage API: Usage of the Web Storage API in JavaScript to store and retrieve movie data in the local storage of the browser.