tajulafreen · tajulafreen · Feb 9, 2024 · Feb 2, 2024 · Feb 4, 2024 · Feb 4, 2024
diff --git a/Source-Code/WeatherApp/images/Day/clear.jpg b/Source-Code/WeatherApp/images/Day/clear.jpg
diff --git a/Source-Code/WeatherApp/images/Day/cloudy.jpg b/Source-Code/WeatherApp/images/Day/cloudy.jpg
diff --git a/Source-Code/WeatherApp/images/Day/rainy.jpg b/Source-Code/WeatherApp/images/Day/rainy.jpg
diff --git a/Source-Code/WeatherApp/images/Day/snowy.jpg b/Source-Code/WeatherApp/images/Day/snowy.jpg
diff --git a/Source-Code/WeatherApp/images/Night/clear.jpg b/Source-Code/WeatherApp/images/Night/clear.jpg
diff --git a/Source-Code/WeatherApp/images/Night/cloudy.jpg b/Source-Code/WeatherApp/images/Night/cloudy.jpg
diff --git a/Source-Code/WeatherApp/images/Night/rainy.jpg b/Source-Code/WeatherApp/images/Night/rainy.jpg
diff --git a/Source-Code/WeatherApp/images/Night/snowy.jpg b/Source-Code/WeatherApp/images/Night/snowy.jpg
diff --git a/Source-Code/WeatherApp/index.html b/Source-Code/WeatherApp/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+        <div class="weather-app night-clear">
+            <div class="weather-container">         
+
+    <ul class="weather-information">
+        <!-- <h2 class="heading">Check Weather</h2>
+         -->
+        <h1 id="temp" class="temp">23°C</h1>
+        <li class="column">
+        <h1 id="city-name" class="city">Kadapa</h1>
+        <h4 id="date-time" class="time">2024-02-06 3:59</h4>
+    </li>
+
+        <img id="icon" class="icon" class="icon" alt="icon" />
+
+
+    </ul>
+    <ul class="weather-suggestions">
+
+        <input class="input" id="input" type="text" placeholder="Enter city name">
+        <button class="search" id="btn"><i class="fa fa-search"></i></button>
+
+        <ul>
+        <li>
+            <a class="location" id="getlocation"><i class="fa fa-location-arrow "> Get Weather of your city</i></a>
+        </li>
+        <li class="city">London</li>
+        <li class="city">Kabul</li>
+        <li class="city">Ottawa</li>
+        <li class="city">california</li>
+        </ul>
+        <h3 class="weather-de">Weather details</h3>
+        <li class="weather-details">
+
+        <div class="row">
+            <p  class="country">Country</p>
+            <span id="country" class="country">India</span>
+
+        </div>
+        <div class="row">
+            <p  class="condition">Condition</p>
+            <span id="condition2" class="condition">Clear</span>
+
+        </div>
+        <div class="row">
+            <p class="humidity">Humidity</p>
+            <span id="humidity" class="humidity">humidity</span>
+
+        </div>
+    </li>
+    </ul>
+</div>
+
+
+        <script src="script.js"></script>
+         </div>
+  </body>
+</html>
diff --git a/Source-Code/WeatherApp/script.js b/Source-Code/WeatherApp/script.js
@@ -0,0 +1,136 @@
+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);
+    if (!data.ok) {
+      throw new Error(data.statusText);
+    }
+    return data.json();
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+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 = '';
+  } else {
+    const { name, country, localtime } = location;
+    cityName.innerText = name;
+    country.innerText = country;
+    dateTime.innerText = localtime;
+    temp.innerText = `${current.temp_c} °C`;
+    humidity.innerText = `${current.humidity} %`;
+    condition2.innerText = current.condition.text;
+    icon.src = current.condition.icon;
+
+    const isDay = current.is_day === 1 ? 'day' : 'night';
+    const codes = [
+      [1000, 10000, 10001, 1100, 11001, 11000, 51190, 60030], // clear
+      [
+        1101, 11011, 11010, 11021, 11020, 1102, 1001, 10010, 10011, 1003, 1150,
+        1153, 1168, 1147, 1135, 1087, 1003, 1006, 1207, 1009,
+      ], // cloudy
+      [
+        1261, 1273, 1276, 1274, 1246, 1243, 1240, 1201, 1204, 1198, 1192, 1195,
+        1189, 1186, 1183, 1180, 1186,
+      ], // rainy
+      [
+        1030, 1066, 1168, 1171, 1210, 1213, 1216, 1219, 1222, 1225, 1237, 1255,
+        1258, 1279, 1282,
+      ], // snowy
+    ];
+    const imageUrls = [
+      `./images/${isDay}/clear.jpg`,
+      `./images/${isDay}/cloudy.jpg`,
+      `./images/${isDay}/rainy.jpg`,
+      `./images/${isDay}/snowy.jpg`,
+    ];
+
+    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]);
+        break;
+      }
+    }
+  }
+};
+const getData = async (cityName) => {
+  try {
+    const result = await fetchData(
+      `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.' },
+    };
+  }
+};
+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,
+    );
+    console.log(result);
+    updateWeatherInfo(result);
+  } catch (error) {
+    cityName.innerText = 'Error fetching weather based on location';
+  }
+};
+const failedlocation = () => console.log('failed to locate location');
+
+btn.addEventListener('click', async (e) => {
+  try {
+    if (input.value.length === 0) {
+      alert('Please type a city name');
+    } else {
+      const { value } = input;
+      const result = await getData(value);
+      console.log(result);
+      updateWeatherInfo(result);
+      console.log(result);
+    }
+  } catch (error) {
+    cityName.innerText = 'Error to fetch weather';
+  }
+  e.preventDefault();
+});
+
+locat.addEventListener('click', () => navigator.geolocation.getCurrentPosition(gotlocation, failedlocation));
+const citiesArray = [...cities];
+citiesArray.forEach((element) => {
+  element.addEventListener('click', async () => {
+    const cityName = element.innerText;
+    const result = await getData(cityName);
+    updateWeatherInfo(result);
+  });
+});
+
+window.addEventListener('load', async () => {
+  navigator.geolocation.getCurrentPosition(gotlocation, failedlocation);
+});