A numeric temperature must be displayed. This temperature can be in either Fahrenheit or Celsius degrees.
There must be two clickable elements:
- An element that increases the temperature by one degree on click
- An element that decreases the temperature by one degree on click
Depending on what temperature it is, either:
- the temperature number changes color
- the background of the temperature changes color
There must be at least five categories of distinguishable colors.
Our solution uses the following ranges, which you may use if desired:
Temperature (F) | Color |
---|---|
80+ | Red |
70-79 | Orange |
60-69 | Yellow |
50-59 | Green |
49 or below | Teal |
Depending on what temperature it is, a different landscape should appear on the page.
These landscapes can be anything, as long as they are visual and noticeable to any instructors. For example, the landscapes can be:
- A single image that appears
- ASCII art
- Text
Changing landscapes should replace the existing landscape. There should only be one visible landscape at a time.
There must be at least four landscapes.
Our solution uses the following ranges, which you may use if desired:
Temperature (F) | Landscape |
---|---|
80+ | "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂" |
70-79 | "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" |
60-69 | "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃" |
59 or below | "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" |