Help with if/else statement in weather app

Help with if/else statement in weather app
0

I’m having a little a trouble getting an if/else statement to work to change the background dependent on the summary of the weather for a weather app that I’m working on. The statement is at the bottom of the code. I console logged the api for the weather data so you can see it. What I’m trying to target is the daily summary.

https://weather-me.netlify.com


window.addEventListener('load', () => {
    let long
    let lat
    const temperatureDescription = document.querySelector('.temperature-description')
    const temperatureDegree = document.querySelector('.temperature-degree')
    const locationTimezone = document.querySelector('.location-timezone')
    const temperatureSection = document.querySelector('.temperature')
    const temperatureSpan = document.querySelector('.temperature span')
    const dailyDescription = document.querySelector('.daily-description')
    const mon = document.querySelector('.mon')
    const tues = document.querySelector('.tues')
    const wed = document.querySelector('.wed')
    const thurs = document.querySelector('.thurs')
    const fri = document.querySelector('.fri')
    const sat = document.querySelector('.sat')
    const sun = document.querySelector('.sun')


    if(navigator.geolocation){
        //if user allows location access 
        navigator.geolocation.getCurrentPosition(position => {
            //run function to get latitude and longitude of user
            long = position.coords.longitude
            //set longitude coordinates to a variable
            lat = position.coords.latitude
            //set latitude coordinates to a variable

            const proxy = 'https://cors-anywhere.herokuapp.com/'
            const api = `${proxy}https://api.darksky.net/forecast/edb3046b24065a7cbfda5603a675cbf9/${lat},${long}`;
            //set api key as a variable and input lat and long variables using template string

            fetch(api) //do a get request from the api url 
            .then(response => {
                return response.json()
            }) //retun the response to json
            .then(data => {
                console.log(data) //long the weather data returned from the api
                const {temperature, summary, icon} = data.currently //pull temperature from data.currently

                //set DOM elements from the API
                temperatureDegree.textContent = Math.floor(temperature)
                temperatureDescription.textContent = summary
                locationTimezone.textContent = data.timezone
                dailyDescription.textContent = data.hourly.summary

                // Set weekly elements fromt the DOM
                mon.textContent = data.daily.data[0].icon
                tues.textContent = data.daily.data[1].icon
                wed.textContent = data.daily.data[2].icon
                thurs.textContent = data.daily.data[3].icon
                fri.textContent = data.daily.data[4].icon
                sat.textContent = data.daily.data[5].icon
                sun.textContent = data.daily.data[6].icon


                //Set Icon
                 setIcons(icon, document.querySelector('.icon'))
                
                //Formula for Celsius
                let celsius = (temperature - 32) * (5 / 9)
                   

                //Change temperature to celsius/fahrenheit
                temperatureSection.addEventListener('click', () => {
                    if (temperatureSpan.textContent === 'F') {
                        temperatureSpan.textContent = 'C'
                        temperatureDegree.textContent = Math.floor(celsius)
                    } else {
                        temperatureSpan.textContent = 'F'
                        temperatureDegree.textContent = Math.floor(temperature)
                    }
                })
            })
        })

        function setIcons(icon, iconID) { //run function to take the icons from currently object and match them with skycons
            const skycons = new Skycons({color: "white"}); //Set var and properties for skycons
            const currentIcon = icon.replace(/-/g, "_").toUpperCase() // look for every line in the currently object and replace with _ to match skycons icon
            skycons.play() //make skycons animation play
            skycons.set(iconID, Skycons[currentIcon]) //set the icon to current icon to run in function
        }

    } 

    if (summary = "Overcast" || "Mostly Cloudy") {
        document.body.style.background = "url('https://images.unsplash.com/photo-1534088568595-a066f410bcda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=689&q=80')"
    } else if (summary = "Partly Cloudy") {
        document.body.style.background = "url('https://turntable.kagiso.io/images/partly-cloudy-1173077-639x447.width-800.jpg')"
    } else if (summary = "Drizzle" || "Light Rain") {
        document.body.style.background = "url('https://images.unsplash.com/photo-1534088568595-a066f410bcda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=689&q=80')"
    } else if (summary = "Sunny"){
        document.body.style.background = "url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
    } else {
        document.body.style.background = "url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
    }
})

I do not see a console.log of the data.

Right under the .then to pull the data from the API.

Sorry, I should’ve included a link. https://weather-me.netlify.com/

@Trey I misunderstood your original post. I thought you meant you were going to post the result of the console.log statement.

Addressing your problems:

One problem you are having is that you defined summary inside of the then callback, so you should move your if/else/else statements inside the callback.

Another problem is that you have confused the assignment operator and the equality operator in your if statements.

The last problem is that you are not correctly making multiple comparisons within the same if statement condition.

I suggest reviewing all of the following challenges before continuing.

On a side note, I noticed the images you are using for Drizzle and Overcast are the same.

Thank you very much. I will look over these challenges. I didn’t even think about the equality operators, thank you!

But yes, as for the images, I’m just using fillers for now to get the statements correct.

Thanks again!

Please report back once you have fixed the code issue I have pointed out. I have a few suggestions to improve the readability of your code, but I want to first make sure you have a working solution.

Thank you, I’d really appreciate it! I’m going to work on it tomorrow after work. I’ll share an update then.

Hi Randell, I just wanted to give you an update and see if you could point me in the direction for improvement.

I moved the if/else statements to the correct scope, so they’re within the then callback. I also recognize that I wasn’t using the correct equality operator, and I wasn’t correctly making comparisons within the if statements. I was saying

if (summary == "cloudy" || "overcast")

rather than

if (summary == "cloudy" || summary "overcast")

So that gave me a working solution. However, I was looking further at the darksky documentation and found that it would not be wise to use ''summary" for something like trying to set the background dependent on weather. Here’s their explanation:

The algorithm that generates a human-readable summary is complex and can produce millions of possible summaries—too many to be practical for automated processing. Moreover, we’re constantly tweaking the logic, so any pattern-matching you do against our summaries today could easily break tomorrow! By contrast, we promise to keep the values of icon property documented and warn you of any changes to that list.

So I’ve since updated the if/else statements to be dependent on the icon property. I plan to add them all in the future, but I just wanted to hear your inputs and suggestions before proceeding with anything.

Thanks again! Here’s the code and a link to the the live site:



window.addEventListener('load', () => {
    let long
    let lat
    const temperatureDescription = document.querySelector('.temperature-description')
    const temperatureDegree = document.querySelector('.temperature-degree')
    const locationTimezone = document.querySelector('.location-timezone')
    const temperatureSection = document.querySelector('.temperature')
    const temperatureSpan = document.querySelector('.temperature span')
    const dailyDescription = document.querySelector('.daily-description')
    const mon = document.querySelector('.mon')
    const tues = document.querySelector('.tues')
    const wed = document.querySelector('.wed')
    const thurs = document.querySelector('.thurs')
    const fri = document.querySelector('.fri')
    const sat = document.querySelector('.sat')
    const sun = document.querySelector('.sun')


    if(navigator.geolocation){
        //if user allows location access 
        navigator.geolocation.getCurrentPosition(position => {
            //run function to get latitude and longitude of user
            long = position.coords.longitude
            //set longitude coordinates to a variable
            lat = position.coords.latitude
            //set latitude coordinates to a variable

            const proxy = 'https://cors-anywhere.herokuapp.com/'
            const api = `${proxy}https://api.darksky.net/forecast/edb3046b24065a7cbfda5603a675cbf9/${lat},${long}`;
            //set api key as a variable and input lat and long variables using template string

            fetch(api) //do a get request from the api url 
            .then(response => {
                return response.json()
            }) //retun the response to json
            .then(data => {
                console.log(data) //long the weather data returned from the api
                const {temperature, summary, icon} = data.currently //pull temperature from data.currently

                //set DOM elements from the API
                temperatureDegree.textContent = Math.floor(temperature)
                temperatureDescription.textContent = summary
                locationTimezone.textContent = data.timezone
                dailyDescription.textContent = data.hourly.summary

                // Set weekly elements fromt the DOM
                mon.textContent = data.daily.data[0].icon
                tues.textContent = data.daily.data[1].icon
                wed.textContent = data.daily.data[2].icon
                thurs.textContent = data.daily.data[3].icon
                fri.textContent = data.daily.data[4].icon
                sat.textContent = data.daily.data[5].icon
                sun.textContent = data.daily.data[6].icon


                //Set Icon
                 setIcons(icon, document.querySelector('.icon'))
                
                //Formula for Celsius
                let celsius = (temperature - 32) * (5 / 9)
                   

                //Change temperature to celsius/fahrenheit
                temperatureSection.addEventListener('click', () => {
                    if (temperatureSpan.textContent === 'F') {
                        temperatureSpan.textContent = 'C'
                        temperatureDegree.textContent = Math.floor(celsius)
                    } else {
                        temperatureSpan.textContent = 'F'
                        temperatureDegree.textContent = Math.floor(temperature)
                    }
                })

                //Set background dependent on weather
                if (icon== "cloudy") {
                    document.body.style.background = "url('https://images.unsplash.com/photo-1479688895406-3f032f15f0ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
                } else if (icon == "partly-cloudy-day") {
                    document.body.style.background = "url('https://turntable.kagiso.io/images/partly-cloudy-1173077-639x447.width-800.jpg')"
                } else if (icon == "rain") {
                    document.body.style.background = "url('https://images.unsplash.com/photo-1417008914239-59b898b49382?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1364&q=80')"
                } else if (icon == "sunny" || icon == "clear-day"){
                    document.body.style.background = "url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
                } else {
                    document.body.style.background = "url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
                }


            })
        })

        function setIcons(icon, iconID) { //run function to take the icons from currently object and match them with skycons
            const skycons = new Skycons({color: "white"}); //Set var and properties for skycons
            const currentIcon = icon.replace(/-/g, "_").toUpperCase() // look for every line in the currently object and replace with _ to match skycons icon
            skycons.play() //make skycons animation play
            skycons.set(iconID, Skycons[currentIcon]) //set the icon to current icon to run in function
        }

    } 
})

https://weather-me.netlify.com/

I simplified your code a bit and moved the urls for the weather backgrounds to the CSS.

CSS additions

.bg-cloudy {
   background: url('https://images.unsplash.com/photo-1479688895406-3f032f15f0ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}
.bg-partly-cloudy {
  background: url('https://turntable.kagiso.io/images/partly-cloudy-1173077-639x447.width-800.jpg');
}

.bg-rain {
  background: url('https://images.unsplash.com/photo-1417008914239-59b898b49382?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1364&q=80');
}

.bg-sunny {
  background: url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}

.bg-default {
  background: url('https://images.unsplash.com/photo-1531147646552-1eec68116469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}

You can make the following HTML Changes

    <div class="weekly">
        <div class="day mon"></div>
        <div class="day tues"></div>
        <div class="day wed"></div>
        <div class="day thurs"></div>
        <div class="day fri"></div>
        <div class="day sat"></div>
        <div class="day sun"></div>
    </div>

and replace the .mon, .tues, .wed, .thurs, .fri, .sat, .sun {...} selector with the following in the CSS:

.day {
    color: black;
    font-size: 1.1em;
    margin-right: 5px;
    text-align: center;
    margin-top: auto;
}

JavaScript

window.addEventListener("load", () => {
  let long;
  let lat;
  const temperatureDescription = document.querySelector(".temperature-description");
  const temperatureDegree = document.querySelector(".temperature-degree");
  const locationTimezone = document.querySelector(".location-timezone");
  const temperatureSection = document.querySelector(".temperature");
  const temperatureSpan = document.querySelector(".temperature span");
  const dailyDescription = document.querySelector(".daily-description");

  if (navigator.geolocation) {
    //if user allows location access
    navigator.geolocation.getCurrentPosition(position => {
      //run function to get latitude and longitude of user
      long = position.coords.longitude;
      //set longitude coordinates to a variable
      lat = position.coords.latitude;
      //set latitude coordinates to a variable

      const proxy = "https://cors-anywhere.herokuapp.com/";
      const api = `${proxy}https://api.darksky.net/forecast/edb3046b24065a7cbfda5603a675cbf9/${lat},${long}`;
      //set api key as a variable and input lat and long variables using template string

      fetch(api) //do a get request from the api url
        .then(response => {
          return response.json();
        }) //retun the response to json
        .then(data => {
          // console.log(data) //long the weather data returned from the api
          const { temperature, summary, icon } = data.currently; //pull temperature from data.currently
          setBackground(icon);

          //set DOM elements from the API
          temperatureDegree.textContent = Math.floor(temperature);
          temperatureDescription.textContent = summary;
          locationTimezone.textContent = data.timezone;
          dailyDescription.textContent = data.hourly.summary;

          // Set weekly elements fromt the DOM
          const daysOfWeek = ["mon", "tues", "wed", "thurs", "fri", "sat", "sun"];
          daysOfWeek.forEach((day, i) => {
            document.querySelector("." + day).textContent = data.daily.data[i].icon;
          });

          //Set Icon
          setIcons(icon, document.querySelector(".icon"));

          //Formula for Celsius
          let celsius = (temperature - 32) * (5 / 9);

          //Change temperature to celsius/fahrenheit
          temperatureSection.addEventListener("click", () => {
            if (temperatureSpan.textContent === "F") {
              temperatureSpan.textContent = "C";
              temperatureDegree.textContent = Math.floor(celsius);
            } else {
              temperatureSpan.textContent = "F";
              temperatureDegree.textContent = Math.floor(temperature);
            }
          });
        });
    });
  }

  function setBackground(icon) {
    const backgrounds = {
      "cloudy": "bg-cloudy",
      "partly-cloudy-day": "bg-partly-cloudy",
      "rain": "bg-rain",
      "sunny": "bg-sunny",
      "clear-day": "bg-sunny"
    };
    document.body.className = backgrounds[icon] || "bg-default";
  }

  function setIcons(icon, iconID) {
    //run function to take the icons from currently object and match them with skycons
    const skycons = new Skycons({ color: "white" }); //Set var and properties for skycons
    const currentIcon = icon.replace(/-/g, "_").toUpperCase(); // look for every line in the currently object and replace with _ to match skycons icon
    skycons.set(iconID, Skycons[currentIcon]); //set the icon to current icon to run in function
    skycons.play(); //make skycons animation play
  }
});

Notice how I took advantage of the fact the the icons for each day are stored in an array with 7 elements and then setting the textContent of each corresponding div element. Also, I replaced your if/else if/else logic with a function named setBackground where you pass the icon string and use a lookup object to determine which background class to apply to the body.

Thank you Randell. That makes a lot of sense to simplify the setting of the background by setting it with css classes. I’m guessing it’s also more performant to do it that way instead of in the JS? I also plan to download the images so it isn’t fetching from a URL each time.

If you check the link again, you can see how I took the date from the daily object and added it to the weekly div. I realized that it wouldn’t make sense to name the divs the days of the week, since I want that section to show the next six days, rather than mon - sun each time. So I named them oneDayFromNow, twoDaysFromNow etc.

I would be interested to hear your thoughts on that. I just added them with javascript for practice. I’m not sure if it would be better to added the divs with html first then just set the content with javascript.

I will also implement the changes you’ve showed me. I really appreciate the guidance!

That is not necessary as the images will be cached on the user’s machine either way.

Also, the following can be refactored to remove all the repetitive code. It would involve similar logic as you saw in the code I posted above. See if you can implement it yourself.

                // Set weekly elements fromt the DOM
                oneDayFromNow.textContent = data.daily.data[0].summary
                twoDaysFromNow.textContent = data.daily.data[1].summary
                threeDaysFromNow.textContent = data.daily.data[2].summary
                fourDaysFromNow.textContent = data.daily.data[3].summary
                fiveDaysFromNow.textContent = data.daily.data[4].summary
                sixDaysFromNow.textContent = data.daily.data[5].summary
                sevenDaysFromNow.textContent = data.daily.data[6].summary

                // Set daily summaries for coming week
                // Day 1 - Today
                const dayOneDiv = document.createElement('span') //Create a div to append date to the DOM
                dayOneDiv.innerHTML = new Date(data.daily.data[0].time * 1000).toString().slice(0, 10) //Set the HTML to show date from unix code taken from daily object
                oneDayFromNow.appendChild(dayOneDiv)//Append the date to the oneDayFromNow div
                // Day 2
                const dayTwoDiv = document.createElement('span')
                dayTwoDiv.innerHTML = new Date(data.daily.data[1].time * 1000).toString().slice(0, 10)
                twoDaysFromNow.appendChild(dayTwoDiv)
                // Day 3
                const dayThreeDiv = document.createElement('span')
                dayThreeDiv.innerHTML = new Date(data.daily.data[2].time * 1000).toString().slice(0, 10)
                threeDaysFromNow.appendChild(dayThreeDiv)
                // Day 4
                const dayFourDiv = document.createElement('span')
                dayFourDiv.innerHTML = new Date(data.daily.data[3].time * 1000).toString().slice(0, 10)
                fourDaysFromNow.appendChild(dayFourDiv)
                // Day 5
                const dayFiveDiv = document.createElement('span')
                dayFiveDiv.innerHTML = new Date(data.daily.data[4].time * 1000).toString().slice(0, 10)
                fiveDaysFromNow.appendChild(dayFiveDiv)
                // Day 6
                const daySixDiv = document.createElement('span')
                daySixDiv.innerHTML = new Date(data.daily.data[5].time * 1000).toString().slice(0, 10)
                sixDaysFromNow.appendChild(daySixDiv)
                // Day 7
                const daySevenDiv = document.createElement('span')
                daySevenDiv.innerHTML = new Date(data.daily.data[6].time * 1000).toString().slice(0, 10)
                sevenDaysFromNow.appendChild(daySevenDiv)

Using your latest changes, if you make your weekly div like:

<div class="weekly"></div>

then you can replace all of the following JavaScript:

const oneDayFromNow = document.querySelector('.oneDayFromNow')
const twoDaysFromNow = document.querySelector('.twoDaysFromNow')
const threeDaysFromNow = document.querySelector('.threeDaysFromNow')
const fourDaysFromNow = document.querySelector('.fourDaysFromNow')
const fiveDaysFromNow = document.querySelector('.fiveDaysFromNow')
const sixDaysFromNow = document.querySelector('.sixDaysFromNow')
const sevenDaysFromNow = document.querySelector('.sevenDaysFromNow')
.
.
.
.
// Set weekly elements fromt the DOM
oneDayFromNow.textContent = data.daily.data[0].summary;
twoDaysFromNow.textContent = data.daily.data[1].summary;
threeDaysFromNow.textContent = data.daily.data[2].summary;
fourDaysFromNow.textContent = data.daily.data[3].summary;
fiveDaysFromNow.textContent = data.daily.data[4].summary;
sixDaysFromNow.textContent = data.daily.data[5].summary;
sevenDaysFromNow.textContent = data.daily.data[6].summary;

// Set daily summaries for coming week
// Day 1 - Today
const dayOneDiv = document.createElement("span"); //Create a div to append date to the DOM
dayOneDiv.innerHTML = new Date(data.daily.data[0].time * 1000)
  .toString()
  .slice(0, 10); //Set the HTML to show date from unix code taken from daily object
oneDayFromNow.appendChild(dayOneDiv); //Append the date to the oneDayFromNow div
// Day 2
const dayTwoDiv = document.createElement("span");
dayTwoDiv.innerHTML = new Date(data.daily.data[1].time * 1000)
  .toString()
  .slice(0, 10);
twoDaysFromNow.appendChild(dayTwoDiv);
// Day 3
const dayThreeDiv = document.createElement("span");
dayThreeDiv.innerHTML = new Date(data.daily.data[2].time * 1000)
  .toString()
  .slice(0, 10);
threeDaysFromNow.appendChild(dayThreeDiv);
// Day 4
const dayFourDiv = document.createElement("span");
dayFourDiv.innerHTML = new Date(data.daily.data[3].time * 1000)
  .toString()
  .slice(0, 10);
fourDaysFromNow.appendChild(dayFourDiv);
// Day 5
const dayFiveDiv = document.createElement("span");
dayFiveDiv.innerHTML = new Date(data.daily.data[4].time * 1000)
  .toString()
  .slice(0, 10);
fiveDaysFromNow.appendChild(dayFiveDiv);
// Day 6
const daySixDiv = document.createElement("span");
daySixDiv.innerHTML = new Date(data.daily.data[5].time * 1000)
  .toString()
  .slice(0, 10);
sixDaysFromNow.appendChild(daySixDiv);
// Day 7
const daySevenDiv = document.createElement("span");
daySevenDiv.innerHTML = new Date(data.daily.data[6].time * 1000)
  .toString()
  .slice(0, 10);
sevenDaysFromNow.appendChild(daySevenDiv);

with:

const { daily: { data: daysOfWeekWeather } } = data;
const forecastHTML = daysOfWeekWeather.reduce((html, { summary, time }, i) => {
const dateText = new Date(time * 1000).toString().slice(0, 10);
  return html += `<div class="day-${i + 1}">${summary}<span>${dateText}</span></div>`;
}, '');
document.querySelector('.weekly').innerHTML = forecastHTML;

If you end up going with putting the background images in the CSS, then you will need to add background-size: cover to the body selector and change background to background-image in each of the background selectors (see example below):

.bg-cloudy {
   background-image: url('https://images.unsplash.com/photo-1479688895406-3f032f15f0ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}

This will make the background image cover the entire page, which I think is the effect you were wanting.

Hi Randell, I’m having some trouble getting the the setBackground function to work while removing the if else statements and using CSS to change the background image. Any idea what I’m doing wrong? I’ve been over it a few times but can’t figure it out.

I wanted to get that right before I moved on with the other changes.

https://weather-me.netlify.com

@Trey I do not see where you are calling the setBackground function. You will need to call it where you have a valid value for icon that you will pass as an argument.

Hmm. I guess I’m not understanding. Shouldn’t it be called immediately because icon is already set from data.currently?

Oh duh, I see. I just need to call it right after, passing in icon.

Hi @RandellDawson, sorry to bother you again. I have another question if you get time. I reworked some of my code to make it more readable. Mostly, I added spans in the HTML that contain the day of the week and the high and low temperatures. Along with adding the icons for each day. I still need to refactor it all though, which I plan to do after I figure out this last issue.

I noticed that since added these spans, the fuction setBackground no longer works. I’m thinking it has something to do with this:https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Setting textContent on a node removes all of the node’s children and replaces them with a single text node with the given string value.

Because on that function I set document.body.className = backgrounds[icon] || 'bg-default';
after setting the textcontent of those spans. But I’m not sure if there’s any way around it.

Thanks!

When you say it no longer works, it seems like it is to me. How do I replicate the issue?

Wow it’s working for me now too. I have no idea how that happened after I didn’t change anything.

I guess the next thing then, would be for me to refactor the section where I set the day/icon/high and low.

Do you know of any resources you could send for where to start with that?

You should really go back and read this reply where I show you a way to avoid all that repeat code in general. You would dynamically create all of the data in the weekly forecast.

EDIT: I would also look into add the following media queries so the forecast is a bit more centered, which makes it easier to read on wider screens like a desktop.

@media (min-width: 600px) {
  .weekly {
    width: 90%;
  }
}

@media (min-width: 1000px) {
  .weekly {
    width: 70%;
  }
}

I also suggest vertically centering the whole app instead of having a set margin at the top. It should easily fit on a desktop screen without having to scroll down the page to see the last day. To accomplish this, you can add justify-content: center to the body selector and remove the 10% margin-top on the element with id=“location”.