2020.06.28: Add styling and Changed Weather API

  • A few more iterations. I can see how having designs up naturally speeds up the implementation part of the process. But part of the learning is also figuring out how to implement the designs.
  • Used RegEx to check for day and night time based on the icon suffixes rather than calculations whether each time period is within sunrise and sunset.
  • There's probably another layer of branding to the component that I would like to leave out until I style the other components.
  • It's interesting to see how the hight difference amplifies the temperature change for each hour. Using % instead of vh
  • Added a weather summary at the top. The component is still fixed to one location.
  • Using Postman to understand and traverse the API results
  • Learning not to ignore the warnings in the console, 'cause the build will fail.

2020.06.23: Time Stamps and Visualization

  • Added time stamps to each hour
  • Visualized the temperature for the day and the time of day.
  • Really wish the API had a "feels-like" temp number. I wonder how weather forecasters calculate it: a combination of humidity, wind, and UV index?
  • Using grid-auto-flow: column to display each item horizontally.
  • There's another iteration of visual polish. It's in a prototype phase, using elements to block out the structure of the app along with the functionality.
  • Spent some time leraning how to format date. The key is to take a string and convert it into a Date object first. Then you can have access to methods that will return a readable format.
  • I'm curious how you would limit the number of items you would map. Maybe limit the array before passing it to the .map() function?
  • Would be cool to add wind speed, prescipitation percentage, icons, and a more accurate day/night indicator.
  • Bonus is user indicated zip code

Notes

import React, { useState } from "react";
import "./Weather.css"

/*

nyc lat:  40.7128
nyc long: -74.006

"gridId": "OKX",
     "gridX": 32,
     "gridY": 34,
*/

function Weather() {
  const [weather, setWeather] = useState();

  function fetchWeather() {
    const weatherHourlyForecast =
      "https://api.weather.gov/gridpoints/OKX/32,34/forecast/hourly";

    fetch(weatherHourlyForecast)
      .then(initialResponse => initialResponse.json())
      .then(responseJSON => {
        console.log(responseJSON.properties.periods);
        setWeather(HourlyWeather(responseJSON.properties.periods));
      });
  }

  function HourlyWeather(props) {

    /* Formating Timestamp
    const timeStamp = new Date(props[0].startTime).getDate();
    console.log(timeStamp);
    console.log("Date:" + timeStamp.getDate() + " Hour: " + timeStamp.getHours())
    */

    const eachHour = props.map((hour) => (
      <WeatherRow
        id={hour.number}
        temperature={hour.temperature}
        time={new Date(hour.startTime).getHours()}
        daytime={hour.isDaytime}
      />
    ));
    return <ul className="hourlyWeather">{eachHour}</ul>;
  }

  function WeatherRow({id, time, temperature, daytime}){
    const height = {height: temperature-30 + 'vh'}
    const classVariables = (daytime? 'day' : 'night') + ' hourlyRow';

    return(
        <li className={classVariables} key={id} style={height}>
          <div>{temperature}°</div>
          <div className="time">{time}</div>
        </li>
    )
  }

  return (
    <div>
      <button onClick={fetchWeather}>Show weather</button>
      <div className="weather">{weather}</div>
    </div>
  );
}

export default Weather;
.hourlyWeather{
  display: grid;
  grid-auto-flow: column;
  list-style: none;
  grid-gap: 1px;
  grid-template-rows: 80vh;
  align-items: end;
  font-family: monospace;
}
.hourlyRow{
  text-align: right;
  min-width: 1.5em;
  padding: 0.2em;
  display: grid;
}
.day{
  background-color: lightblue;
}
.night{
  background-color: darkgray;
}
.time{
  align-self: end;
}

2020.05.22: Show the Temperature at a Fixed Location

First attempt to create a Weather App from an API. Learned to iterate through a list. Had trouble figuring out passing data between components, so I made the fetch() and map() functions happen inside the same component. I also used useState() to update the initial weather variable with the temperature list.

It's functional, but not very usable without time stamps or additional styling.

Notes

Questions