Update

ShahirJalal · Oct 14, 2022 · bd7166f · bd7166f
1 parent 6cf4397
commit bd7166f
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 44 deletions.
diff --git a/Flag.png b/Flag.png
diff --git a/barometer.png b/barometer.png
diff --git a/humidity.png b/humidity.png
diff --git a/index.html b/index.html
@@ -4,25 +4,76 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
     <title>Weather App</title>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <div class="content">
+        <div class="flag">
+            <img id="flagIcon" src="./Flag.png">
+        </div>
 
-    <div class="container">
-        <div class="display">
-            <h2 id="city-name">City Name:</h2>
-            <p class="item" id="cloud-condition">Cloud Condition:</p>
-            <p class="item" id="temperature">Temperature:</p>
-            <p class="item" id="wind-speed">Wind Speed:</p>
+        <div class="header">
+            <h1 id="cityOutput"></h1>
+            <div id="localtime">
+                <span id="hours">Local Time: 23</span>
+                <span id="minutes">:59</span>
+                <span id="seconds">:59</span>
+                <span id="session">AM</span>
+                <span>&nbsp&nbsp</span>
+                <span id="date">13</span>
+                <span id="month">/04</span>
+                <span id="year">/2022</span>
+            </div>
         </div>
 
-        <div class="input-box">
-            <input type="text" placeholder="Enter any city..." id="input">
-            <button id="add">Submit</button>
+        <div class="body">
+            <div class="column_1">
+
+                <div class="temperature">
+                    <h1 id="temp"></h1>
+                    <p class="minMax"></p>
+                </div>
+
+                <div class="pressure">
+                    <img id="barometer" src="./barometer.png">
+                    <p id="press"></p>
+                </div>
+
+                <div class="humidity">
+                    <img id="droplet" src="./humidity.png">
+                    <p id="humid"></p>
+                </div>
+            </div>
+
+            <div class="column_2">
+
+                <div class="icon">
+                    <div id="divIcon">
+                        <img id="wIcon" src="./weather-icon-png-11064.png">
+                    </div>
+                    <br>
+                    <p id="description"></p>
+                </div>
+
+                <div class="feelsLike">
+                    <p class="fL"></p>
+                </div>
+
+                <div class="wind">
+                    <img id="windIcon" src="./wind.png">
+                    <p class="windspeed">130km/h</p>
+                </div>
+            </div>
         </div>
-    </div>
 
-    <script src="/script.js"></script>
+        <div class="form">
+            <input type="text" placeholder="Enter your city..." id="input">
+            <br>
+            <br>
+            <input type="submit" name="check" id="add">
+        </div>
+    </div>
+    <script src="./script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -4,6 +4,34 @@ const btn = document.querySelector("#add");
 apiKey = "75adaa7cc887057971ff05253eefb707"
 
 btn.addEventListener("click", function(){
-    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apiKey)
+    fetch('https://api.openweathermap.org/data/2.5/weather?q='+cityInput.value+'&appid='+apiKey)
     .then(response => response.json())
+    .then(res => {
+
+        let city = res['name']
+        let country = res['sys']['country']
+        let temperature = res['main']['temp']
+        let minTemp = res['main']['temp_min']
+        let maxTemp = res['main']['temp_max']
+        let pressure = res['main']['pressure']
+        let humidity = res['main']['humidity']
+        let icon = res['weather']['0']['icon']
+        let description = res['weather']['0']['description']
+        let feelsLike = res['main']['feels_like']
+        let windSpeed = res['wind']['speed']
+
+        function conversion(val) {
+            return (val - 273).toFixed(1)
+        }
+
+        document.querySelector("#cityOutput").innerHTML = `${city}, ${country}`
+        document.querySelector("#temp").innerHTML = `${conversion(temperature)} &#186 C`
+        document.querySelector(".minMax").innerHTML = `&#8595${conversion(minTemp)}&#186 C &nbsp &#8593${conversion(maxTemp)}&#186 C`
+        document.querySelector("#press").innerHTML = `${pressure} hPa`
+        document.querySelector("#humid").innerHTML = `${humidity} %`
+        document.querySelector("#description").innerHTML = `${description}`
+        document.querySelector(".fL").innerHTML = `Feels like: ${conversion(feelsLike)}&#186 C`
+        document.querySelector(".windspeed").innerHTML = `${windSpeed}km/h`
+
+    })
 })
diff --git a/style.css b/style.css
@@ -1,49 +1,66 @@
-*{
-    background-color: #3e3e42;
-    height: auto;
-    width: auto;
+body {
+    background-color: black;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
-.container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+/* div {
+    border: 1px solid white
+} */
+
+.content {
+    display: flex;
+    flex-direction: column;
+    inline-size: 800px;
+    margin: 0 auto;
+    /* border: 1px solid white; */
+    /* background-color: darkblue; */
+    margin-top: 5%;
 }
 
-.display #city-name {
-    border: 1px white solid;
-    margin-top: 0%;
-    background-color: aqua;
+#cityOutput {
+    font-size: 50px;
 }
 
-.display {
-    border: 1px white solid;
-    background-color: aquamarine;
+#flagIcon {
+    width: 40px;
 }
 
-.display .item{
-    background-color: aquamarine;
+.body {
+    display: flex;
+    margin: 0 auto;
 }
 
-.input-box {
-    border: 1px white solid;
-    text-align: center;
+#barometer, #droplet, #windIcon {
+    width: 30px;
+    height: 30px;
+}
+
+#wIcon {
+    width: 100px;
+    height: 100px;
 }
 
+.pressure p, .humidity p, .wind p {
+    display: inline;
+}
+
+.flag {
+    margin: 0 auto;
+}
 
-.input-box #input {
-    background-color: white;
+.header {
+    margin: 0 auto;
 }
 
-#add {
-    background-color: white;
-    border: none;
-    cursor: pointer;
+.form {
+    margin: 0 auto;
+    text-align: center;
 }
 
-#add:hover {
-    background-color: gray;
-    border: none;
-    cursor: pointer;
+#temp {
+    font-size: 91px;
+    /* border: 1px solid white; */
+    margin-bottom: 0;
+    margin-top: 0;
 }
diff --git a/weather-icon-png-11064.png b/weather-icon-png-11064.png
diff --git a/weather_app.js b/weather_app.js
diff --git a/wind.png b/wind.png