weather app

rishabh0com · Jan 1, 2024 · 952b4aa · 952b4aa
commit 952b4aa
Show file tree

Hide file tree

Showing 17 changed files with 405 additions and 0 deletions.
diff --git a/images/cl.png b/images/cl.png
diff --git a/images/clear.png b/images/clear.png
diff --git a/images/clouds.png b/images/clouds.png
diff --git a/images/drizzle.png b/images/drizzle.png
diff --git a/images/fog.png b/images/fog.png
diff --git a/images/humidity.png b/images/humidity.png
diff --git a/images/j.png b/images/j.png
diff --git a/images/mist.png b/images/mist.png
diff --git a/images/night.png b/images/night.png
diff --git a/images/rain.png b/images/rain.png
diff --git a/images/search.png b/images/search.png
diff --git a/images/snow.png b/images/snow.png
diff --git a/images/thunder.png b/images/thunder.png
diff --git a/images/wind.png b/images/wind.png
diff --git a/index.html b/index.html
@@ -0,0 +1,87 @@
+<!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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+</head>
+
+<body>
+    <div class="upper">
+        <div class="search">
+            <input id="input" type="text" placeholder="Enter city name..">
+            <div id="click">
+                <span class="material-symbols-outlined">search</span>
+            </div>
+        </div>
+
+
+        <section class="mainSec">
+            <div class="weather secDiv">
+                <div class="day">
+                    <div class="location_city">
+                        <span class="material-symbols-outlined">
+                            location_on
+                        </span>
+                        <p>location</p>
+                    </div>
+                    <h2>Teusday</h2>
+                    <p>date</p>
+                </div>
+                <div class="weatherImg">
+                    <img id="tempImg" src="./images/clear.png" alt="">
+                </div>
+                <div class="tempMain">
+
+                </div>
+                <div class="clear">
+                    Sunny
+                </div>
+            </div>
+
+            <div class="forcast secDiv">
+
+                <div class="humidity">
+                    <h2>- Humidity</h2>
+                    <div class="humi">
+                        <div class="imgDivs">
+                            <img src="./images/humidity.png" class="forImg" alt="">
+                        </div>
+                        <div class="value">
+                            78 %
+                        </div>
+                    </div>
+                </div>
+                <div class="windSpeed">
+                    <h2> - Wind</h2>
+                    <div class="wind">
+                        <div class="imgDivs">
+                            <img src="./images/wind.png" class="forImg" alt="">
+                        </div>
+                        <div class="value">
+                            90 km/h
+                        </div>
+                    </div>
+
+                </div>
+
+                <hr />
+                <div class="forcasts forcastDivs">
+                    <div class="forC"></div>
+                    <div class="forC"></div>
+                    <div class="forC"></div>
+                    <div class="forC"></div>
+                </div>
+
+            </div>
+        </section>
+
+    </div>
+</body>
+
+</html>
+<script src="./script.js"></script>
diff --git a/script.js b/script.js
@@ -0,0 +1,110 @@
+let forcastDivs = document.querySelectorAll(".forC")
+// catch the elements
+let input = document.querySelector("#input")
+let clickSearch = document.querySelector("#click")
+var city =  "Delhi"
+clickSearch.addEventListener("click",()=>{
+    console.log(input.value)
+    city = input.value
+    cityy(city)
+    getTemprature()
+    getForcast()
+})
+getTemprature()
+
+console.log("input",input)
+//
+let APIkey = "aa2338a405271c2dbb7943eb7c748def";
+
+// set value in innerHTML
+document.querySelector(".day>p").textContent = `${new Date().getDate()}-${new Date().getMonth()+1}-${new Date().getFullYear()}`
+document.querySelector(".location_city > p").textContent =city
+function cityy(city){
+    document.querySelector(".location_city > p").textContent =city
+// console.log("cc:",city)
+}
+document.querySelector(".day > h2").textContent = getDay(new Date().getDay())[1]
+
+let humidity, windSpeed, temprature,  weather;
+async function getTemprature() {
+    console.log("Time",new Date().getHours())
+    try {
+        let response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIkey}`);
+        let data = await response.json()
+        console.log(data)
+        weather = data.weather[0].main
+        document.querySelector(".clear").textContent = weather
+        document.querySelector(".weatherImg").innerHTML = new Date().getHours() >= 19 || new Date().getHours() <= 4 ? `<img class="forImg" src="./images/night.png" /> ` :  `<img class="forImg" src=${findWeatherImg(weather)} /> `
+        temprature = data.main.temp;
+        document.querySelector(".tempMain").innerHTML = `${Math.round(temprature)}°C`
+        windSpeed = data.wind.speed;
+        document.querySelector(".wind > .value").textContent = windSpeed + " km/h"
+        humidity = data.main.humidity;
+        document.querySelector(".humi > .value").textContent = humidity + " %"
+    } catch (error) {
+        document.querySelector(".location_city > p").textContent = "City Not Found.. Try again!"
+        console.log(error)
+    }
+}
+
+getTemprature()
+// get for cast next 3 days
+async function getForcast() {
+    // console.log(forcastDivs)
+    try {
+        let res = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=${APIkey}`);
+        let data = await res.json();
+        // console.log(data)
+       let forDays = data.list.filter((ele, index) => index % 8 == 0);
+    //    console.log(forDays)
+       for(let i = 0; i < 4; i++){
+        let wDate = new Date(forDays[i].dt * 1000).getDay()
+        let day =  getDay(wDate)
+        // console.log(wDate)
+        let wMain = forDays[i].weather[0].main;
+        let wTemp = forDays[i].main.temp;
+        let img = findWeatherImg(wMain)
+
+        forcastDivs[i].innerHTML = `<div>
+                                       <img src=${img} />
+                                    </div> 
+                                    <h2>${day[0]}</h2>
+                                    <h1>${Math.round(wTemp)}°C</h1>
+                                    `
+       }
+
+    } catch (error) {
+
+    }
+}
+getForcast()
+
+// get image according to weather
+function findWeatherImg(weather) {
+    switch (weather) {
+        case 'Clear': return "./images/clear.png"
+        case 'Clouds': return "./images/clouds.png"
+        case 'Drizzle': return "./images/drizzle.png"
+        case 'Mist': return "./images/mist.png"
+        case 'Rain': return "./images/rain.png"
+        case 'Snow': return "./images/snow.png"
+        case 'Smoke': return "./images/mist.png"
+        case 'Thunderstorm' : return  "./images/thunder"
+        case 'Haze' : return "./images/fog.png"
+        case "Fog" : return "./images/fog.png"
+    }
+}
+
+// get day function
+function getDay(day){
+    switch(day){
+        case 0 : return ["Sun","Sunday"]
+        case 1 : return ["Mon","Monday"]
+        case 2 : return ["Tue","Tuesday"]
+        case 3 : return ["Wed","Wednesday"]
+        case 4 : return ["Thu","Thursday"]
+        case 5 : return ["Fri","Friday"]
+        case 6 : return ["Sat","Saturday"]
+
+    }
+}