Homework Challenge 6, Due November 21.
I want to consider this homework assignment more than just a homework assignment as I found some things that are quite relatable. But those things will be added later. For now, let's just focus on the requirements for this project.
AS A traveler
I WANT to see the weather outlook for multiple cities
SO THAT I can plan a trip accordingly
GIVEN a weather dashboard with form inputs
WHEN I search for a city
THEN I am presented with current and future conditions for that city and that city is added to the search history
WHEN I view current weather conditions for that city
THEN I am presented with the city name, the date, an icon representation of weather conditions, the temperature, the humidity, and the the wind speed
WHEN I view future weather conditions for that city
THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, the wind speed, and the humidity
WHEN I click on a city in the search history
THEN I am again presented with current and future conditions for that city
- Create a text form that searches for weather by City
- TODO: What if there are cities with the same name in multiple locations? (e.g. how many states have a Springfield?)
- We could add a
<datalist>
element with auto-generated<options>
. But how would that work?- Not needed.
- We could add a
- TODO: What if there are cities with the same name in multiple locations? (e.g. how many states have a Springfield?)
- Display the current conditions of the city searched
- Unless
localStorage
still holds on to that info.
- Unless
- Display the five day forecast that shows that displays the date, an icon representation of weather conditions, the temperature, wind speed, and humidity.
- Not sure if it shows predicted humidity, but "percent of precipitation" ("POP") is more useful.
- There is a POP
- Also, see if we can download our own weather icons. (Might be some long-term plan. What would The Weather Chazz do?)
- Turns out we don't have to! We can borrow the ones recreated by Charles Abel-Lear (1980-2019) and Nick Smith on the TWCClassics website. And they have the fonts! Proper attribution will be provided!
- Not sure if it shows predicted humidity, but "percent of precipitation" ("POP") is more useful.
- Use
localStorage
to preserve a list of previous city searches that we can look up again. Clicking on those cities should show the current conditions and five day forecasts for those cities.- Turns out I used this to just store data.
- In faithfulness to the classic WeatherStar 4000 display of cities nationwide, the following cities should be displayed, and perhaps a weather icon and forecasted high and low temperatures.
- Atlanta
- Boston
- Chicago
- Cleveland
- Dallas
- Denver
- Detroit
- Houston
- Indianapolis
- Los Angeles
- Miami
- Minneapolis
- New York
- Norfolk
- Orlando
- Philadelphia
- Phoenix
- Pittsburgh
- St. Louis
- San Francisco
- Seattle
- Syracuse
- Tampa
- Washington DC
- Github Pages
- Screenshot
The Magus Formula is used to calculate the dewpoint temperature. Unfortunately, I must have a bad version of it because the coefficients don't seem to match. The formula is correct.
-
$T$ is the air temperature (converted to degrees Celsius) -
$RH$ is the relative humidity between 0% and 100% -
$T_{dp}$ is the dewpoint temperature (converted from degrees Celsius back to degrees Fahrenheit) -
$\lambda$ (sometimes denoted$c$ ) is a constant in degrees Celsius -
$\beta$ (sometimes denoted$b$ ) is a constant
There's supposed to be this other formula with a variable called
CSS Grid has made the latter part of this project easy!
In the 5 day forecast, the flow of the grid is from top-to-bottom instead of left-to-right!
Not bad for my first project using CSS Grid.
Note: I know the instructor probably want me to use Bootstrap for stylesheets on this project, however I seriously want to apply my own stylesheets here. It depends honestly. I want that 90s Weather Channel aesthetic.
NOTE: This disclaimer has morphed into a list of links worth checking out. So I guess it will double as that too.
The Weather Dashboard is NOT affiliated with the following entities
-
Landmark Communications
-
The Weather Company
-
IBM
-
Weather Group, LLC a.k.a. Weather Group Television, LLC
-
Allen Media Group a.k.a. Entertainment Studios, Inc.
-
The National Oceanic and Atmospheric Administration (NOAA)
- The United States National Weather Service (NWS)
- The National Centers for Environmental Prediction (NCEP)
- The National Severe Storms Laboratory (NSSL)
- The National Tsunami Warning Center (NTWC)
- NOAA Center for Operational Oceanographic Products and Services
- NOAA Center for Satellite Applications and Research (STAR)
-
The United States Geological Survey (USGS)
- The USGS Earthquake Hazards Program
- The USGS Volcano Hazards Program
- WaterWatch
- Earth Resources Observation and Science Center (EROS)
-
The United State Environmental Protection Agency (EPA)
-
The United States Department of Agriculture (USDA)
- The U.S. Forest Service (USFS)
- Wildland Fire Assessment System (WFAS)
-
United States Naval Observatory (USNO)
- USNO Astronomical Applications Department
- Astronomical Applications API - Sunrise, Sunset, Eclipses and Transits, Moon Phases
- USNO Astronomical Applications Department
-
The estate of Charles Abel-Lear a.k.a. The Weather Chazz (R.I.P., friend)
-
- Matt Walsh's WeatherStar 4000+
- Github - Aw, heck! This is almost everything I want my project to be, except for the use of Luxon (If I ever fork this, I'll use Day.js)
- Matt Walsh's WeatherStar 4000+
This project and web site should NOT be used in life threatening weather situations, or be relied on to inform the public of such situations. The Internet is an unreliable network subject to server and network outages and by nature is not suitable for such mission critical use. If you require such access to NWS data, please consider one of their subscription services. The authors of this web site shall not be held liable in the event of injury, death or property damage that occur as a result of disregarding this warning.
The WeatherSTAR 4000 unit and technology is owned by The Weather Channel. This project is is a free, non-profit work by fans. The icons were created by Charles Abel and Nick Smith (http://twcclassics.com/downloads/icons.html) as well as by Malek Masoud. The fonts were originally created by Nick Smith (http://twcclassics.com/downloads/fonts.html).
Learn how to set up Emergency Alerts on your phone. Visit https://www.weather.gov/wrn/ and be part of the Weather-Ready Nation!