This is a catalog of movies built consuming a free API. It is a personal project I coded using HTML, CSS and vanilla Javascript for practicing purposes.
Project design by Sabrina Stahelin on Figma.
Users can either search movies by name, using the search bar, or browse movie titles by several categories: IMDB top rated movies list and 7 movie genres. Movies' information provided are posters (when available) and, on mouse hover, movie titles and release years.
In all sections it is possible to navigate to following or previous page. When browsing in the categories listed and browsing search results, it is also possible to insert the page number wished.
Page responsiveness to multiple screen sizes was addressed to improve user's experience.
Other functionalities will be added in future versions.
- Live site URL: https://julianastahelin.github.io/juflix-movies-catalog/
- Sabrina Stahelin - designer: https://www.linkedin.com/in/sabrina-stahelin-0a8119180/
- Movies API: https://rapidapi.com/SAdrian/api/moviesdatabase/
- HTML 5;
- CSS 3;
- Vanilla Javascript.
- Consuming API - fetch;
- Multiple iterations on JS;
- Transitions and animations with CSS and JS;
- Adding a search input that generates a new fetch;
- Page responsiveness - CSS Media Queries and JS matchMedia();
- Changing HTML content with JS;
- Code refactoring;
- Reading documentation.