Weather app css

I improved the styling of Weather app. In order to do this, I had written whole css. Some minor modification in html along with adding icons. And put some more content under 'script.js' by adding Images indicating the kind of weather.

Weather App/css/style.css

@@ -1 +1,130 @@
-/* css k naam pe sirf * hai */
+/* css k naam pe sirf * hai */
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    font-family: sans-serif;
+}
+
+body{
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-size: auto;
+    background: url('../Images/homePhoto.jpg')
+}
+
+.container{
+    width: 400px;
+    height: min-content;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 28px;
+    border:1px solid red;
+    opacity: .8;
+}
+
+.search-box{
+    width: 100%;
+    height: min-content;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-box input{
+    width: 84%;
+    font-size: 20px;
+    text-transform: capitalize;
+    color: #000;
+    background-color: #e6f5fb;
+    padding: 12px 16px;
+    border-radius: 14px;
+}
+
+.search-box input::placeholder{
+    color: #000;
+}
+
+.search-box button{
+    width: 46px;
+    height: 46px;
+    background-color: #e6f5fb;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.search-box button:hover{
+    color: #fff;
+    background-color: #ababab;
+}
+.weather-box{
+    margin-block: 20px;
+    text-align: center;
+}
+
+.weather-box .temperature{
+    font-size: 40px;
+    font-weight: 800;
+    position: relative;
+}
+.weather-details{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30px;
+}
+
+.humidity, .wind1{
+    display: flex;
+    align-items: center;
+}
+
+.humidity{
+    margin-left: 20px;
+}
+
+.wind1{
+    margin-right: 20px;
+}
+
+.weather-details i{
+    font-size: 36px;
+}
+
+.weather-details .text{
+    margin-left: 10px;
+    font-size: 16px;
+}
+.text span{
+    font-size: 20px;
+    font-weight: 700;
+}
+
+
+.blank{
+    height:5rem;
+
+}
+.feel{
+    margin-top:5rem;
+    font-size: 1.3rem;
+}
+.tem{
+    margin-top:3rem;
+}
+.feels{
+    font-weight: 700;
+}
+.cel{
+    font-weight: 700;
+}
+.tcel{
+    font-weight: 700;
+    font-size: 2rem;
+}

Weather App/js/script.js

@@ -3,6 +3,8 @@ const sbmt = document.querySelector('#searchbtn');
 const temp = document.querySelector('.temperature');
 const wind = document.querySelector('.wind');
 const vis = document.querySelector('.vis');
+const feels=document.querySelector('.feels');
+const body=document.querySelector('body');
 let city_name;
 sbmt.addEventListener('click', () => {
     city_name = document.querySelector('#cityname').value;
@@ -19,9 +21,34 @@ sbmt.addEventListener('click', () => {
             console.log(apiInfo.current.temp_c);
             console.log(apiInfo.current.feelslike_c);
             vis.innerText = `${apiInfo.current.humidity}`;
-            wind.innerText = `Speed (${apiInfo.current.wind_kph}) kmph`;
-            temp.innerText = `Temperature (${apiInfo.current.temp_c}) feels like (${apiInfo.current.feelslike_c})`;
+            wind.innerText = `${apiInfo.current.wind_kph}`;
+            temp.innerText = `${apiInfo.current.temp_c} ` ;
+            feels.innerText=`${apiInfo.current.feelslike_c} `;
+            switch (apiInfo.current.condition.text) {
+                case 'Partly cloudy':
+                    document.body.style.backgroundImage = 'url("/Weather App/Images/PartlyCloudy.jpg")';
+                    break;
+                case 'Clear':
+                    document.body.style.backgroundImage = 'url("/Weather App/Images/clear.jpg")';
+                    break;
+                case 'Rain':
+                    document.body.style.backgroundImage = 'url("/Weather App/Images/rain.jpg")';
+                    break;
+                case 'Mist':
+                    document.body.style.backgroundImage = 'url("/Weather App/Images/mist.jpg")';
+                    break;
+                case 'Snow':
+                    document.body.style.backgroundImage = 'url("/Weather App/Images/snow.jpg")';
+                    break;
+                    default:
+                        document.body.style.backgroundImage = 'url("/Weather App/Images/PartlyCloudy.jpg")';
+                break;
+
+            }
+
+
+
         }
     }
     weatherXhr.send();
-})
+})

Weather App/weatherapp.html

@@ -5,25 +5,47 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
 <body>
+    <div class="container">
+        <div class="header">
+            <div class="search-box">
     <input type="text" name="cityname" id="cityname" placeholder="Enter your city name">
-    <input type="submit" name="search" id="searchbtn" value="Search">
+    <button type="submit" name="search" id="searchbtn" value="Search"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
+    </div></div>
+
     <div class="weatherInfo">
+        <div class="weather-box">
         <div class="temp">
-            <b>Temperature: </b><span class="temperature"></span>
+            <div><span class="temperature"></span><span class="tcel"><sup>°C</sup></span></div>
+            <div class="feel"><b>feels-like: </b><span class="feels"></span><span class="cel">°C</span></div>
+
+        </div></div>
+        <div class="blank">
+
         </div>
-        <div class="windinfo">
-            <b>Wind: </b> <span class="wind"></span>
-        </div>
-        <div class="visibility">
-            <b>Humidity: </b><span class="vis"></span>
-        </div>
-    </div>
+        <div class="weather-details">
+            <div class="humidity">
+                <i class="fa-sharp fa-solid fa-droplet"></i>
+                <div class="text">
+                    <span id="humidity" class="vis">--</span><span>%</span>
+                    <p>Humidity</p>
+                </div>
+            </div>
+            <div class="wind1">
+                <i class="fa-solid fa-wind"></i>
+                <div class="text ">
+                    <span id="wind-speed" class="wind">--</span><span>Km/H</span>
+                    <p>Wind Speed</p>
+                </div>
+            </div>
+
+    </div></div>
 </body>
 <script src="js/script.js">
 </script>
 
-</html>
+</html>