Connect the Prepared Rain, Snow, and Night Effects
Connect the Prepared Rain, Snow, and Night Effects
Task
Use the theme classes to activate the animation layers already defined in CSS.
Open
Do not add animation JavaScript. Open style.css and verify the existing selectors body.theme-rain .rain-layer, body.theme-snow .snow-layer, and body.theme-night .stars.
Implementation
The JavaScript only needs to apply theme-rain, theme-snow, or theme-night. CSS then changes the layer opacity and supplies the animation. This separation keeps weather logic out of the presentation layer.
Test
Use DevTools to temporarily add theme-rain, theme-snow, and theme-night to <body> one at a time. Confirm the prepared effects appear. Remove the temporary class.
Expected result
The prepared weather effects are controlled by the same theme state as the main weather card.
Checkpoint
Before moving on, confirm the expected result in the running app and make sure the browser console has no blocking errors.