jrcharney/the-weather-dashboard

Homework Challenge 6 and Weather Project

⛈️ The Weather Dashboard ⛈️

Network Decay? What Network Decay?

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.

User Story

AS A traveler
I WANT to see the weather outlook for multiple cities
SO THAT I can plan a trip accordingly

Acceptable Criteria

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

TODO List

• 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.
• Display the current conditions of the city searched
  • Unless localStorage still holds on to that info.
• 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!
• 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

Some extras

Dewpoint is calculated (sort of)

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.

$$ \begin{aligned} \gamma(T,RH) &= \ln\left(\frac{RH}{100}\right) + \frac{\beta \cdot T}{\lambda + T} \\ T_{dp} &= \frac{\lambda \cdot \gamma(T,RH)}{\beta - \gamma(T,RH)} \end{aligned} $$

• $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 $\alpha$ (in hectopascals (hPa) or millibars (mbar)). I'll need to look into that later.

CSS Grid!

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.

Disclaimer

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

• The Weather Channel

• 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.

• Weather Underground

• The National Oceanic and Atmospheric Administration (NOAA)

  • The United States National Weather Service (NWS)
  • The National Centers for Environmental Prediction (NCEP)
    • The Climate Prediction Center (CPC)
    • The National Hurricane Center (NHC)
    • The Storm Prediction Center (SPC)
    • The Weather Prediction Center (WPC)
    • The Ocean Prediction Center (OPC)
    • The Space Weather Prediction Center (SWPC)
    • The Aviation Weather Center (AWC)
  • The National Severe Storms Laboratory (NSSL)
  • The National Tsunami Warning Center (NTWC)
  • NOAA Center for Operational Oceanographic Products and Services
    • Tides and Currents
      • Tide Predictions
  • NOAA Center for Satellite Applications and Research (STAR)
    • Geostationary Operational Environmental Satellite (GOES)

• The National Aeronautics and Space Administration (NASA)

  • Global Hydrometeorology Resource Center (GHRC) Distributed Active Archive Center (DAAC)
    • GHRC DAAC Github
  • George C. Marshall Space Flight Center
    • Marshall Space Flight Center - Earth Science Office
      • More GOES images

• 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)

• The Federal Emergency Management Agency (FEMA)

  • FEMA Flood Map Service Center

• National Geospatial-Intelligence Agency (NGA)

  • NGA Office of Geomatics

• United States Naval Observatory (USNO)

  • USNO Astronomical Applications Department
    • Astronomical Applications API - Sunrise, Sunset, Eclipses and Transits, Moon Phases

• National Institute of Standards and Technology (NIST)

  • Time.gov

• The estate of Charles Abel-Lear a.k.a. The Weather Chazz (R.I.P., friend)

• TWCClassics.com

• Taiganet.com

• Blitzortung.org

• Windy.com

• NullSchool

• Michael Battaglia

  • Michael Battaglia's WeatherStar 4000+

• Matt Walsh

  • 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)

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!