Now Showing is a simple responsive web application that presents a user-friendly interface for browsing movie listings, sourced from the YTS API.
It features an engaging design with movie cards that display images, titles, genres, and ratings. The site comes with navigation controls, including pagination buttons, to effortlessly browse through different pages of movies.
A loading animation ensures a smooth user experience while movie data is being fetched. Adding to its usability, the site is styled for various screen sizes, providing an accessible and visually appealing platform for movie enthusiasts to discover new films.
Here is the link to the live demo of this app:
https://serene-choux-3c9353.netlify.app
└── now-showing/
├── index.html
├── script.js
└── style.css
| File | Summary |
|---|---|
| index.html | The index.html establishes the structure for a webpage titled Now Showing with responsive design features that include a loading animation (loader-container), pagination controls (pagination), and content areas for movies and images (container). It references external styling (style.css) and font resources, and defers loading of a JavaScript file (script.js). |
| script.js | The JavaScript code manages the presentation of a paginated movie listing using data from the YTS API. It renders movies and pagination controls on a web page and handles user interactions with these controls:1. It fetches movie data for a given page and displays a loading screen until the data is loaded.2. Movies are displayed in cards with an image, title, genre, and rating.3. Pagination controls with buttons for navigation (e.g., previous, next, first, last) are rendered for easy page switching.4. An event listener responds to button clicks, updating the movie display and active pagination button.The code also handles errors such as failed data fetching and initializes the interface upon page load. |
| style.css | The style.css file provides styling for a responsive movie display web application featuring a grid of movie cards. It globally removes margins and padding and sets border-box model. The HTML root size is scaled down for responsive font sizing. The body has a system font with a light background and full viewport height. Flexbox is used for layout structure with responsive grid displaying movie cards, which reveal ratings on hover and apply a blur effect to the images. Additionally, there are styles for a loading animation, which uses CSS masks and keyframes, and a pagination system with buttons that change color to indicate the current page. The media query optimizes the grid layout for wider screens. |
Dependencies
Please ensure you have the following dependencies installed on your system:
- ℹ️ Dependency: live-server
- Clone the now-showing repository:
git clone https://github.com/jasper-th-wang/now-showing- Change to the project directory:
cd now-showinglive-server .