├── README.md
├── app.js
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # Weather-App-JS
2 | A weather app developed using javascript with weather API
3 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | let weather = {
 2 |   apikey: "5bc2b4f40acfffa046713955a4370d52",
 3 |   fetchWeather: function (city) {
 4 |     fetch(
 5 |       "https://api.openweathermap.org/data/2.5/weather?q=" +
 6 |         city +
 7 |         "&units=metric&appid=" +
 8 |         this.apikey
 9 |     )
10 |       .then((response) => {
11 |         return response.json();
12 |       })
13 |       .then((data) => this.displayWeather(data));
14 |   },
15 |   displayWeather: function (data) {
16 |     if (data.cod == "200") {
17 |       getweather(data);
18 |     }
19 |     else if (data.cod == "400") {
20 |       noinput(data);
21 |     }
22 |     else{
23 |       citynotfound(data);
24 |     }
25 |   },
26 |   search: function () {
27 |     this.fetchWeather(document.querySelector(".search-bar").value);
28 |   },
29 | };
30 | 
31 | document.querySelector(".search button").addEventListener("click", function () {
32 |   weather.search();
33 | });
34 | document
35 |   .querySelector(".search-bar")
36 |   .addEventListener("keyup", function (event) {
37 |     if (event.key == "Enter") weather.search();
38 |   });
39 | weather.fetchWeather("Greater Noida");
40 | 
41 | 
42 | function getweather(data){
43 |   const { name } = data;
44 |   const { description, icon } = data.weather[0];
45 |   const { temp, humidity } = data.main;
46 |   const { speed } = data.wind;
47 |   // console.log(name, icon, description, temp, humidity, speed);
48 |   document.querySelector(".location-city").innerHTML = "Weather in " + name;
49 |   document.querySelector(".icon").style.backgroundImage = "url(https://openweathermap.org/img/wn/" + icon + "@2x.png)";
50 |   document.querySelector(".temperature-degree").innerHTML = temp + "°C";
51 |   document.querySelector(".weather-description").innerHTML = description;
52 |   document.querySelector(".humidity").innerHTML = "Humidity: " + humidity + "%";
53 |   document.querySelector(".wind").innerHTML = "Wind: " + speed + "Km/hr";
54 |   document.querySelector(".weather ").classList.remove("loading");
55 |   document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + description + "')";
56 |   document.querySelector(".temperature-degree").style.position = "relative";
57 |   document.querySelector(".temperature-degree").style.visibility = "visible";
58 |   document.querySelector(".humidity").style.position = "relative";
59 |   document.querySelector(".humidity").style.visibility = "visible";
60 |   document.querySelector(".wind").style.position = "relative";
61 |   document.querySelector(".wind").style.visibility = "visible";
62 | }
63 | 
64 | function noinput(data){
65 |   document.querySelector(".location-city").innerHTML = "Something went wrong!";
66 |   document.querySelector(".temperature-degree").style.position = "absolute";
67 |   document.querySelector(".temperature-degree").style.visibility = "hidden";
68 |   document.querySelector(".humidity").style.position = "absolute";
69 |   document.querySelector(".humidity").style.visibility = "hidden";
70 |   document.querySelector(".wind").style.position = "absolute";
71 |   document.querySelector(".wind").style.visibility = "hidden";
72 | }
73 | 
74 | function citynotfound(data){
75 |   document.querySelector(".location-city").innerHTML = "City not found";
76 |   document.querySelector(".temperature-degree").style.position = "absolute";
77 |   document.querySelector(".temperature-degree").style.visibility = "hidden";
78 |   document.querySelector(".humidity").style.position = "absolute";
79 |   document.querySelector(".humidity").style.visibility = "hidden";
80 |   document.querySelector(".wind").style.position = "absolute";
81 |   document.querySelector(".wind").style.visibility = "hidden";
82 | }
83 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <script src="./app.js" defer></script>
 5 |     <script
 6 |       defer
 7 |       src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"
 8 |       integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP"
 9 |       crossorigin="anonymous"
10 |     ></script>
11 |     <link rel="stylesheet" href="./style.css" />
12 | 
13 |     <meta charset="UTF-8" />
14 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
15 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16 |     <title>Weather App</title>
17 |   </head>
18 |   <body>
19 |     <div class="card">
20 |       <div class="search">
21 |         <input class="search-bar" placeholder="City name" />
22 |         <button>
23 |           <svg
24 |             stroke="currentColor"
25 |             fill="currentColor"
26 |             stroke-width="0"
27 |             viewBox="0 0 1024 1024"
28 |             height="1.5em"
29 |             width="1.5em"
30 |             xmlns="http://www.w3.org/2000/svg"
31 |           >
32 |             <path
33 |               d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
34 |             ></path>
35 |           </svg>
36 |         </button>
37 |       </div>
38 |       <div class="weather loading">
39 |         <div class="location">
40 |           <h1 class="location-city">Weather in Noida</h1>
41 |           <span id="icon" class="icon"></span>
42 |         </div>
43 |         <div class="temperature">
44 |           <h2 class="temperature-degree">29<span>°C</span></h2>
45 |           <div class="weather-description" style="text-transform: capitalize;">Cloudy</div>
46 |           <div class="humidity">Humidity: 60%</div>
47 |           <div class="wind">Wind: 12km/hr</div>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | body {
  7 |   width: 100%;
  8 |   max-height: 100vh;
  9 |   display: flex;
 10 |   justify-content: center;
 11 |   align-items: center;
 12 |   height: 100vh;
 13 |   margin: 0;
 14 |   font-family: "Open Sans", sans-serif;
 15 |   background: linear-gradient(#d3c9c2, #657452);
 16 |   background-repeat: no-repeat;
 17 |   background-size: cover;
 18 |   font-size: 120%;
 19 | }
 20 | 
 21 | .search {
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 |   flex-direction: row;
 26 | }
 27 | 
 28 | button {
 29 |   margin: 0.5em;
 30 |   border-radius: 50%;
 31 |   border: none;
 32 |   height: 44px;
 33 |   width: 44px;
 34 |   outline: none;
 35 |   background: #9e96b9;
 36 |   color: white;
 37 |   cursor: pointer;
 38 |   transition: 0.2s ease-in-out;
 39 |   margin-left: auto;
 40 | }
 41 | 
 42 | input.search-bar {
 43 |   border: none;
 44 |   outline: none;
 45 |   padding: 0.4em 1em;
 46 |   border-radius: 24px;
 47 |   background: #7c7c7c2b;
 48 |   color: white;
 49 |   font-family: inherit;
 50 |   font-size: 2em;
 51 |   margin-right: auto;
 52 |   width: calc(100% - 50px);
 53 | }
 54 | 
 55 | .weather.loading {
 56 |   visibility: hidden;
 57 |   max-height: 20px;
 58 |   position: relative;
 59 | }
 60 | 
 61 | .weather.loading::after {
 62 |   visibility: visible;
 63 |   content: "Loading...";
 64 |   color: aliceblue;
 65 |   position: absolute;
 66 |   top: 0;
 67 |   left: 20px;
 68 | }
 69 | 
 70 | .location {
 71 |   display: flex;
 72 |   align-items: center;
 73 |   margin: 10px 0;
 74 | }
 75 | 
 76 | .card {
 77 |   background: #000000d0;
 78 |   color: white;
 79 |   padding: 2em;
 80 |   border-radius: 30px;
 81 |   width: 100%;
 82 |   max-width: 420px;
 83 |   margin: 1em;
 84 | }
 85 | input.search-bar {
 86 |   border: none;
 87 |   outline: none;
 88 |   padding: 0.4em 1em;
 89 |   border-radius: 24px;
 90 |   background: #7c7c7c2b;
 91 |   color: white;
 92 |   font-family: inherit;
 93 |   font-size: 105%;
 94 |   width: calc(100% - 100px);
 95 | }
 96 | button:hover {
 97 |   background: #7c7c7c6b;
 98 | }
 99 | 
100 | h1.temp {
101 |   margin: 0;
102 |   margin-bottom: 0.4em;
103 | }
104 | 
105 | .description {
106 |   text-transform: capitalize;
107 |   margin-left: 8px;
108 | }
109 | 
110 | .icon{
111 |   background: url(https://openweathermap.org/img/wn/04n.png) no-repeat center center/cover;
112 |   display: flex;
113 |   justify-content: center;
114 |   align-items: center;
115 |   margin: 0 10px;
116 | }
117 | 
118 | .icon::before{
119 |   content: '';
120 |   width: 100px;
121 |   height: 100px;
122 | }
123 | 
124 | @media only screen and (max-width: 600px) {
125 |   body {
126 |     background-image: "url('https://unsplash.com/photos/MF9Wy1NA55I')";
127 |   }
128 | }
129 | 


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