solve linter issue

Author: tajulafreen

Source-Code/WeatherApp/script.js

@@ -1,16 +1,16 @@
-const input = document.getElementById("input");
-const btn = document.getElementById("btn");
-const apiKey = "e3a46268fdc2475cb63214712240202";
-const cityName = document.getElementById("city-name");
-const dateTime = document.getElementById("date-time");
-const condition2 = document.getElementById("condition2");
-const temp = document.getElementById("temp");
-const humidity = document.getElementById("humidity");
-const country = document.getElementById("country");
-const locat = document.getElementById("getlocation");
-const cities = document.getElementsByClassName("city");
-const icon = document.getElementById("icon");
-const body = document.querySelector(".weather-app");
+const input = document.getElementById('input');
+const btn = document.getElementById('btn');
+const apiKey = 'e3a46268fdc2475cb63214712240202';
+const cityName = document.getElementById('city-name');
+const dateTime = document.getElementById('date-time');
+const condition2 = document.getElementById('condition2');
+const temp = document.getElementById('temp');
+const humidity = document.getElementById('humidity');
+const country = document.getElementById('country');
+const locat = document.getElementById('getlocation');
+const cities = document.getElementsByClassName('city');
+const icon = document.getElementById('icon');
+const body = document.querySelector('.weather-app');
 const fetchData = async (url) => {
   try {
     const data = await fetch(url);
@@ -27,11 +27,11 @@ const fetchData = async (url) => {
 const updateWeatherInfo = (result) => {
   const { error, location, current } = result;
   if (error) {
-    cityName.innerText = "Error: " + error.message;
-    [country, dateTime, temp, humidity, condition2, icon].forEach(
-      (elem) => (elem.innerText = "")
-    );
-    icon.src = "";
+    cityName.innerText = `Error: ${error.message}`;
+    [country, dateTime, temp, humidity, condition2, icon].forEach((elem) => {
+      elem.innerText = '';
+    });
+    icon.src = '';
   } else {
     const { name, country, localtime } = location;
     cityName.innerText = name;
@@ -42,7 +42,7 @@ const updateWeatherInfo = (result) => {
     condition2.innerText = current.condition.text;
     icon.src = current.condition.icon;
 
-    const isDay = current.is_day == 1 ? "day" : "night";
+    const isDay = current.is_day === 1 ? 'day' : 'night';
     const codes = [
       [1000, 10000, 10001, 1100, 11001, 11000, 51190, 60030], // clear
       [
@@ -65,7 +65,7 @@ const updateWeatherInfo = (result) => {
       `./images/${isDay}/snowy.jpg`,
     ];
 
-    for (let i = 0; i < codes.length; i++) {
+    for (let i = 0; i < codes.length; i += 1) {
       if (codes[i].includes(current.condition.code)) {
         body.style.backgroundImage = `url('${imageUrls[i]}')`;
         console.log(imageUrls[i]);
@@ -77,38 +77,37 @@ const updateWeatherInfo = (result) => {
 const getData = async (cityName) => {
   try {
     const result = await fetchData(
-      `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`
+      `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`,
     );
     return result;
   } catch (error) {
     return {
-      error: { message: "Failed to fetch data. Please try again later." },
+      error: { message: 'Failed to fetch data. Please try again later.' },
     };
   }
 };
-const getlocation = async (lat, long) =>
-  fetchData(
-    `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`
-  );
+const getlocation = async (lat, long) => fetchData(
+  `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`,
+);
 
 const gotlocation = async (position) => {
   try {
     const result = await getlocation(
       position.coords.latitude,
-      position.coords.longitude
+      position.coords.longitude,
     );
     console.log(result);
     updateWeatherInfo(result);
   } catch (error) {
-    cityName.innerText = "Error fetching weather based on location";
+    cityName.innerText = 'Error fetching weather based on location';
   }
 };
-const failedlocation = () => console.log("failed to locate location");
+const failedlocation = () => console.log('failed to locate location');
 
-btn.addEventListener("click", async (e) => {
+btn.addEventListener('click', async (e) => {
   try {
     if (input.value.length === 0) {
-      alert("Please type a city name");
+      alert('Please type a city name');
     } else {
       const { value } = input;
       const result = await getData(value);
@@ -117,23 +116,21 @@ btn.addEventListener("click", async (e) => {
       console.log(result);
     }
   } catch (error) {
-    cityName.innerText = "Error to fetch weather";
+    cityName.innerText = 'Error to fetch weather';
   }
   e.preventDefault();
 });
 
-locat.addEventListener("click", () =>
-  navigator.geolocation.getCurrentPosition(gotlocation, failedlocation)
-);
+locat.addEventListener('click', () => navigator.geolocation.getCurrentPosition(gotlocation, failedlocation));
 const citiesArray = [...cities];
 citiesArray.forEach((element) => {
-  element.addEventListener("click", async () => {
+  element.addEventListener('click', async () => {
     const cityName = element.innerText;
     const result = await getData(cityName);
     updateWeatherInfo(result);
   });
 });
 
-window.addEventListener("load", async () => {
+window.addEventListener('load', async () => {
   navigator.geolocation.getCurrentPosition(gotlocation, failedlocation);
 });

Source-Code/WeatherApp/style.css

@@ -4,16 +4,17 @@
   margin: 0;
 }
 
-p, span {
+p,
+span {
   font-size: 18px;
 }
 
 .weather-app {
   min-height: 100vh;
   min-width: 100vw;
-  background-position: center; 
+  background-position: center;
   background-repeat: no-repeat;
-  background-size: cover; 
+  background-size: cover;
   position: relative;
   color: #fff;
   transition: 500ms linear;
@@ -26,7 +27,7 @@ p, span {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.3);
+  background: rgba(0, 0, 0, 0.3);
   z-index: 0;
 }
 
@@ -57,7 +58,7 @@ li {
 .weather-information {
   display: flex;
   flex-direction: row;
-  align-items: flex-end; 
+  align-items: flex-end;
   padding: 5% 5%;
   gap: 5%;
   justify-content: space-evenly;
@@ -82,10 +83,12 @@ li {
   width: 40vw;
   height: 100vh;
   background: rgba(236, 236, 178, 0.104);
-  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(5px);
+
   --webkit-backdrop-filter: blur(5px);
-  border: 1px solid rgb(236, 236, 178,0);
+
+  border: 1px solid rgb(236, 236, 178, 0);
   z-index: 1;
   padding: 2em 2em;
 }
@@ -167,12 +170,14 @@ span {
   margin: 6%;
 }
 
-.weather-suggestions .city, .location {
+.weather-suggestions .city,
+.location {
   display: block;
   cursor: pointer;
 }
 
-.weather-suggestions .city:hover, .location:hover {
+.weather-suggestions .city:hover,
+.location:hover {
   color: #ffffffc8;
   transform: scale(1.2);
   transition: 0.5s;
@@ -184,8 +189,9 @@ span {
     flex-direction: column;
     width: 100%;
   }
-  
-  .weather-suggestions, .weather-information {
+
+  .weather-suggestions,
+  .weather-information {
     width: 100%;
   }
 
@@ -202,4 +208,4 @@ span {
   .weather-information {
     gap: 1%;
   }
-}
+}