solygambas · Sonu64 · Sep 23, 2023 · Sep 23, 2023
diff --git a/Weather_App/images/clear.png b/Weather_App/images/clear.png
diff --git a/Weather_App/images/clouds.png b/Weather_App/images/clouds.png
diff --git a/Weather_App/images/drizzle.png b/Weather_App/images/drizzle.png
diff --git a/Weather_App/images/haze.png b/Weather_App/images/haze.png
diff --git a/Weather_App/images/humidity.png b/Weather_App/images/humidity.png
diff --git a/Weather_App/images/mist.png b/Weather_App/images/mist.png
diff --git a/Weather_App/images/rain.png b/Weather_App/images/rain.png
diff --git a/Weather_App/images/snow.png b/Weather_App/images/snow.png
diff --git a/Weather_App/images/wind.png b/Weather_App/images/wind.png
diff --git a/Weather_App/index.html b/Weather_App/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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=Poppins:wght@300;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Weather Application</title>
+</head>
+<body>
+
+    <div class="card">
+
+        <div class="searchSection">
+            <input type="text" name="" id="cityGiven" placeholder="Enter City Name">     
+            <i class="fa-solid fa-magnifying-glass" id="search"></i>
+        </div>
+        <main id="mainSection">
+
+            <div class="weather">
+                <img src="images/mist.png" alt="weather" id="weatherIcon">
+                <p class="temp">10°C</p>
+                <p class="cityName">Paris</p>
+            </div>
+            <div class="extras">
+                <div class="humidity">
+                        <img src="images/humidity.png" alt="humidity">
+                        <section>
+                            <p id="humidityValue">40%</p>
+                            <p style="color: rgb(64, 204, 255);">Humidity</p>
+                        </section>
+
+                </div>
+                <div class="windSpeed">
+                    <p>
+                        <img src="images/wind.png" alt="windSpeed">
+                        <section>
+                            <p id="windSpeedValue">30 Km/hr</p>
+                            <p style="color: rgb(64, 204, 255);">Wind Speed</p>
+                        </section>
+
+                    </p>
+                </div>
+            </div>
+        </main>
+
+
+    </div>
+
+</body>
+ <script src="script.js"></script>
+</html>
diff --git a/Weather_App/script.js b/Weather_App/script.js
@@ -0,0 +1,49 @@
+const getWeather = async (cityProvided) => {
+
+    let weatherImage = document.querySelector("#weatherIcon");
+
+    let city = cityProvided
+    const apiKey = "8313e9397d477560c4071df640d6a1fe";
+    let url = "https://api.openweathermap.org/data/2.5/weather?q="+city+"&appid="+apiKey+"&units=metric";
+    let data = await fetch(url);
+    data = await data.json();
+    console.log(data)
+    let cityName = data.name;
+    let temp = data.main.temp;
+    let windSpeed = data.wind.speed;
+    let humidity = data.main.humidity;
+    let condition = data.weather[0].main;
+    // alert(condition)
+
+    if(condition=="Clouds") 
+        weatherImage.src = "images/clouds.png";
+    else if(condition == "Clear") 
+        weatherImage.src = "images/clear.png";
+    else if(condition == "Rain") 
+    weatherImage.src = "images/rain.png";
+    else if(condition == "Drizzle") 
+    weatherImage.src = "images/drizzle.png";
+    else if(condition == "Mist") 
+        weatherImage.src = "images/mist.png";
+    else if(condition == "Haze")
+        weatherImage.src = "images/haze.png"
+
+
+    document.querySelector(".cityName").innerHTML = cityName;
+    document.querySelector(".temp").innerHTML = Math.round(temp) + "&nbsp;°C," +"&nbsp" + condition; 
+    document.querySelector("#humidityValue").innerHTML = humidity + "&nbsp;%";
+    document.querySelector("#windSpeedValue").innerHTML = windSpeed + "&nbsp;Km/hr"
+
+    console.log(data.clouds)
+
+}
+
+document.querySelector("#search").addEventListener("click", () => {
+    let mainSection = document.querySelector("#mainSection");
+    mainSection.classList.add("active")
+    let city = document.querySelector("#cityGiven").value;
+    getWeather(city);
+})
+
+
+getWeather();
diff --git a/Weather_App/style.css b/Weather_App/style.css
@@ -0,0 +1,146 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+    color: white;
+
+}
+
+.appName{
+    background-color: transparent;
+    width: 100%;
+    text-align: center;
+    border-radius: 25px 25px 0px 0px;
+    padding: 20px 0px;
+    border-bottom: 2px solid rgb(255, 0, 225);
+}
+main{
+    display: none;
+}
+.active{
+    display: block;
+}
+body{
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(89deg, rgb(24, 24, 24),  rgb(39, 39, 39), rgb(39, 39, 39));
+    height: 100vh;
+    align-items: center;
+    /* overflow-x: scroll; */
+}
+.card{
+    background: linear-gradient(45deg, #0f0c29,#302b63, #24243e);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 60px;
+    width: 38%;
+    /* margin-top: 15px; */
+    box-shadow: 4px 2px 30px black;
+    border-radius: 25px;
+    transition: 0.5s ease;
+}
+input{
+    width: 250px;
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid white;
+    text-align: center;
+    padding: 8px 8px;
+    color: white;
+    font-size: 1.4rem;
+    margin-top: 30px;
+}
+input:focus{
+    outline: none;
+}
+i{
+     font-weight: bold;
+     font-size: 1.6rem;
+     color: white;
+     position: relative;
+     top: 4px;
+     transition: 0.4s ease;
+}
+i:hover{
+    cursor: pointer;
+    transform: scale(1.4);
+}
+.weather{
+    text-align: center;
+    margin: 60px 0px 60px 0px;
+}
+.weather img {
+    height: 100px;
+    width: 100px;
+}
+.weather p{
+    font-size: 1.7rem;
+    font-weight: 600;
+    color: white;
+}
+.weather .temp{
+    font-size: 2.6rem;
+}
+.extras{
+    display: flex;
+    gap: 40px;
+}
+.extras img {
+    height: 33px;
+    width: 33px;
+}
+
+.humidity, .windSpeed {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    font-weight: bold;
+}
+section{
+    margin-left: 10px;
+}
+#humidityValue, #windSpeedValue {
+    font-size: 1.5rem;
+    font-weight: normal;
+    color: white;
+}
+
+
+
+@media only screen and (min-width: 0px) and (max-width: 600px) {
+    .card{
+        width: 100%;
+        border-radius: 0px;
+        /* height: 100%; */
+        height: 100%;
+        padding-bottom: 65px;
+    }
+    #humidityValue, #windSpeedValue {
+        font-size: 1.3rem;
+    }
+    input {
+        width: 240px;
+    }
+    .weather{
+        margin: 110px 0px 110px 0px;
+    }
+    .extras {
+        justify-content: space-between;
+        width: 100%;
+    }
+    .appName{
+        border-radius: 0px;
+        position: relative;
+        bottom: 93px;
+    }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1090px) {
+    .card{
+        width: 80%;
+    }
+}