Added weather app

jeffThompson · May 2, 2023 · 12c46a7 · 12c46a7
1 parent 77c2cfa
commit 12c46a7
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 0 deletions.
diff --git a/Bonus-WeatherApp/index.html b/Bonus-WeatherApp/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Weather</title>
+
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+    <script src="libraries/p5.min.js"></script>
+  </head>
+
+  <body>
+    <div id="wrapper">
+      <!-- everything will be auto-generated here! -->
+    </div>
+  </body>
+
+  <script src="sketch.js"></script>
+</html>
diff --git a/Bonus-WeatherApp/jsconfig.json b/Bonus-WeatherApp/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6"
+  },
+  "include": [
+    "*.js",
+    "**/*.js",
+    "/Users/jeffthompson/.vscode/extensions/samplavigne.p5-vscode-1.2.13/p5types/global.d.ts"
+  ]
+}
diff --git a/Bonus-WeatherApp/libraries/p5.min.js b/Bonus-WeatherApp/libraries/p5.min.js
diff --git a/Bonus-WeatherApp/libraries/p5.sound.min.js b/Bonus-WeatherApp/libraries/p5.sound.min.js
diff --git a/Bonus-WeatherApp/sketch.js b/Bonus-WeatherApp/sketch.js
@@ -0,0 +1,135 @@
+
+// https://www.weather.gov/documentation/services-web-api#/default/radar_station
+// https://api.weather.gov/gridpoints/OKX/34,37/forecast 
+
+let place = 'Hoboken, New Jersey';
+let url =   'https://api.weather.gov/gridpoints/OKX/34,37/forecast';
+
+let forecast;
+
+function preload() {
+  // get the forecast from the 
+  // National Weather Service in JSON format
+  // https://p5js.org/reference/#/p5/loadJSON
+  forecast = loadJSON(url);
+  console.log(forecast);
+
+  // note, by leaving off 'forecast' from the URL you can get
+  // lots more data, which might be cool to include!
+}
+
+function setup() {
+  // no canvas or draw!
+  noCanvas();
+
+  // first, let's add the location to the page...
+
+  // we need to grab the 'wrapper' element so we can
+  // add the location info to it
+  let wrapper = document.getElementById('wrapper');
+
+  // then we create a headline element with the
+  // current location as the text!
+  // challenge: try parsing the current conditions
+  // and change the pushpin emoji to weather-related!
+  let h1 = document.createElement('h1');
+  h1.innerHTML = '&#128205; ' + place;
+  wrapper.appendChild(h1);
+
+  // while we're here, let's also change the title
+  // of the page (so it shows up at the top and if
+  // someone bookmarks the page)
+  document.title = 'Weather for ' + place;
+
+  // ok, let's grab some info from the forecast
+  let today = forecast.properties.periods[0];
+  console.log(today);
+
+  // this has a lot of data inside it, so let's get
+  // all that in a more useful format using a custom function
+  today = parseForecast(forecast.properties.periods[0]);
+  console.log(today);
+
+  // now let's display the forecast in our page!
+  // we could do this by...
+  // 1. creating the elements in the index.html file, giving
+  //    each one a unique ID and placing the data
+  // 2. create the elements directly in Javascript, which
+  //    is what we're going to do!
+  // let's also do this in a function, to keep our code tidy
+  listForecast(today);
+
+  // ok that works!
+  // let's load and display all the days available
+  for (let i=1; i<forecast.properties.periods.length; i++) {
+    let day = parseForecast(forecast.properties.periods[i]);
+    listForecast(day);
+  }
+
+  // finally, let's also add a link to the NWS data we used
+  // and a little byline, since we worked so hard on this
+  // first, we create a paragraph element
+  let byline = document.createElement('p');
+  byline.id = 'byline';
+
+  // then the link, which we add to the paragraph
+  let link = document.createElement('a');
+  link.innerHTML = 'Data provided by the National Weather Service';
+  link.href = 'https://www.weather.gov/documentation/services-web-api#/default/radar_station';
+  byline.appendChild(link);
+
+  // finally, add a line break and the credit line, then
+  // add the whole thing to our page
+  byline.innerHTML += '<br>Built by Jeff Thompson'; 
+  wrapper.appendChild(byline);
+}
+
+function parseForecast(f) {
+  let out = {
+    'name':             f.name,
+    'highTemp':         f.temperature + '&deg; ' + f.temperatureUnit,
+    'shortForecast':    f.shortForecast,
+    'detailedForecast': f.detailedForecast
+  };
+  return out;
+}
+
+function listForecast(f) {
+  // get the wrapper element again
+  let wrapper = document.getElementById('wrapper');
+
+  // for each day, create a 'div' or container for the
+  // forecast info to go in (this will let us space stuff
+  // out, add borders, etc later)
+  let div = document.createElement('div');
+  div.id = f.name;                // give it a unique ID so we can add items to it
+  div.classList.add('forecast');  // add a class too, so we can style them all the same
+  wrapper.appendChild(div);
+
+  // now we can add some content to the div...
+
+  // which day is this for?
+  // create a headline element to show us
+  let day = document.createElement('h2');
+
+  // then add some text (and some HTML!) to the <h2>
+  day.innerHTML = f.name + ' <span class="temp">' + f.highTemp + '</span>';
+
+  // change the class, depending on if it's for the
+  // day or night (which changes the bg color in the CSS)
+  if (f.name.toLowerCase().includes('night')) {
+    div.classList.add('night');
+  }
+  else {
+    div.classList.add('day');
+  }
+  div.appendChild(day);
+
+  // full forecast
+  let full = document.createElement('p');
+  full.classList.add('detailedForecast');
+  full.innerHTML = f.detailedForecast;
+  div.appendChild(full);
+}
+
+
diff --git a/Bonus-WeatherApp/style.css b/Bonus-WeatherApp/style.css
@@ -0,0 +1,64 @@
+*, html, body {
+  margin:  0;
+  padding: 0;
+
+  font-family: 'Cabin', Helvetica, sans-serif;
+  font-size:   16px;
+}
+
+/* typography */
+h1 {
+  font-size:     2em;
+  margin-bottom: 1em;
+}
+h2 {
+  font-size:     1.3em;
+  margin-bottom: 0.6em;
+}
+p {
+  font-size: 1em;
+}
+
+/* links */
+a, a:link, a:visited {
+  color: rgb(100,100,100);
+}
+a:active, a:hover {
+  color: black;
+}
+
+/* overall container for the page */
+#wrapper {
+  width:     80%;
+  max-width: 600px;
+  margin:    2em auto 6em auto;
+}
+
+/* forecast stuff */
+.forecast {
+  margin-bottom: 1em;
+  padding:       1em 1em 1.6em 1.6em;
+  border-radius: 12px;
+}
+.forecast:first-of-type {
+  /* brighter color for today! */
+  background-color: rgb(255, 204, 17);
+}
+.detailedForecast {
+  font-style: italic;
+}
+.temp {
+  float: right;
+}
+.day {
+  color:            black;
+  background-color: rgb(255, 191, 143);
+}
+.night {
+  color:            white;
+  background-color: rgb(23, 23, 102);
+}
+#byline {
+  margin-top:  2em;
+  line-height: 2em;
+}