Learn JavaScript

Interactive lessons for beginners. Code, quiz, and play.

7 Sections 7 Quizzes 1 Mini-game
Start Learning →

1. Click Events

Respond to user clicks with addEventListener.

const btn = document.querySelector('.demo-btn');
btn.addEventListener('click', () => {
  alert('You clicked!');
});

2. Variables

Store and reuse values with let, const, and var.

const name = 'Learner';
let count = 0;
count += 1;
console.log(name, count);

3. DOM Manipulation

Change the page with querySelector, textContent, and classList.

const el = document.querySelector('#dom-demo-box');
el.textContent = 'Updated!';
el.classList.add('pulse');
Click Run to change me

4. User Input

Read values from inputs and show them on the page.

const input = document.querySelector('#input-demo');
const value = input.value;
document.querySelector('#input-result').textContent = value;

Output:

—

5. Conditions

Branch your code with if, else if, and else.

const age = 16;
if (age >= 18) {
  result = 'Adult';
} else if (age >= 13) {
  result = 'Teen';
} else {
  result = 'Child';
}

6. Loops

Repeat actions with for and while loops.

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum += i;
}
console.log(sum); // 15

7. Mini-game

Practice what you learned: click the target before time runs out!

Score: 0 Time: 10s