new style added

app.js

@@ -1,6 +1,7 @@
 const searchBox = document.querySelector(".search-box input");
 const searchBtn = document.querySelector("#search");
 const weatherIcon = document.querySelector(".weather-icon");
+const appContainer = document.querySelector(".app-container");
 
 
 const weatherApiKey = 'b2fa3271ab55c9c76e1b2a2d1afd0478';
@@ -29,13 +30,13 @@ async function checkWeather(city){
 
     if(response.status === 404){
         document.querySelector(".error").style.display = 'block';
-        document.querySelector(".weather").style.display = "none";
-        document.getElementById("city-img").src = "images/weather.jpg";
+        document.querySelector(".weather").style.visibility = "hidden";
+        appContainer.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/weather.jpg")`;
     }
     else{
         setTimeout(()=>{
             updateData(data);
-        },200)
+        },500)
     }
 }
 
@@ -92,7 +93,7 @@ async function generateImage(city){
 
     const img = data.results[0].urls.full;
 
-    document.getElementById("city-img").src = img;
+    appContainer.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(${img})`;
 
 }
 

index.html

@@ -16,8 +16,6 @@
     </div>
 
 
-    <img src="" alt="" id="city-img">
-
     <div class="app-container">
         <div class="search-box">
             <input type="text" name="city" id="city-input" placeholder="Enter City Name" spellcheck="false">

readme.md

@@ -4,7 +4,7 @@
 
 ## Overview
 
-This is a simple weather app project built using HTML, CSS, and JavaScript also fully Responsive. The app allows users to input a city and retrieves real-time weather data, including temperature, humidity, and wind speed, for that city. Additionally, the app displays dynamic city images that change with each search, enhancing the user experience.
+This is a simple weather app project built using HTML, CSS, and JavaScript also fully Responsive. The app allows users to input a city and retrieves real-time weather data, including temperature, humidity, and wind speed, for that city. Additionally, the app displays dynamic city images that change with each search, enhancing the user experience (not all the time although).
 
 The project was developed as a beginner-level JavaScript project and serves as a practical application of basic web development concepts.
 

style.css

@@ -12,26 +12,22 @@
 html, body{
     height: 100%;
     width: 100%;
-    background-color: #222;
+    background: hsla(296, 100%, 6%, 1);
+    background: linear-gradient(135deg, rgb(0, 15, 31) 72%, rgb(6, 35, 116) 100%);
     overflow: hidden;
     font-family: "poppins", sans-serif;
-}
-
-#city-img{
-    width: 60%;
-    height: 100vh;
-    object-fit: cover;
-    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .app-container{
     position: absolute;
-    top: 30px;
-    right: 150px;
     width: 90%;
     max-width: 470px;
-    background: linear-gradient(135deg, hsla(354, 95%, 24%, 1) 0%, hsla(234, 70%, 24%, 1) 100%);
-    margin: 100px auto 0; /********/
+    /* background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("images/weather.jpg"); */
+    background-size: cover;
+    background-position: center;
     border-radius: 20px;
     padding: 40px 35px;
     text-align: center;
@@ -136,35 +132,10 @@ html, body{
 
 
 @media screen and (max-width:1000px) {
-    body{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    #city-img{
-        width: 100%;
-        height: 100vh;
-    }
-    .app-container{
-        position: absolute;
-        top: 10px;
-        right: 100px;
-        width: 90%;
-        max-width: 470px;
-    }
+
 }
 
 @media screen and (max-width:550px) {
-    body{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    #city-img{
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
     .app-container{
         top: 50px;
         left: 20px;