🎬 Assignment: Bringing Web Pages to Life with CSS & JavaScript

In this assignment, you’ll create a visually dynamic and interactive experience by combining the beauty of CSS3 animations with the logic and power of JavaScript functions. By the end, you’ll have a mini interactive experience that not only looks good—but feels responsive and alive! 🎨✨ Part 1: CSS3 Transitions and Animations for Dynamic Styling Effects

Start by enhancing elements on your page using CSS transitions and keyframe animations. You can animate things like:

Button hover effects
Smooth fades, slides, or transforms
Continuous or triggered animations using @keyframes

Goal: Create a page that visually responds to user interaction and/or time-based triggers using only CSS. 📚✨ Part 2: JavaScript Functions — Scope, Parameters & Return Values

Now it’s time to dive deeper into how functions actually work. In this section:

Write several custom functions that take in parameters and return useful values
Demonstrate understanding of local vs global scope
Show how functions can be reused to control animation, trigger DOM changes, or calculate values

Goal: Show functional thinking by building small, reusable pieces of logic that clearly use parameters, return values, and demonstrate scope awareness. 🎨🎬 Part 3: Combining CSS Animations with JavaScript

Here’s the real magic—combine the two worlds!

Use JavaScript to trigger CSS animations dynamically. Think along the lines of:

A button that animates a box when clicked
A card flip animation on hover or click
A loading animation that starts/stops based on user input
A popup/modal that slides in and fades out based on events

Goal: Use JavaScript to add/remove classes or modify styles dynamically to trigger CSS animations. Bonus if you make it reusable with functions! Deliverables

Submit a project folder that includes:

index.html — Your structured content
styles.css — All your transitions and keyframe animations
script.js — Your functional logic demonstrating scope, parameters, return values, and animation triggers

Each part of the assignment should be clearly labeled and commented to show your understanding. Outcome

You’ll be evaluated on:

Use of CSS transitions and animations to enhance UI
Quality and clarity of JavaScript functions (with parameters and return values)
Effective integration of CSS and JS for interactive effects
Code readability, modularity, and documentation
Creativity and user experience