Simplfying JavaScript

November 17, 2022

I’m currently a web developer boot camp student and I am working on a project. I know there is a way to simplify this function but I can’t seem to grasp it. What is the way to simplify this entire thing into a for loop so I don’t have to do this to every element? I am calling a weather API and applying them to the HTMl. Also, I am using the querySelector as for some reason, JQuery doesn’t want to allow me to use the $.

HTML

 <div class="row bottom">
   <div class="col"><span class="subtitle">-Temperature-</span></div>
   <div class="col">
     <div class="row" id="date1">Sun</div>
     <div class="row data" id="date1Temp"><b>-4&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date2">Mon</div>
     <div class="row data" id="date2Temp"><b>-5&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date3">Tue</div>
     <div class="row data" id="date3Temp"><b>-10&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date4">Wed</div>
     <div class="row data" id="date4Temp"><b>-4&deg;</b></div>
   </div>
   <div class="col">
     <div class="row" id="date5">Thu</div>
     <div class="row data" id="date5Temp"><b>-2&deg;</b></div>
   </div>
   <div class="col">
     <hr />
   </div>
 </div>

let fiveDayWeather = function (weatherValue) {
  const date1 = document.querySelector("#date1");
  const date2 = document.querySelector("#date2");
  const date3 = document.querySelector("#date3");
  const date4 = document.querySelector("#date4");
  const date5 = document.querySelector("#date5");

  const date1Temp = document.querySelector("#date1Temp");
  const date2Temp = document.querySelector("#date2Temp");
  const date3Temp = document.querySelector("#date3Temp");
  const date4Temp = document.querySelector("#date4Temp");
  const date5Temp = document.querySelector("#date5Temp");

  let todaysMonth = dayjs().$M;
  let tomorrow = dayjs().$D + 1;
  let twoDaysAfter = dayjs().$D + 2;
  let threeDaysAfter = dayjs().$D + 3;
  let fourDaysAfter = dayjs().$D + 4;
  let fiveDaysAfter = dayjs().$D + 5;

  date1.innerText = `${todaysMonth}/${tomorrow}`;
  date1Temp.innerText = weatherValue.list[1].main.temp + "\u00B0 F";
  date2.innerText = `${todaysMonth}/${twoDaysAfter}`;
  date2Temp.innerText = weatherValue.list[2].main.temp + "\u00B0 F";
  date3.innerText = `${todaysMonth}/${threeDaysAfter}`;
  date3Temp.innerText = weatherValue.list[3].main.temp + "\u00B0 F";
  date4.innerText = `${todaysMonth}/${fourDaysAfter}`;
  date4Temp.innerText = weatherValue.list[4].main.temp + "\u00B0 F";
  date5.innerText = `${todaysMonth}/${fiveDaysAfter}`;
  date5Temp.innerText = weatherValue.list[5].main.temp + "\u00B0 F";

>Solution :

Here you go with some comments:

let fiveDayWeather = function (weatherValue) {
  let todaysMonth = dayjs().$M;
  [...Array(5).keys()] // generate array with indexes[ 0, 1, 2, 3, 4]
    .map((k) => `date${k + 1}`) // map each element to the format "date1" "date2" etc
    .forEach((id, index) => { // iterate the array with both the generated ids in the format you want and the index
      // get the elements
      const date = document.getElementById(id);
      const dateTemp = document.getElementById(id + "Temp");
      // set the day
      const day = dayjs().$D + index + 1;
      // edit html content
      date.innerText = `${todaysMonth}/${day}`;
      dateTemp.innerText = weatherValue.list[index + 1].main.temp + "\u00B0 F";
    });
};