Merge pull request #12 from mdsiaofficial/main

Project 19 added feat: added Weather App UI and functionality
Armanidrisi · Apr 16, 2024 · 5324afe · 5324afe
2 parents 72e9b2c + b5ca014
commit 5324afe
Show file tree

Hide file tree

Showing 15 changed files with 286 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -98,11 +98,16 @@ This repository contains a collection of frontend projects.Each project is built
         <td>Background Remover App</td>
         <td><a href="./project-17_remove_Signature_bg">Click Here</a></td>
     </tr>
-     <tr>
+    <tr>
         <td>18</td>
         <td>Toggle Dark & Light Mode</td>
         <td><a href="./project-18_toggle_dark_light_mode">Click Here</a></td>
     </tr>
+    <tr>
+        <td>19</td>
+        <td>Weather App</td>
+        <td><a href="./project-19_weather_app">Click Here</a></td>
+    </tr>
 </table>
 
 

diff --git a/project-19_weather_app/img/clear.png b/project-19_weather_app/img/clear.png
diff --git a/project-19_weather_app/img/clouds.png b/project-19_weather_app/img/clouds.png
diff --git a/project-19_weather_app/img/demo.png b/project-19_weather_app/img/demo.png
diff --git a/project-19_weather_app/img/drizzle.png b/project-19_weather_app/img/drizzle.png
diff --git a/project-19_weather_app/img/haze.png b/project-19_weather_app/img/haze.png
diff --git a/project-19_weather_app/img/humidity.png b/project-19_weather_app/img/humidity.png
diff --git a/project-19_weather_app/img/mist.png b/project-19_weather_app/img/mist.png
diff --git a/project-19_weather_app/img/rain.png b/project-19_weather_app/img/rain.png
diff --git a/project-19_weather_app/img/search.png b/project-19_weather_app/img/search.png
diff --git a/project-19_weather_app/img/snow.png b/project-19_weather_app/img/snow.png
diff --git a/project-19_weather_app/img/wind.png b/project-19_weather_app/img/wind.png
diff --git a/project-19_weather_app/index.html b/project-19_weather_app/index.html
@@ -0,0 +1,74 @@
+<!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">
+
+</head>
+<body>
+
+    <div class="AppCard">
+
+        <!-- input -->
+        <div class="title">
+            <h1>Weather App</h1>
+            <p>Check Weather searching <span>City Name</span></p>
+        </div>
+        <div class="searchArea">
+
+            <input id="impTXT" type="text" placeholder="enter city name" spellcheck="false">
+            <!-- search button -->
+            <button type="submit"><img src="img/search.png"></button>
+
+        </div>
+        <!--         
+        <div>
+            <h4 class="error">Error Finding the city...Search Again</h4>
+        </div>
+         -->
+
+        <!-- display -->
+        <div class="WeatherDisplay">
+
+            <img src="" class="Weather-Icon">
+
+            <h1 class="temperature"></h1>
+            <h2 class="city"></h2>
+
+            <!-- details here -->
+            <div class="detailsInfo">
+                <div class="column">
+
+                    <img src="img/humidity.png">
+                    <div>
+                        <p class="humidity"></p>
+                        <p>Humidity</p>
+                    </div>
+
+                </div>
+
+                <div class="column">
+
+                    <img src="img/wind.png">
+                    <div>
+                        <p class="wind"></p>
+                        <p>Wind</p>
+                    </div>
+
+                </div>
+
+
+            </div>
+        </div>
+
+
+
+    </div>
+
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/project-19_weather_app/script.js b/project-19_weather_app/script.js
@@ -0,0 +1,71 @@
+"use strict";
+
+const apiURL = `https://api.openweathermap.org/data/2.5/weather?units=metric`;
+const appKey = `&appid=1dc02c2cda3d32eda98eede7405d0e42`;
+
+const searchField = document.querySelector(".searchArea input");
+const searchBtn = document.querySelector(".searchArea button");
+const weatherIcon = document.querySelector(".Weather-Icon");
+
+
+function city() {
+	const inputName = document.querySelector("#impTXT");
+	const city = `&q=${inputName.value}`;
+	checkWeather(city);
+}
+
+// document.querySelector(".WeatherDisplay").style.display = "block";
+
+
+async function checkWeather(city) {
+	const response = await fetch(apiURL + appKey + city);
+	var data = await response.json();
+	console.log(data);
+
+	document.querySelector(".city").innerHTML = data.name;
+	document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°C";
+	document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
+	document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";
+
+	if (data.weather[0].main == "Clouds") {
+		weatherIcon.src = "img/clouds.png";
+	}
+
+	if (data.weather[0].main == "Mist") {
+		weatherIcon.src = "img/Mist.png";
+	}
+
+	if (data.weather[0].main == "Rain") {
+		weatherIcon.src = "img/rain.png";
+	}
+
+	if (data.weather[0].main == "Drizzle") {
+		weatherIcon.src = "img/drizzle.png";
+	}
+
+	if (data.weather[0].main == "Clear") {
+		weatherIcon.src = "img/clear.png";
+	}
+
+	if (data.weather[0].main == "Snow") {
+		weatherIcon.src = "img/snow.png";
+	}
+
+	if (data.weather[0].main == "Haze") {
+		weatherIcon.src = "img/haze.png";
+	}
+
+	document.querySelector(".WeatherDisplay").style.display = "block";
+};
+
+searchBtn.addEventListener("click", city); // addEventlistener e funcion call korle () lage na
+
+
+// const input = document.getElementById("impTXT");
+searchField.addEventListener("keypress", function (event) {
+	if (event.key === "Enter") {
+		event.preventDefault();
+		city();
+	}
+});
+
diff --git a/project-19_weather_app/style.css b/project-19_weather_app/style.css
@@ -0,0 +1,135 @@
+
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background: #222;
+}
+.AppCard{
+    width: 90%;
+    max-width: 470px;
+    background: linear-gradient(200deg, #fe9000, #8a5469);
+    color: #fefffe;
+    margin: 100px auto 0;
+
+    border-radius: 15px;
+
+    padding: 40px 40px;
+
+    text-align: center;
+    border: 1px solid white;
+}
+
+.searchArea{
+
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+
+}
+
+.searchArea input{
+    border: 0;
+    outline: 0;
+    background: #35282d;
+    color: #7a7171;
+
+    padding: 15px 25px;
+
+    height: 60px;
+
+    border-radius: 30px;
+    flex: 1;
+    /* This property is used to make the input field flexible, 
+    so that it can adjust its size according to the available space. */
+
+    margin-right: 16px;
+    font-size: large;
+
+
+}
+
+
+.Weather-Icon{
+
+    width: 170px;
+    margin-top: 30px;
+}
+
+.searchArea button{
+    border: 0;
+    outline: 0;
+    background: #35282d;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+}
+.searchArea button img{
+    width: 20px;
+    padding-top: 5px;
+}
+
+.WeatherDisplay h1{
+    font-size: 80px;
+    font-weight: 500;
+}
+.WeatherDisplay h2{
+    font-size: 45px;
+    font-weight: 400;
+    margin-top: -10px;
+}
+
+
+.detailsInfo{
+    display: flex;
+
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    margin-top: 50px;
+
+}
+
+.column{
+    display: flex;
+    align-items: center;
+    text-align: left;
+}
+
+.column img{
+    width: 50px;
+    margin-right: 10px;
+}
+
+.humidity, .wind{
+    font-size: larger;
+    margin-top: -5px;
+}
+
+
+.WeatherDisplay{
+    display: none;
+}
+
+.title{
+    margin-top: -30px;
+    margin-bottom: 15px;
+}
+
+.title p{
+    font-size: 18px;
+}
+
+.title p span{
+    color:#35282d;
+    font-weight: 800;
+}
+
+