Debugging Challenge B

What you'll learn

In this debugging challenge, you will:

• Master array methods like push(), pop(), and forEach()
• Create interactive elements with DOM manipulation
• Work with JavaScript objects and modify their properties
• Handle mouse and click events to create dynamic user experiences
• Debug and troubleshoot common JavaScript issues

💻 Getting Started (5 minutes)

Download your material

1. Open StackBlitz and access the template: Debugging Challenge B
2. Alternative option: Download the source code template from Stackblitz using the Download Project button if you prefer using your own IDE

⚠️ Important: Before You Start DO NOT DELETE any existing files in the template:

• Package files
• Configuration files
• Any files you didn't create

ONLY EDIT the necessary JavaScript and HTML files for each challenge.

Steps to Complete Your Debugging Challenges

💻 Challenge One: Array Operations and Interactive Drink Menu (15 minutes)

Setup

1. Open the debugging-challenge-questions folder in your StackBlitz template
2. Navigate to the Challenge-1-Drink Menu folder
3. Open the script.js file for editing

Part A: Create Your Drinks Array

1. Declare an array variable called drinks with 5 drink elements
2. Log the array to the console using console.log()

Expected output in browser console (F12):

Assuming the drinks are Coffee, Tea, Milo, Horlicks, and Apple Juice.

Part B: Array Methods Practice

1. Use pop() to remove the last element from drinks array
2. Log the modified array to the console
3. Use push("Matcha") to add a new drink to the array
4. Log the updated array to the console

Expected output:

💡 Helpful Hint Remember that pop() removes AND returns the last element, while push() adds elements to the end of the array.

Part C: Using forEach Method

Use the forEach() method to log each drink element individually to the console.

Expected output:

💡 Reference Check the cheatsheet for forEach() method examples if you need help with the syntax!

Part D: Create an Interactive Button

1. Create the change function in script.js:

   • Declare a function called change
   • Inside the function:
     • Create drinkIndex variable using prompt("Which drink do you want to replace?")
     • Create newDrink variable using prompt("What is the new drink?")
     • Update the drinks array at the specified index: drinks[drinkIndex] = newDrink
     • Log the updated array to the console

2. Add the button to index.html:

<button class="btn btn-primary" onclick="change()">CHANGE</button>

Expected result:

When clicking the button:

Example: Replacing drink at index 3 with Mineral Water

Console output after change:

💻 Challenge 2: DOM Manipulation - Adding, Removing, and Styling Elements (15 minutes)

Setup

1. Navigate to the debugging-challenge-questions folder
2. Open the Challenge-2-DOM Manipulation folder
3. Review the existing HTML structure (unordered list with Elephant, Tiger, and Lion)

Part A: Add a New List Item

1. Select the unordered list: const ul = document.querySelector("ul")
2. Create a new list item: const newli = document.createElement("li")
3. Set the text content: newli.textContent = "Giraffe"
4. Append to the list: ul.appendChild(newli)

Expected result:

Part B: Remove an Element

1. Select the heading: const h2 = document.querySelector("#heading2")
2. Remove it from the page: h2.remove()

Expected result:

💡 Common Mistake Make sure the element exists before trying to remove it! Check that your selector is correct.

Part C: Style Elements with Classes

1. Select the element: const style = document.querySelector("#style")
2. Add Bootstrap classes:
   • style.classList.add("bg-warning")
   • style.classList.add("m-5")

Expected result:

💻 Challenge 3: Object Properties and Value Modification (10 minutes)

Setup

1. Navigate to the debugging-challenge-questions folder
2. Open the Challenge-3-Profile Object folder
3. Open the script.js file for editing

Part A: Create a Profile Object

1. Create an object called profile with these 4 properties:
   • name (string)
   • gender (string)
   • age (number)
   • school (string)
2. Log the profile object to the console

Example code structure:

const profile = {
  name: "Maya",
  gender: "Female",
  age: 14,
  school: "Telebort"
};
console.log(profile);

Expected console output:

Part B: Modify Property Values

1. Change the school property to an array containing multiple schools
2. Log the updated profile object

Example:

profile.school = ["ABC Primary School", "XYZ Secondary School", "Telebort"];
console.log(profile);

Expected console output:

💡 Helpful Hint You can modify object properties after creation using dot notation (object.property) or bracket notation (object['property']).

💻 Challenge 4: Event Handling - Mouse Events and Click Events (15 minutes)

Setup

1. Navigate to the debugging-challenge-questions folder
2. Open the Challenge-4-Button folder
3. Prepare to edit both index.html and script.js files

Part A: Create the Button

Add this button element to your index.html file:

<button class="btn btn-light">Click me</button>

Part B: Add Hover Effects

1. Select the button element:

   javascript

   const button = document.querySelector('button');
   

2. Add mouseover event listener:

   javascript

   button.addEventListener('mouseover', () => {
     button.classList.replace('btn-light', 'btn-warning');
   });
   

3. Add mouseout event listener:

   javascript

   button.addEventListener('mouseout', () => {
     button.classList.replace('btn-warning', 'btn-light');
   });
   

Expected result:

💡 Key Concepts

• addEventListener() attaches event handlers to elements
• Arrow functions () => {} provide a concise way to write functions
• classList.replace() swaps one class for another

Part C: Advanced - Add Click Event

Add a click event that shows an alert:

button.addEventListener('click', () => {
  alert('I love Telebort!');
});

Expected result when clicking:

💡 Debugging Help If your events aren't working:

1. Check that your button selector is correct
2. Ensure your script is loaded after the HTML elements
3. Open the browser console (F12) to check for errors

✅ Required Elements Checklist

Before submitting, ensure your project includes:

Challenge One: Array Operations

• Array with 5 drink elements
• push() and pop() methods working correctly
• forEach() method logging each element
• Interactive button with prompts
• Array modification functionality

Challenge 2: DOM Manipulation

• New list item added using createElement() and appendChild()
• Element removed using remove() method
• Bootstrap classes added using classList
• All DOM selections working correctly

Challenge 3: Objects

• Profile object with 4 properties
• Property modification (changing school to array)
• Console logging showing both states

Challenge 4: Events

• Button with hover effects (mouseover/mouseout)
• Class switching functionality
• (Advanced) Click event with alert

🎯 Project Submission

⚠️ Important: Test Before Submitting! Before submission, test ALL functionality:

• Open browser console (F12) to check for errors
• Test all buttons and interactions
• Verify console outputs match expected results
• Ensure all 4 challenges are complete

Ready to submit? Use the form below:

Submit Your Projects Here

🔧 Troubleshooting Common Issues

Console Not Showing Output?

• Press F12 to open developer tools
• Click on the "Console" tab
• Refresh the page and run your code again

Button Not Working?

• Check that your script is linked correctly in HTML
• Ensure the function name matches exactly (case-sensitive)
• Verify the button has the correct onclick attribute

DOM Selection Returning Null?

• Make sure the element exists in your HTML
• Check that your selector syntax is correct
• Ensure your script runs after the page loads

Array Index Issues?

• Remember: array indices start at 0
• Check that the index exists before accessing it
• Use console.log(drinks.length) to see array size

💡 Need Help? If you're stuck on any challenge, try:

1. Reading the error messages in the console
2. Adding console.log() statements to debug
3. Reviewing the lesson materials
4. Asking for help in the discussion forum