LG.
ITWS 1100 / Lab 06 Back to portfolio

jQuery · DOM · Event handling

Interaction
workshop.

Five progressive exercises exploring selectors, animation, dynamic content, event delegation, and browser-side feedback.

05 exercises Browser only Interactive

Lab Progress

1 Name & Styling ⏳
2 Text Animation ⏳
3 List Interaction ⏳
4 Dynamic Content ⏳
5 Event Delegation ⏳

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 .red CSS 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:

Current gallery selection

Challenge C: Accordion Menu

Lab 1

This foundational lab established our development environment. Key objectives included provisioning a web server with Azure, creating a GitHub repository for version control, and configuring a deployment workflow between our local machines and the live server.

Lab 2

This lab was an exercise in building a professional resume using core web technologies. The project emphasized the separation of concerns, with HTML used for semantic structure and CSS for visual styling. Key skills practiced include using headings, lists, and paragraphs to organize content, demonstrating the foundational principles of web design.

Lab 3

This lab involved the creation of a multi-page personal portfolio website from the ground up. The project served as a practical application of HTML for semantic structure and advanced CSS for styling. Key skills developed include creating a consistent layout, designing interactive UI elements with hover effects, and organizing a clean, reusable stylesheet.

Debug Console