Courses / Beginner

JavaScript & the DOM

Make web pages react: events, the DOM, fetch and async/await. You finish with a weather widget that talks to a real API.

9 lessons12 hours488k learnersCertificate with Pro

Start the free first lesson

Code you'll write

Arrays: map, filter, reducejavascript

const orders = [12.5, 80, 7.25, 43];

const big = orders.filter(total => total > 20);
const withTax = big.map(total => total * 1.19);
const sum = withTax.reduce((a, b) => a + b, 0);

console.log(sum.toFixed(2)); // "146.37"

Events and listenersjavascript

const button = document.querySelector("#like");
let likes = 0;

button.addEventListener("click", () => {
  likes += 1;
  button.textContent = `♥ ${likes}`;
});

async/awaitjavascript

async function forecast(city) {
  const res = await fetch(`/api/weather?city=${encodeURIComponent(city)}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

forecast("Lisbon").then(f => console.log(f.temperature));