Problem 1: Personal Information & Styling Beginner ~5 minutes
Goal: When someone clicks the heading below, replace "Your Name" with your actual name and apply custom styling.
Requirements:
- Change "Your Name" to your actual name
- Apply small caps text transformation
- Change color (not blue or black)
- Set font size to 200% of normal
Hint: Look at the existing .myName class in the CSS file!
Lab 6: Your Name
Problem 2: Text Animation Beginner ~7 minutes
Goal: Create smooth show/hide animations for the lorem ipsum text.
Requirements:
- "Hide Text" button: Make paragraphs vanish over 2 seconds
- "Show Text" button: Make paragraphs appear over 3.3 seconds
- "Toggle Text" button: Switch between show/hide
Methods to use: .hide(), .show(), .toggle()
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper metus sit amet velit ultrices quis congue nisl mollis. Proin nec orci eget nisl vehicula elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia dui sed diam tempor volutpat.
Nunc vel lectus a mi suscipit cursus vitae vel metus. Ut vitae mauris sed magna malesuada facilisis quis at urna. Fusce sit amet ullamcorper lectus. Proin interdum orci et est cursus consectetur convallis mauris placerat. Duis bibendum felis vel sapien auctor consequat.
Problem 3: Interactive List Items Intermediate ~8 minutes
Goal: Make list items change color when clicked.
Requirements:
- Click normal list item → turns red
- Click red list item → back to normal
- Use the existing
.redCSS class
Methods to use: .addClass(), .removeClass(), or
.toggleClass()
- List item 1 - Click me!
- List item 2 - Click me!
- List item 3 - Click me!
- List item 4 - Click me!
- List item 5 - Click me!
Problem 4: Dynamic Content Creation Intermediate ~6 minutes
Goal: Add new list items dynamically.
Requirements:
- When "Add List Item" is clicked, add a new item to the end of the list
- Each new item should have a unique number
- Include encouraging text like "New item X - Click me!"
Methods to use: .append() or .appendTo()
Problem 5: Event Delegation Challenge Advanced ~10 minutes
Goal: Make the red-toggle feature work on dynamically added list items.
The Challenge: After adding new list items in Problem 4, try clicking them. Do they turn red like the original items?
Requirements:
- Ensure ALL list items (original AND new) can toggle red color
- Research and implement event delegation
- Use
$(document).on()method
Think About: Why don't dynamically added elements respond to click events?
💡 Learning Moment
This problem demonstrates a key concept in dynamic web development. Events are only attached to elements that exist when the page loads. New elements added later don't automatically inherit these event handlers.
🏆 Bonus Challenges Advanced ~15 minutes
Challenge A: Form Interaction
Add functionality to the form below:
Challenge B: Image Gallery
Create a simple image switcher: