Devlog : “My Perfect Day: Movies”

Project Overview

My Perfect Day: Movies is an interactive web page that shows my favorite movies across four genres: Marvel, Classics, Dystopian, and Animated that i would recommend to others so they can have a perfect day.

It is a clean, modern UI that feels smooth and easy to navigate, IIt has interactive posters and movie detail cards!

Key Features

Glass Header: Styled using CSS backdrop-filter to create a glassy effect.
Scrolling Posters: Each genre has scrollbars for easy browsing.
Hover Overlays: Poster titles show up whenever you hover over a movie.
Interactive Summary Cards: Clicking on any poster toggles an info card directly beneath the row to display a quick summary of the movie.

Languages Used

HTML5: Semantic structure and container layouts.
CSS3: Flexbox, glassmorphism filters, transitions, and custom scrollbar styling.
JavaScript (Vanilla): Event listeners and DOM class toggling.

Bug Fixes

Poster Clicks Not Registering
The overlay title box sat on top of the image element, due to which it would capture the mouse clicks instead of the poster.
Solution: Added “pointer-events: none;” to the title class in CSS so clicks pass straight through to the image.