Weather Report- [Link]
Interactive weather app that returns an illustration of a landscape based on user input.
Showcases Front-end expertise and strong sense of aesthetics.
This project was created with vanilla JavaScript
A numeric temperature is displayed. This temperature can be in either Fahrenheit or Celsius degrees. Increase and Decrease Temperature
1.Button that increases the temperature by one degree on click
2.Button that decreases the temperature by one degree on click
3.Drop down menu that allows you to switch the icons on the weather display
4.Allows user to switch the title based on user input
Depending on what temperature it is, either:
- the temperature number changes color
- the background of the temperature changes color
| 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 appears on the page.
Changing landscapes should replace the existing landscape. There should only be one visible landscape at a time.
| Temperature (F) | Landscape |
|---|---|
| 80+ | "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂" |
| 70-79 | "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" |
| 60-69 | "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃" |
| 59 or below | "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" |
When a user selects an option from the dropdown element, the appropriate sky appears on the page.
S| Option | Sky |
| ------ | ----------------------------- |
| Sunny | "☁️ ☁️ ☁️ ☀️ ☁️ ☁️" |
| Cloudy | "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️" |
| Rainy | "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧" |
| Snowy | "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨" |