Info

Demo 4.18

Exercise: type specimen

Files in this demo

├─ index.html
├─ style.css
└─ script.js

Build an interactive type specimen using everything we learned today! Most of the code is already set up for you. Look for the TODO comments in script.js and fill them in.

1Target the elements. Use document.querySelector() to target the rest of the buttons. Some are done for you.
2Finish the functions. Fill in changeFont(), changeSize(), invert(), and flash(). Notice which functions take arguments and which don’t.
3Hook up the buttons. Use addEventListener() to run a function when each button is clicked. Pick your own word and sentence for the text buttons.
4Add some timing. Use setTimeout() to change the title after 3 seconds, and setInterval() to run flash() every second.
5Make it yours. Style the page however you want and add more buttons!

Use the console to check your work. If something isn’t working, look for red error messages.

Bonus challenges:

Import a custom font from Google Fonts and add a button for it.
Add a button that changes the specimen’s color using a new function with a color argument.
Stop the specimen from shrinking below 10px using an if statement.

You finished this book!Start another book

Keyboard Shortcuts

⌘ Z / ⌘ ⇧ ZCtrl Z / Ctrl ⇧ Z Undo / redo

Tab / ⇧ TabTab / ⇧ Tab Indent / unindent selection

⌘ ] / ⌘ [Ctrl ] / Ctrl [ Indent / unindent lines

⌘ ACtrl A Select all

⌘ DCtrl D Select next occurrence of selection

⌥ ClickAlt Click Add another cursor

⌘ /Ctrl / Comment / uncomment lines

Ctrl SpaceCtrl Space Autocomplete

Ctrl EnterCtrl Enter Reset layout

⌘ ⌥ [ / ⌘ ⌥ ]Ctrl ⇧ [ / Ctrl ⇧ ] Fold / unfold block

Code

The editor didn't load — try refreshing the page. Navigation,
shortcuts and the info panel still work in the meantime.
Settings
View

Font size

14

Code

Preview

Delay

150ms

Zoom

Share

Reset

Preview

Dimensions0 × 0

Delay

Console

›

// ——————————————————————
// TARGETING ELEMENTS
// ——————————————————————

// These are targeted outside of any function,
// so every function below can use them
let body = document.querySelector("body");
let title = document.querySelector("#title");
let specimen = document.querySelector("#specimen");
let fontLabel = document.querySelector("#fontLabel");
let sizeLabel = document.querySelector("#sizeLabel");

// Text buttons
let textBtn1 = document.querySelector(".text-1");
// TODO: target .text-2 and .text-3

// Font buttons
let serifBtn = document.querySelector(".serif");
// TODO: target .sans-serif, .monospace, and .cursive

// Size buttons
// TODO: target .smaller and .bigger

// Color buttons
// TODO: target .invert

// ——————————————————————
// VARIABLES
// ——————————————————————

// The current font size (a number, not a string!)
let fontSize = 100;

// ——————————————————————
// FUNCTIONS
// ——————————————————————

// Change the specimen to whatever text we pass in
function changeText(newText) {
	specimen.textContent = newText;
}

// Change the specimen’s font family and show its name in fontLabel
function changeFont(fontFamily) {
	// TODO
	
}

// Make the specimen bigger or smaller by some amount
// Positive numbers make it bigger, negative numbers make it smaller
function changeSize(amount) {
	fontSize = fontSize + amount;
	// TODO: set the specimen’s font size (don’t forget the "px"!)
	
	// TODO: show the new size in sizeLabel
	
}

// Swap the text and background colors
function invert() {
	// TODO: toggle the "inverted" class on the body
	
}

// Make the title flash
function flash() {
	// TODO: toggle the "flash" class on the title
	
}

// ——————————————————————
// EVENTS
// ——————————————————————

// Text buttons
textBtn1.addEventListener('click', function() {
	changeText("Aa");
});
// TODO: hook up textBtn2 and textBtn3 with your own text

// Font buttons
serifBtn.addEventListener('click', function() {
	changeFont("serif");
});
// TODO: hook up the other font buttons

// Size buttons
// TODO: smaller should shrink by 10, bigger should grow by 10

// Color buttons
// TODO: invert() doesn’t take an argument, so does it need the extra function?

// ——————————————————————
// TIMING
// ——————————————————————

// TODO: after 3 seconds, change the title’s text to something new

// TODO: run flash() every second