├── images
    ├── clouds.png
    ├── cloudy.png
    ├── foggy.png
    ├── partly.png
    ├── rain.png
    ├── search.png
    ├── storm.png
    ├── sunny.png
    ├── wind.png
    ├── snowflake.png
    └── temperature.png
├── style.css
└── index.html


/images/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/clouds.png


--------------------------------------------------------------------------------
/images/cloudy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/cloudy.png


--------------------------------------------------------------------------------
/images/foggy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/foggy.png


--------------------------------------------------------------------------------
/images/partly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/partly.png


--------------------------------------------------------------------------------
/images/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/rain.png


--------------------------------------------------------------------------------
/images/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/search.png


--------------------------------------------------------------------------------
/images/storm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/storm.png


--------------------------------------------------------------------------------
/images/sunny.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/sunny.png


--------------------------------------------------------------------------------
/images/wind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/wind.png


--------------------------------------------------------------------------------
/images/snowflake.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/snowflake.png


--------------------------------------------------------------------------------
/images/temperature.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Weather-WebApp/HEAD/images/temperature.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | .my-class {
  2 |      
  3 |  background:  linear-gradient(135deg, #00feba , #5b5481);
  4 |   }
  5 |   
  6 | 
  7 | .bubble::after {
  8 |     content: '';
  9 |     border-top-left-radius: 50% 100%;
 10 |     border-top-right-radius: 50% 100%;
 11 |     position: absolute;
 12 |     bottom: 0;
 13 |     z-index: -1;
 14 |     width: 100%;
 15 |     background-color: #0f0f10;
 16 |     height: 85%;
 17 | }
 18 | 
 19 | 
 20 | .cardy{
 21 | 
 22 |     text-align: center;
 23 |     margin: 100px auto 0;
 24 |     padding: 35px 35px;
 25 |     background: linear-gradient(135deg, #00feba , #5b5481);
 26 |     max-width: 470px;
 27 |     width: 50%;
 28 |     border-radius: 30px;
 29 |     
 30 | 
 31 | }
 32 | 
 33 | .row{
 34 |     display: flex;
 35 |     align-items: center;
 36 |     justify-content: space-between;
 37 | }
 38 | 
 39 | .cardy input{
 40 | 
 41 |     flex:1;
 42 |     border-radius: 40px;
 43 |     border-color: transparent;
 44 |     padding: 15px;
 45 |     margin-right: 16px;
 46 | }
 47 | 
 48 | .cardy button{
 49 |     border-radius: 50px;
 50 |     padding: 0px;
 51 |     outline: none;
 52 |     border-color: transparent;
 53 |     align-items: center;
 54 | 
 55 | }
 56 | 
 57 | .cardy button img{
 58 | 
 59 |     border-radius: 50px;
 60 |     padding: 5px;
 61 |     align-items: center;
 62 |     cursor: pointer;
 63 |     height: 50px;
 64 |     width: 50px;
 65 | }
 66 | 
 67 | 
 68 | .details{
 69 |     display: flex;
 70 |     align-items: center;
 71 |     display: none;
 72 | }
 73 | .weather{
 74 | 
 75 |     display: none;
 76 | }
 77 | 
 78 | 
 79 | #temp{
 80 |     margin-top: 20px;
 81 |     height: 100px;
 82 |     width: 100px;
 83 | }
 84 | .error{
 85 |     color: red;
 86 |     float: left;
 87 |     margin-top: 5px;
 88 | }
 89 | 
 90 | #wind , #hum{
 91 |     float: left;
 92 |     height: 60px;
 93 |     width: auto;
 94 |     padding: 0 10px;
 95 |     margin-top: 10px;
 96 | }
 97 | #speed ,#per{
 98 | 
 99 |     font-size: 18px;
100 |     margin-top: 15px;
101 | }
102 | 
103 | .details p{
104 |     float: left;;
105 |     margin-top: -20px;
106 | }
107 | 
108 | #btn:hover{
109 |   
110 |     width: 40px;
111 |     height: 40px;
112 |     background-color: #0f0f10;
113 |     border-radius: 50px;
114 |     
115 | }
116 | 
117 | li:hover{
118 |     top: -0.5px;
119 |     box-shadow: 0 3px rgb(16, 210, 236);
120 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="stylesheet" href="style.css">
  7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  8 |     <title>Weather App</title>
  9 | </head>
 10 | <body class="my-class">
 11 | 
 12 |     <section class="bubble">
 13 |         <nav class="navbar navbar-expand-lg navbar-light bg-light">
 14 |             <a class="navbar-brand" href="#">Weather</a>
 15 |             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 16 |               <span class="navbar-toggler-icon"></span>
 17 |             </button>
 18 |           
 19 |             <div class="collapse navbar-collapse" id="navbarSupportedContent">
 20 |               <ul class="navbar-nav mr-auto">
 21 |                 <li class="nav-item active">
 22 |                   <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 23 |                 </li>
 24 |                 <li class="nav-item active">
 25 |                     <a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
 26 |                   </li>
 27 |                   <li class="nav-item active">
 28 |                     <a class="nav-link" href="#">Contact <span class="sr-only">(current)</span></a>
 29 |                   </li>
 30 |               </ul>
 31 |             </div>
 32 |           </nav>
 33 | 
 34 | 
 35 |         <div class="cardy">
 36 |             <div class="row">
 37 |                 <input type="text" id="search" placeholder="Enter City Name">
 38 |                 <button" id="btn"><img id="searchbtn" src="./images/search.png" alt="Search button"></button>
 39 | 
 40 |                 
 41 |             </div>
 42 |             <div class="error" style="display: none;"> Invalid Response</div>
 43 |             <div class="weather">
 44 |                 <img id="temp" src="./images/sunny.png" alt="Temp">
 45 |                 <b> <h1 id="temperature"></h1></b>
 46 |                 <h2 id="city">City</h2>
 47 |             </div>
 48 | 
 49 |             <div class="details">
 50 |                 <div class="col">
 51 |                     <img id="hum" src="./images/temperature.png" alt="humidity">
 52 |                     <div>
 53 |                         <b><p id="per"></p></b>
 54 |                         <p>Humidity</p>
 55 |                     </div>
 56 |                     
 57 | 
 58 |                 </div>
 59 |                 <div class="col">
 60 |                     <img id="wind" src="./images/wind.png" alt="wind speed">
 61 |                     <div>
 62 |                         <b><p id="speed"></p></b>
 63 |                         <p>Wind Speed</p>
 64 |                     </div>
 65 |                 
 66 |                 </div>
 67 |             </div>
 68 |         </div>
 69 |     </section>
 70 |     <script>
 71 | const weathericon = document.getElementById('temp');
 72 | const Searchbtn = document.getElementById('searchbtn');
 73 | const Searchbox = document.getElementById('search');
 74 | const Citybox = document.getElementById('city');
 75 | const Temp = document.getElementById('temperature');
 76 | const wind = document.getElementById('speed');
 77 | const humidity = document.getElementById('per');
 78 | const geoapiKey = 'n8tDzVkUHDkeLwWpEAQNvw==aNze63gWYnaaYISO';
 79 | const WebapiKey = "33236341ae58b446efb5d79dbd48fc44";
 80 | const Webapiurl = "https://api.openweathermap.org/data/2.5/weather?units=metric&";
 81 | var result;
 82 | var lon;
 83 | var lat;
 84 | 
 85 | 
 86 | 
 87 | 
 88 | Searchbtn.addEventListener('click', (e)=>{
 89 | 
 90 | 
 91 |     var city = document.querySelector('input').value;
 92 |     var geourl = 'https://api.api-ninjas.com/v1/geocoding?city=' + city;
 93 |     var http = new XMLHttpRequest();
 94 |     http.open('GET', geourl, true);
 95 |     http.setRequestHeader('X-Api-Key', geoapiKey);
 96 |     http.setRequestHeader('Content-Type', 'application/json');
 97 |     
 98 |     http.onload = function() {
 99 |     if (http.status === 200) {
100 |         result = JSON.parse(http.responseText);
101 |         lat = result[0].latitude;
102 |         lon = result[0].longitude;
103 |         console.log(result);
104 |         CheckWeather();
105 |     }
106 |     else {
107 |         document.querySelector(".error").style.display="block";
108 |     }
109 |     };
110 | 
111 |     http.onerror = function() {
112 |     console.error('Request failed');
113 |     };
114 |     http.send();
115 | })
116 | 
117 | 
118 | async function CheckWeather() {
119 |     document.querySelector(".error").style.display="none";
120 |     const response = await fetch(Webapiurl + `lat=${lat}&lon=${lon}&appid=${WebapiKey}`);
121 |     const data = await response.json();
122 |     if (response.status === 200) {
123 |         console.log(data)
124 |         document.querySelector(".weather").style.display = "block";
125 |         document.querySelector(".details").style.display = "flex";
126 |         Citybox.innerHTML = data.name;
127 |         Temp.innerText = Math.round(data.main.temp) + "°C";
128 |         wind.innerText = data.wind.speed + " km/h";
129 |         humidity.innerText = data.main.humidity + "%";
130 | 
131 |         if (data.weather[0].main == "Sunny") {
132 |             weathericon.src = "./images/cloudy.png"   
133 |         }
134 |         else if (data.weather[0].main == "Rain") {
135 |             weathericon.src = "./images/rain.png"
136 |         }
137 |         else if (data.weather[0].main == "Drizzle") {
138 |             weathericon.src = "./images/party.png"
139 |         }
140 |         else if (data.weather[0].main == "Thunderstorm") {
141 |             weathericon.src = "./images/strom.png"
142 |         }
143 |         else if (data.weather[0].main == "Snow") {
144 |             weathericon.src = "./images/snowflake.png"
145 |         }
146 |         else if (data.weather[0].main == "Fog") {
147 |             weathericon.src = "./images/foggy.png"
148 |         }
149 |         else if (data.weather[0].main == "Clouds") {
150 |             weathericon.src = "./images/clouds.png"
151 |         }
152 |         else if (data.weather[0].main == "Clear") {
153 |             weathericon.src = "./images/sunny.png"
154 |         }
155 |         else if (data.weather[0].main == "Mist") {
156 |             weathericon.src = "./images/party.png"
157 |         }
158 |         else
159 |         {
160 |             weathericon.src = "./images/wind.png"
161 |         }
162 |         
163 |         
164 |     } else {
165 |         document.querySelector(".error").style.display="block";
166 |     }
167 | }
168 | 
169 | 
170 |     </script>
171 |     
172 | </body>
173 | </html>


--------------------------------------------------------------------------------