Code Lessons: My LED Sign

You have two web pages:

• index.html = the control page (buttons, drop-downs, graph).
• sign.html = the LED sign (the glowing menu sign and remote).

How to work (do this every time!)

1. Open the file in Notepad (right-click > Open with).
2. Change something. Press Ctrl+S to save.
3. Go to the browser. Press F5 to refresh.
4. Did it work? Yay! Did not? Press Ctrl+Z in Notepad to undo, and try again.

Finding things: press Ctrl+F in Notepad and type a word to jump to it.

Tip: you cannot break anything for good. If something goes wrong, download lesson.zip again (see Step 0) for a fresh copy.

Lesson 1: Three languages, three jobs

A web page is made with three things. Think of a person:

In your files:

• HTML is between <body> and <script>.
• CSS is between <style> and </style> (at the top).
• JavaScript is between <script> and </script> (at the bottom).

Try it

1. Open sign.html. Find <h1>LED Sign</h1>. Change LED Sign to My Sign! Save, refresh.
2. Open index.html. Find Indian Food. Change it to your favorite food.

What you learned: words between tags like <h1> and </h1> show on the page. The / means “stop”.

Lesson 2: Change a color (CSS)

Open sign.html. Search for --led. You will see:

--led:#2694A3;

That is the sign’s glow color. Colors can be written 2 ways:

• A name: red, gold, blue, purple, hotpink
• A code: # then 6 letters/numbers, like #FF0000 (red)

Try it

1. Change #2694A3 to red. Save. Refresh. The sign is red!
2. Try gold, lime, hotpink.
3. Now try the code #FFDB18. Only ONE #! (##FFDB18 does not work. The browser just ignores it and does not tell you.)

Color mixer: Search the web for “color picker” and copy the # code it gives you.

What you learned: CSS lines look like what: value; and end with a ;.

Lesson 3: Change the size and the font (CSS)

In sign.html, search for 3.2rem:

font:700 3.2rem "Courier New",monospace;

• 700 = how bold the letters are.
• 3.2rem = how big. Bigger number = bigger letters.
• "Courier New" = the font.

Try it

1. Change 3.2rem to 5rem. Save. Refresh. (Then try 1rem.)
2. Change "Courier New" to Impact, then Georgia, then "Comic Sans MS".
3. Change 700 to 400. What happens to the letters?

What you learned: one line of CSS can control size, boldness and font.

Lesson 4: Change what a button does (JavaScript)

Open sign.html. Search for faster. You will see:

$('faster').onclick = () => { speed = Math.max(4, speed - 2); show(); };

Read it like a sentence:

• $('faster') = find the button named faster.
• .onclick = when it is clicked…
• speed = speed - 2 = make the number smaller (faster scroll).
• show() = draw the sign again.

Try it

1. Change speed - 2 to speed - 5. Now the button is extra strong!
2. Near the top of the script find let power = true, speed = 14. Change 14 to 4. The sign starts super fast.
3. Find modes = ['scroll', 'static', 'flash']. Swap the order, like ['flash', 'scroll', 'static']. What does the Mode button do now?

What you learned: a variable (like speed) is a box that holds a number or a word. Buttons change it.

Lesson 5: Use the Editor (and see how it works)

On the sign page, click Editor. A box opens with text, font, color and size.

Try it

1. Type your name in the text box. It appears on the sign as you type.
2. Pick a font, pick a color, slide the size.
3. Click Reset. Everything goes back.

Now look at the code

Search for edColor in sign.html:

$('edColor').oninput = () => { document.documentElement.style.setProperty('--led', $('edColor').value); };

It changes the same --led color you edited in Lesson 2, but while the page is running! CSS is the paint. JavaScript is a hand painting it live.

Try it

1. Add a new font. In the HTML find the line with Arial,sans-serif. Copy the whole <option>...</option> line, paste it under itself, and change it to Verdana,sans-serif and the name to Verdana.
2. In edSize, change max="6" to max="10" for giant letters.

Lesson 6: Send the menu from page 1 to page 2

1. Open index.html in the browser.
2. Pick a Date and a Meal from the drop-downs.
3. Click send (the side panel at the bottom right).
4. The sign page opens showing that meal!

How? Look at the address bar on the sign page. After the ? it says date=...&meal=.... Page 1 writes a note in the address, and page 2 reads it.

Try it

1. On the sign page, use the < and > buttons to change meals.
2. Find Open the sign in index.html. Change those words to See my sign!.
3. Find the banner words (Indian Food) in index.html and change them.

Lesson 7: Menu data (a peek at where the food comes from)

Open Menu-Clean.csv (double-click; it opens in Excel). Each row is one food item: Date, Day, Meal, Category, Item.

The messy first file Menu-Items.csv had a grid that was hard for computers. Cleaning data means making it tidy: one fact per row.

Try it

1. In Menu-Clean.csv, find a food and change its name. Then open menu-data.js in Notepad, find the same food, and change it too. The sign page uses menu-data.js!
2. Refresh the sign. Did your new food name show up?

Words to know