100% WORK DONE

MKAIF5 · May 12, 2024 · 2b74145 · 2b74145
1 parent cebb497
commit 2b74145
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -14,9 +14,12 @@
     />
   </head>
   <body>
+
     <main>
+      <h1>WEATHER APP</h1>
+      <br>
       <form action="">
-        <input type="text" name="" id="inp" autocomplete="off" />
+        <input placeholder="ENTER ANY CITY NAME" type="text" name="" id="inp" autocomplete="off" />
         <button><i class="fa-solid fa-magnifying-glass"></i></button>
       </form>
 

diff --git a/script.js b/script.js
@@ -6,6 +6,7 @@ let clouds = document.getElementById("clouds");
 let humidity = document.getElementById("humidity");
 let pressure = document.getElementById("pressure");
 let form = document.querySelector("form");
+let main = document.querySelector("main");
 
 form.addEventListener("submit", (event) => {
   event.preventDefault();
@@ -25,9 +26,23 @@ const searchWeather = () => {
       console.log(data);
       if (data.cod == 200) {
         city.querySelector("figcaption").innerHTML = data.name;
-        city.querySelector("img").src = 'https://flagsapi.com/'+data.sys.country+'/shiny/32.png'
-
-        temperature.querySelector("img").src = 'http:openweathermap.org/img/wn/'+data.weather[0].icon+'@4x.png'
-    }
+        city.querySelector("img").src =
+          "https://flagsapi.com/" + data.sys.country + "/shiny/32.png";
+
+        temperature.querySelector("img").src =
+          "http:openweathermap.org/img/wn/" + data.weather[0].icon + "@4x.png";
+        temperature.querySelector("figcaption span").innerText = data.main.temp;
+        description.innerHTML = data.weather[0].description;
+        clouds.innerHTML = data.clouds.all;
+        humidity.innerText = data.main.humidity;
+        pressure.innerText = data.main.pressure;
+      } else {
+        //false
+        main.classList.add("error");
+        setTimeout(() => {
+            main.classList.remove("error")
+        }, 1000);
+      }
+      getInput.value = " ";
     });
 };
diff --git a/style.css b/style.css
@@ -11,7 +11,7 @@ body {
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
-  background-size: cover,contain;
+  background-size: cover, contain;
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -85,24 +85,52 @@ main li {
   color: white;
   border-radius: 10px;
   padding: 20px 10px;
-  background-image: linear-gradient(
-    to bottom,
-    transparent 50%,
-    #0003 50%,
-  );
+  background-image: linear-gradient(to bottom, transparent 50%, #0003 50%);
   font-weight: bold;
   font-size: small;
 }
-main li i{
-    font-size: 2em;
-    display: block !important;
-    margin: 20px 0;
+main li i {
+  font-size: 2em;
+  display: block !important;
+  margin: 20px 0;
 }
 
-main li:nth-child(2){
-background-color: #b56291;
+main li:nth-child(2) {
+  background-color: #b56291;
 }
 
-main li:nth-child(3){
+main li:nth-child(3) {
   background-color: #48567b;
-}
+}
+
+main.error {
+  animation: errorEffect 0.3s Linear 1;
+}
+
+@keyframes errorEffect {
+  0% {
+    transform: translate(10px, 5px);
+  }
+
+  25% {
+    transform: translate(-5px, 0);
+  }
+
+  50% {
+    transform: translate(8px, 2px);
+  }
+
+  75% {
+    transform: translate(-2px, 5px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+h1{
+  font-size: 20px;
+  text-align: center;
+  color: rgb(85, 82, 82);
+}