JavaScript Without the Pain

💡 What JavaScript Is For

HTML = structure. CSS = style. JavaScript = behavior. It's the code that runs when you click a button, submit a form, or see a notification pop up. If the page does something in response to what you do — that's JavaScript.

// Find a button and watch for clicks
document.getElementById('myButton').addEventListener('click', function() {
  // This runs when the button is clicked
  alert('You clicked it!');
});

🖱 Click Events: Make Things Do Stuff

An "event" is anything the user does — click, type, hover, scroll. JavaScript can listen for any event and run code when it happens. The most common: click.

<!-- HTML -->
<button id="scoreBtn">Add Point</button>
<p id="score">Score: 0</p>

/* JavaScript */
let count = 0;

document.getElementById('scoreBtn').addEventListener('click', function() {
  count = count + 1;
  document.getElementById('score').textContent = 'Score: ' + count;
});

🔄 Show and Hide Content

One of the most common things JavaScript does: showing or hiding parts of a page based on what you click. This is the foundation of tabs, accordions, modals, and menus.

// Show/hide a section when button is clicked
document.getElementById('toggleBtn').addEventListener('click', function() {
  const section = document.getElementById('hiddenSection');

  if (section.style.display === 'none') {
    section.style.display = 'block';  // show it
  } else {
    section.style.display = 'none';   // hide it
  }
});

🐛 Debugging with Claude

Code breaks. Always. The skill isn't avoiding errors — it's knowing how to find and fix them fast. Your two debugging tools: the browser Console and Claude.

Interactive Quiz Page