diff --git a/background-weather-app.jpeg b/background-weather-app.jpeg
new file mode 100644
index 0000000..6036ece
Binary files /dev/null and b/background-weather-app.jpeg differ
diff --git a/index.html b/index.html
index f20552a..bc49edf 100644
--- 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
index e69de29..5076245 100644
--- 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));
+    })
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 9c5500d..039aa56 100644
--- 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 {
