Added html , css , js file

ShreyaPramanik47 · Apr 12, 2024 · 403fdf6 · 403fdf6
commit 403fdf6
Show file tree

Hide file tree

Showing 12 changed files with 852 additions and 0 deletions.
diff --git a/assets/cloud.png b/assets/cloud.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/assets/humidity.png b/assets/humidity.png
diff --git a/assets/loading.gif b/assets/loading.gif
diff --git a/assets/location.png b/assets/location.png
diff --git a/assets/not-found.png b/assets/not-found.png
diff --git a/assets/search.png b/assets/search.png
diff --git a/assets/weatherLogo.png b/assets/weatherLogo.png
diff --git a/assets/wind.png b/assets/wind.png
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet" />
+    <link rel="icon" href="assets/weatherLogo.png">
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="container">
+            <h1>Check Today's Weather</h1>
+
+            <div class="tab-container">
+                <p class="tab" data-userWeather>Your Weather</p>
+                <p class="tab" data-searchWeather>Search Weather</p>
+            </div>
+
+            <div class="weather-container">
+                <!-- grant location container-->
+                <div class=" sub-container grant-location-container">
+                    <img src="./assets/location.png" width="80" height="80" loading="lazy" />
+                    <p>Grant Location Access</p>
+                    <p>Allow Access to get weather Information</p>
+                    <button class="btn" data-grantAccess>Grant Access</button>
+                </div>
+
+                <!-- search form -> form-container-->
+                <form class="form-container" data-searchForm>
+                    <input placeholder="Search for City..." data-searchInput />
+                    <button class="btn" type="submit">
+                        <img src="./assets/search.png" width="20" height="20" loading="lazy" />
+                    </button>
+                </form>
+
+                <!--- loading screen container -->
+                <div class=" sub-container  loading-container">
+                    <img src="./assets/loading.gif" width="150" height="150"  class="loadingScrn"/>
+                    <p>Loading</p>
+                </div>
+
+                <!-- show weather info -->
+                <div class="sub-container user-info-container">
+                    <!--city name and Flag-->
+                    <div class="name">
+                        <p data-cityName></p>
+                        <img data-countryIcon />
+                    </div>
+
+                    <!-- weather descriptuion-->
+                    <p data-weatherDesc></p>
+                    <!--weather Icon-->
+                    <img data-weatherIcon />
+                    <!--temperature-->
+                    <p data-temp></p>
+
+                    <!--3 cards - parameters-->
+                    <div class="parameter-container">
+                        <!--card 1-->
+                        <div class="parameter">
+                            <img src="./assets/wind.png" />
+                            <p>windspeed</p>
+                            <p data-windspeed></p>
+                        </div>
+
+                        <!--card 2-->
+                        <div class="parameter">
+                            <img src="./assets/humidity.png" />
+                            <p>humidity</p>
+                            <p data-humidity></p>
+                        </div>
+
+                        <!--card 3-->
+                        <div class="parameter">
+                            <img src="./assets/cloud.png" />
+                            <p>Clouds</p>
+                            <p data-cloudiness></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,170 @@
+const userTab = document.querySelector("[data-userWeather]");
+const searchTab = document.querySelector("[data-searchWeather]");
+const userContainer = document.querySelector(".weather-container");
+
+const grantAccessContainer = document.querySelector(".grant-location-container");
+const searchForm = document.querySelector("[data-searchForm]");
+const loadingScreen = document.querySelector(".loading-container");
+const userInfoContainer = document.querySelector(".user-info-container");
+
+//initially vairables need????
+
+let oldTab = userTab;
+const API_KEY = "d1845658f92b31c64bd94f06f7188c9c";
+oldTab.classList.add("current-tab");
+getfromSessionStorage();
+
+function switchTab(newTab) {
+    if(newTab != oldTab) {
+        oldTab.classList.remove("current-tab");
+        oldTab = newTab;
+        oldTab.classList.add("current-tab");
+
+        if(!searchForm.classList.contains("active")) {
+            //kya search form wala container is invisible, if yes then make it visible
+            userInfoContainer.classList.remove("active");
+            grantAccessContainer.classList.remove("active");
+            searchForm.classList.add("active");
+        }
+        else {
+            //main pehle search wale tab pr tha, ab your weather tab visible karna h 
+            searchForm.classList.remove("active");
+            userInfoContainer.classList.remove("active");
+            //ab main your weather tab me aagya hu, toh weather bhi display karna poadega, so let's check local storage first
+            //for coordinates, if we haved saved them there.
+            getfromSessionStorage();
+        }
+    }
+}
+
+userTab.addEventListener("click", () => {
+    //pass clicked tab as input paramter
+    switchTab(userTab);
+});
+
+searchTab.addEventListener("click", () => {
+    //pass clicked tab as input paramter
+    switchTab(searchTab);
+});
+
+//check if cordinates are already present in session storage
+function getfromSessionStorage() {
+    const localCoordinates = sessionStorage.getItem("user-coordinates");
+    if(!localCoordinates) {
+        //agar local coordinates nahi mile
+        grantAccessContainer.classList.add("active");
+    }
+    else {
+        const coordinates = JSON.parse(localCoordinates);
+        fetchUserWeatherInfo(coordinates);
+    }
+
+}
+
+async function fetchUserWeatherInfo(coordinates) {
+    const {lat, lon} = coordinates;
+    // make grantcontainer invisible
+    grantAccessContainer.classList.remove("active");
+    //make loader visible
+    loadingScreen.classList.add("active");
+
+    //API CALL
+    try {
+        const response = await fetch(
+            `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
+          );
+        const  data = await response.json();
+
+        loadingScreen.classList.remove("active");
+        userInfoContainer.classList.add("active");
+        renderWeatherInfo(data);
+    }
+    catch(err) {
+        loadingScreen.classList.remove("active");
+        //HW
+
+    }
+
+}
+
+function renderWeatherInfo(weatherInfo) {
+    //fistly, we have to fethc the elements 
+
+    const cityName = document.querySelector("[data-cityName]");
+    const countryIcon = document.querySelector("[data-countryIcon]");
+    const desc = document.querySelector("[data-weatherDesc]");
+    const weatherIcon = document.querySelector("[data-weatherIcon]");
+    const temp = document.querySelector("[data-temp]");
+    const windspeed = document.querySelector("[data-windspeed]");
+    const humidity = document.querySelector("[data-humidity]");
+    const cloudiness = document.querySelector("[data-cloudiness]");
+
+    console.log(weatherInfo);
+
+    //fetch values from weatherINfo object and put it UI elements
+    cityName.innerText = weatherInfo?.name;
+    countryIcon.src = `https://flagcdn.com/144x108/${weatherInfo?.sys?.country.toLowerCase()}.png`;
+    desc.innerText = weatherInfo?.weather?.[0]?.description;
+    weatherIcon.src = `http://openweathermap.org/img/w/${weatherInfo?.weather?.[0]?.icon}.png`;
+    temp.innerText = `${weatherInfo?.main?.temp} °C`;
+    windspeed.innerText = `${weatherInfo?.wind?.speed} m/s`;
+    humidity.innerText = `${weatherInfo?.main?.humidity}%`;
+    cloudiness.innerText = `${weatherInfo?.clouds?.all}%`;
+
+
+}
+
+function getLocation() {
+    if(navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(showPosition);
+    }
+    else {
+        //HW - show an alert for no gelolocation support available
+    }
+}
+
+function showPosition(position) {
+
+    const userCoordinates = {
+        lat: position.coords.latitude,
+        lon: position.coords.longitude,
+    }
+
+    sessionStorage.setItem("user-coordinates", JSON.stringify(userCoordinates));
+    fetchUserWeatherInfo(userCoordinates);
+
+}
+
+const grantAccessButton = document.querySelector("[data-grantAccess]");
+grantAccessButton.addEventListener("click", getLocation);
+
+const searchInput = document.querySelector("[data-searchInput]");
+
+searchForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    let cityName = searchInput.value;
+
+    if(cityName === "")
+        return;
+    else 
+        fetchSearchWeatherInfo(cityName);
+})
+
+async function fetchSearchWeatherInfo(city) {
+    loadingScreen.classList.add("active");
+    userInfoContainer.classList.remove("active");
+    grantAccessContainer.classList.remove("active");
+
+    try {
+        const response = await fetch(
+            `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
+          );
+        const data = await response.json();
+        loadingScreen.classList.remove("active");
+        userInfoContainer.classList.add("active");
+        renderWeatherInfo(data);
+    }
+    catch(err) {
+        //hW
+    }
+}