cleaned the code by reducing unecessary lines

Author: sankitdev

Day-24-Weather-App/script.js

@@ -1,16 +1,7 @@
-//Selection of Elements
-const currentWeather = document.querySelector(".current-weather");
-const weatherForeCast = document.querySelector(".weather-forecast");
-let cityName = document.querySelector("input");
-const button = document.querySelector("button");
-const para = document.querySelector(".currTime");
-const extraInfo = document.querySelector(".extraInfo");
-const temp = document.querySelector(".temp");
-const inputVal = document.querySelector(".inputVal");
-const description = document.querySelector(".description");
 const API = "e594f5869719e24b7089dcc31a97c76f"; //Put your API in here
+let cityName = document.querySelector("input");
 
-const dataFecth = async function () {
+async function dataFecth() {
   try {
     const response = await fetch(
       `https://api.openweathermap.org/data/2.5/weather?q=${cityName.value}&appid=${API}`
@@ -23,7 +14,7 @@ const dataFecth = async function () {
   } catch (error) {
     console.error("Error aa gya:", error);
   }
-};
+}
 
 async function fetchForeCast() {
   try {
@@ -41,41 +32,25 @@ async function fetchForeCast() {
   }
 }
 
-function getTime() {
-  let time = new Date();
-  let IndiaTime = time.toLocaleTimeString("en-In", {
-    timeZone: "Asia/Kolkata",
-  });
-  return IndiaTime;
-}
-function startInterval() {
-  setInterval(() => {
-    document.querySelector("#getTime").textContent = getTime();
-  }, 1000);
-}
-
-button.addEventListener("click", () => {
+document.querySelector("button").addEventListener("click", () => {
   dataFecth();
-  startInterval();
   fetchForeCast();
 });
 
 function displayCurrentData(data) {
-  const p = document.createElement("p");
-  const img = document.createElement("img");
-  const mT1 = document.createElement("p");
-  const mT2 = document.createElement("p");
-  const C = document.createElement("span");
-  C.textContent = Math.round(data?.main?.temp - 273.15) + " °C";
-  p.textContent = "Current Weather";
-  img.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}.png`;
-  mT1.textContent = data.weather[0].main;
-  mT2.textContent = `Feels Like ${Math.round(
-    data.main.feels_like - 273.15
-  )} °C`;
-  para.insertBefore(p, para.firstChild);
-  extraInfo.append(mT1, mT2);
-  temp.append(img, C);
+  const currentWeather = document.querySelector(".current-weather");
+  currentWeather.innerHTML = `
+    <p id="currTime">Current Weather</p>
+    <div class="temp">
+    <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}.png">
+    <span>${Number(data?.main?.temp - 273.15).toFixed(2)}°C</span>
+    </div>
+    <div class="extraInfo">
+    <p>${data.weather[0].main}</p>
+    <p>Feels Like ${Number(data.main.feels_like - 273.15).toFixed(2)} °C</p>
+    </div>
+  `;
+  const inputVal = document.querySelector(".inputVal");
   inputVal.textContent = cityName.value;
 }
 
@@ -88,23 +63,23 @@ function getForeastData(data) {
 }
 
 function displayForeCast(data) {
+  const weatherForeCast = document.querySelector(".weather-forecast");
+  const description = document.querySelector(".description");
   const p = document.createElement("p");
   p.id = "check";
   p.textContent = `5 Day Weather Forecast for city ${cityName.value}`;
   description.appendChild(p);
   for (let i = 0; i < data.length; i++) {
-    const div = document.createElement("div");
-    const temp = document.createElement("p");
-    const date = document.createElement("p");
-    const img = document.createElement("img");
-    date.textContent = new Date(data[i].dt * 1000).toLocaleDateString("en-In", {
+    let date = new Date(data[i].dt * 1000).toLocaleDateString("en-In", {
       day: "numeric",
       month: "short",
     });
-    img.src = `https://openweathermap.org/img/wn/${data[i].weather[0].icon}.png`;
-    temp.textContent = Number(data[i]?.main?.temp - 273.15).toFixed(2) + " °C";
-    div.id = "detail";
-    div.append(date, img, temp);
-    weatherForeCast.append(div);
+    weatherForeCast.innerHTML += `
+    <div id="detail">
+    <p>${date}</p>
+    <img src="${`https://openweathermap.org/img/wn/${data[i].weather[0].icon}.png`}">
+    <p>${Number(data[i]?.main?.temp - 273.15).toFixed(2) + "°C"}</p>
+    </div>
+    `;
   }
 }