From c75ec65cc59e18143fa66822edf3868ab7e71a55 Mon Sep 17 00:00:00 2001 From: Gregg Stubberfield Date: Fri, 8 Dec 2023 11:51:29 -0500 Subject: [PATCH] Set up OpenWeatherMap API --- index.html | 4 +- js/weather.js | 108 ++++++++++++++++++++++----------- pages/weather.html | 147 +++++++++++++++------------------------------ 3 files changed, 123 insertions(+), 136 deletions(-) diff --git a/index.html b/index.html index 15056d0..ea7ba80 100644 --- a/index.html +++ b/index.html @@ -230,6 +230,7 @@
Front-end Web Developer
  • Resume
    • +
  • Projects
  • Contact
    • @@ -259,8 +260,7 @@

    About Me

    -

    TBD -

    +

    TBD

    diff --git a/js/weather.js b/js/weather.js index b49ef46..71538eb 100644 --- a/js/weather.js +++ b/js/weather.js @@ -12,6 +12,13 @@ const app = { .addEventListener('click', app.getLocation); }, fetchWeather: (ev) => { + document + .getElementById('loading') + .classList + .remove('hide'); + ev.preventDefault(); + ev.stopPropagation(); + ev.stopImmediatePropagation(); //use the values from latitude and longitude to fetch the weather let lat = document.getElementById('latitude').value; let lon = document.getElementById('longitude').value; @@ -29,14 +36,29 @@ const app = { app.showWeather(data); }) .catch(console.err); + document + .getElementById('loading') + .classList + .add('hide'); }, getLocation: (ev) => { + document + .getElementById('loading') + .classList + .remove('hide'); + ev.preventDefault(); + ev.stopPropagation(); + ev.stopImmediatePropagation(); let opts = { enableHighAccuracy: true, timeout: 1000 * 10, //10 seconds maximumAge: 1000 * 60 * 5, //5 minutes }; navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError, opts); + document + .getElementById('loading') + .classList + .add('hide'); }, onSuccess: (position) => { //got position @@ -51,43 +73,61 @@ const app = { }, showWeather: (resp) => { console.log(resp); - let row = document.querySelector('.weather.row'); + let today = document.querySelector('.today'); + let week = document.querySelector('.week'); + function convertCtoF (C) { + return parseInt(C * 9 / 5 + 32); + } //clear out the old weather and add the new - // row.innerHTML = ''; - row.innerHTML = resp.daily + today.innerHTML = resp.daily + .map((day, idx) => { + let dt = new Date(day.dt * 1000); //timestamp * 1000 + const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + if (idx == 0) { // show current day forecast + return `
    +
    +
    ${resp.timezone}
    +

    ${convertCtoF(day.temp.day)}°F

    + ${day.weather[0].description} +
    ${day.weather[0].main}
    +
    +
    `; + } + }) + .join(' '); + week.innerHTML = resp.daily .map((day, idx) => { - if (idx <= 2) { - let dt = new Date(day.dt * 1000); //timestamp * 1000 - let sr = new Date(day.sunrise * 1000).toTimeString(); - let ss = new Date(day.sunset * 1000).toTimeString(); - return `
    -
    -
    ${dt.toDateString()}
    - +
    +
    +
    ${weekday[dt.getDay()]}
    +
    ${dt.toLocaleDateString('en-US')}
    + ${day.weather[0].description} -
    -

    ${day.weather[0].main}

    -

    High ${day.temp.max}°C Low ${day.temp.min - }°C

    -

    High Feels like ${day.feels_like.day - }°C

    -

    Pressure ${day.pressure}mb

    -

    Humidity ${day.humidity}%

    -

    UV Index ${day.uvi}

    -

    Precipitation ${day.pop * 100}%

    -

    Dewpoint ${day.dew_point}

    -

    Wind ${day.wind_speed}m/s, ${day.wind_deg - }°

    -

    Sunrise ${sr}

    -

    Sunset ${ss}

    -
    -
    -
    -
    `; + class="card-image" + alt="${day.weather[0].description}" + /> +

    ${day.weather[0].main}

    +
    +
    +

    High ${convertCtoF(day.temp.max)}°F Low ${convertCtoF(day.temp.min) + }°F

    +

    High Feels like ${convertCtoF(day.feels_like.day) + }°F

    +

    Precipitation ${day.pop * 100}%

    +
    + + + `; } }) .join(' '); diff --git a/pages/weather.html b/pages/weather.html index 3049394..93fa823 100644 --- a/pages/weather.html +++ b/pages/weather.html @@ -17,6 +17,7 @@
    - - - -
    -

    OpenWeatherMap.org API

    - +

    OpenWeatherMap.org API

    +

    Back to home

    -
    +
    - +
    - +
    @@ -86,80 +95,18 @@

    OpenWeatherMap.org API

    +
    +
    +
    + -
    -

    Weather

    -
    -
    -
    -
    HighFeels like
    - 80° -
    -
    -
    -
    -
    LowFeels like
    -
    60°
    -
    -
    -
    -
    -
    - Weather description -
    -
    Weather Label
    -
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum a - illum - delectus dignissimos quo obcaecati iure, tempore blanditiis ut mollitia veritatis labore - deleniti aliquam cumque aut debitis aperiam veniam similique!
    -
    -
    -
    -
    - Weather description -
    -
    Weather Label
    -
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum a illum - delectus dignissimos quo obcaecati iure, tempore blanditiis ut mollitia veritatis labore - deleniti aliquam cumque aut debitis aperiam veniam similique!
    -
    - -
    +
    +
    +
    +
    +
    - -