The site has two pages:
- Search Page
- Watchlist Page
This page interacts with the The Open Movie Database API and displays all the search results
From this page a user can search for and select which movie to add to the watchlist
Contains all the movies the user added to the watchlist
This pages loads and displays data stored from the windows local storage
Used axe DevTools & Accessibility Insights for Web plugins to run accessibilty tests
Here is another great tool for checking Color Contrast Ratio
This line of code ensures that when the window loads, the renderWatchlist function will be invoked in both index.html & watchlist.html without throwing an error
window.onload = () => {
renderWatchList();
};The following conditional statement prevents a null error when switching from the Search/Home page to the Watchlist page
if (searchForm) {
// checking that the input element has a value or not
inputEl.addEventListener("input", () => {
inputEl.value
? document.getElementById("search-btn").removeAttribute("disabled")
: document.getElementById("search-btn").setAttribute("disabled", true);
});
// add submit event and fetch list of movies
searchForm.addEventListener("submit", (event) => {
event.preventDefault();
getMovies(inputEl.value);
inputEl.value = "";
});
}How to create a search icon inside input box with HTML and CSS
How to center an absolute positioned element vertically and horizontally with CSS
According to the initial Figma design and size of the background image, the maximum width of the container should be 700px
With the above design the pages are no longer responsive for screens below 37.625em