Console Playground

Getting Started

Open your browser's console and try these commands:

document.querySelector('h1')

document.querySelector('h1').textContent = 'Hello!'

document.querySelector('h1').style.color = 'red'

Press F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows) to open DevTools.

Things to Try

Find elements: document.querySelector('.color-box')
Change styles: document.querySelector('.color-box').style.borderRadius = '50%'
Find all buttons: document.querySelectorAll('button')
Count list items: document.querySelectorAll('li').length
Find the hidden message and make it visible

Interactive Elements

These elements are here for you to manipulate:

Counter: 0

You found the secret! Try: document.getElementById('secret').style.display = 'block'

Text Content

This paragraph is waiting for you to change it using the console.

Here's some text with a highlighted word inside.

Try: document.getElementById('editable-text').innerHTML = 'I changed this!'

Images to Inspect

Right-click these images and select "Inspect" to see their HTML:

Try: document.getElementById('img-1').src = 'https://picsum.photos/400/300?random=99'

Navigation List

Practice selecting specific items from a list:

Try: document.querySelector('.special').style.color = 'violet'

A Data List

Apple
Banana
Carrot
Date
Eggplant

Try: document.querySelectorAll('[data-category="fruit"]')

Guided Exercises

Type these in the console. Watch what happens.

Math

100 / 3

2 ** 8

(10 + 5) * 2

Strings

"JavaScript".length

"hello".toUpperCase()

"Hello World".includes("World")

Counting Things on This Page

document.querySelectorAll('a')

document.querySelectorAll('a').length

document.querySelectorAll('img').length

How many links are on this page? How many images?

Weird Stuff

document.body.style.fontFamily = "Georgia"

document.body.style.transform = "rotate(1deg)"

Refresh to undo.

Free Exploration

Now experiment on your own. Try to:

Change colors
Change text
Count different elements
Type something wrong and read the error

If you get an error, read it. We'll talk about errors on Day 2.

Resources

When you want to learn more:

MDN: querySelector The method we used to find elements MDN: Adding Interactivity Your first JavaScript tutorial Firefox DevTools Guide Official documentation