75% WORK DONE

MKAIF5 · May 12, 2024 · 1a5f76c · 1a5f76c
1 parent b5b1d01
commit 1a5f76c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/background-weather-app.jpeg b/background-weather-app.jpeg
diff --git a/index.html b/index.html
@@ -16,16 +16,16 @@
   <body>
     <main>
       <form action="">
-        <input type="text" name="" id="" autocomplete="off" />
+        <input type="text" name="" id="inp" autocomplete="off" />
         <button><i class="fa-solid fa-magnifying-glass"></i></button>
       </form>
 
       <section class="result">
-        <figure class="name">
-          <figcaption>london</figcaption>
+        <figure class="name" id="city">
+          <figcaption>London</figcaption>
           <img src="https://flagsapi.com/GB/shiny/32.png" alt="">
         </figure>
-        <figure class="temperature">
+        <figure class="temperature" id="temp">
           <img src="http:openweathermap.org/img/wn/10d@4x.png" alt="">
           <figcaption>
             <span>31</span>
@@ -39,17 +39,17 @@
           <li>
             <span>Clouds</span>
             <i class="fa-solid fa-cloud"></i>
-            <span>98</span>%
+            <span id="clouds">98</span>%
           </li>
           <li>
-            <span>Humitidity</span>
+            <span>Humidity</span>
             <i class="fa-solid fa-droplet"></i>
-            <span>55</span>%
+            <span id="humidity">55</span>%
           </li>
           <li>
             <span>Pressure</span>
             <i class="fa-solid fa-gauge"></i>
-            <span>1001</span>hpa
+            <span id="pressure">1001</span>hpa
           </li>
         </ul>
       </section>

diff --git a/script.js b/script.js
@@ -0,0 +1,26 @@
+let getInput = document.getElementById("inp");
+let city = document.getElementById("city");
+let temperature = document.getElementById("temp");
+let description = document.querySelector(".description");
+let clouds = document.getElementById("clouds");
+let humidity = document.getElementById("humidity");
+let pressure = document.getElementById("pressure");
+let form = document.querySelector("form");
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  if (getInput.value != "") {
+    searchWeather();
+  }
+});
+
+let id = "9505fd1df737e20152fbd78cdb289b6a"
+let url = "https://api.openweathermap.org/data/2.5/weather?units=metric&appid" + id
+
+const searchWeather = () =>{
+    fetch(url )
+    .then(responsive => responsive.json())
+    .then(data =>{
+        console.log((data));
+    })
+}
diff --git a/style.css b/style.css
@@ -6,12 +6,14 @@
 body {
   margin: 0;
   min-height: 100vh;
+  background-image: url(./background-weather-app.jpeg);
   display: flex;
   justify-content: center;
   align-items: center;
-  background-image: url("https://images.pexels.com/photos/1118873/pexels-photo-1118873.jpeg?cs=srgb&dl=pexels-jplenio-1118873.jpg&fm=jpg");
   font-family: sans-serif;
-  background-size: cover;
+  background-size: cover,contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 main {