script.js

console.log("JS: Loaded")
// STARTER CODE - Students write their JavaScript here

// STEP 1: Select DOM Elements
// TODO: Use document.getElementById() to select the counter display and all three buttons
// Store them in variables with descriptive names

// STEP 2: Create a Counter Variable
// TODO: Create a variable to store the current count, starting at 0
// TODO: Update the display to show the starting value

// STEP 3: Increment the Counter
// TODO: Write a function called incrementCounter that adds 1 to count and updates the display
// TODO: Add an event listener to the increment button

// STEP 4: Decrement the Counter with a Limit
// TODO: Write a function called decrementCounter that subtracts 1 from count (but not below 0) and updates the display
// TODO: Add an event listener to the decrement button

// STEP 5: Reset the Counter
// TODO: Write a function called resetCounter that sets count back to 0 and updates the display
// TODO: Add an event listener to the reset button

// STEP 6 (Optional): Add a Visual Threshold Effect
// TODO: Inside your increment/decrement functions, change the display's appearance when count >= 10
// HINT: You can add/remove the 'high-value' class that's already defined in the CSS