toy websites

This is a list of toy websites made for the Allen Scholars' Summer Bridge Program. Each toy website accomplishes one thing; they are reminiscent of early Web 1.0 pages. They also intentionally use the limited subset of HTML, CSS, and JavaScript taught in the first two weeks of the summer bridge class.

baking

Convert between different units of volume commonly used in baking.

Used in: Lesson ??. Worked example introducing <form>, <input>, and <select>.

Core skills & extensions (click to expand)
HTML & CSS skills
New: <form>, <input>, and <select> elements.
Review: general page structure, classes & IDs, box model, flexbox.
JS skills
New: getting value(s) from form elements, conditional statements.
Review: modifying the DOM, arithmetic and string operators, variables, Math.round(), writing functions with parameters and return values.
Math skills
New: integer division.
Potential extensions
Simple: add more units, user-specified rounding, don't pluralize unit when value is 1.
Advanced: let the user paste in a recipe and replace the units in the text (requires <textarea> and string search and replace).

colours

Generate a random colour and set it as the background colour for the page.

Used in: Lesson ??. Serves as starter code for the color contrast calculator.

Core skills & extensions (click to expand)
HTML & CSS skills
Review: general page structure, classes & IDs, box model, flexbox.
JS skills
New: Math.random(), Math.floor(), modulo.
Review: modifying the DOM, arithmetic and string operators, variables, calling functions, writing functions with parameters and return values.
Math skills
New: Generating random numbers, hexadecimal, manipulating intervals, remainders.
Potential extensions
Simple: add button to regenerate colour and/or copy hex code to clipboard.
Advanced: toggle between different colour spaces and/or formats (e.g. RGBA, HSL, LCH; see the CSS color data type)

dice

Rolls two dice until their faces sum to 7, and calculates some statistics along the way.

Used in: Lesson ??. Serves as starter code for drop dead dice.

Core skills & extensions (click to expand)
HTML & CSS skills
Review: general page structure, classes & IDs, box model, flexbox.
JS skills
coming soon :)
Math skills
coming soon :)
Potential extensions
coming soon :)

extra: brat

having some fun with the tools we've learned in this class, plus some extra little tricks. perhaps not the best example of good web development.

(confused? see Brat on Wikipedia and the NYT article "What Is Brat Green?")