Weather Application

├── .DS_Store ├── Weather App.png ├── image ├── 404.png ├── clear.png ├── cloud.png ├── mist.png ├── rain.png └── snow.png ├── index.html ├── script.js └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/.DS_Store -------------------------------------------------------------------------------- /Weather App.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/Weather App.png -------------------------------------------------------------------------------- /image/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/image/404.png -------------------------------------------------------------------------------- /image/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/image/clear.png -------------------------------------------------------------------------------- /image/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/image/cloud.png -------------------------------------------------------------------------------- /image/mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/image/mist.png -------------------------------------------------------------------------------- /image/rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/image/rain.png -------------------------------------------------------------------------------- /image/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Weather-Appliication-/b8f2d635741c2e409f0669adc23db9e2de897609/image/snow.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather Application 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 22 | 23 | 24 |

25 |

26 |

Opps! Invalid locatioon : /

27 |

28 | 29 | 30 |

31 | 32 |

33 |

34 |

35 | 36 | 37 |

38 |

39 | 40 |

41 | 42 |

Humidity

43 |

44 |

45 | 46 |

47 | 48 |

49 | 50 |

Wind Speed

51 |

52 |

53 | 54 |

55 | 56 |

57 | 58 | 59 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const contanier = document.querySelector(".container"); 2 | const search = document.querySelector(".searchBox button"); 3 | const weatherBox = document.querySelector(".weatherBox"); 4 | const weatherDetails = document.querySelector(".weatherDetails"); 5 | const error404 = document.querySelector(".notFound"); 6 | 7 | search.addEventListener("click", () => { 8 | // const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKey}&`; 9 | const APIKey = `76c2552d9a278c1fe4f5a1d528275b2e`; 10 | const city = document.querySelector(".searchBox input").value; 11 | 12 | if (city === "") { 13 | } 14 | fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKey}&`) 15 | .then((response) => response.json()) 16 | .then((json) => { 17 | console.log(json) 18 | if (json.cod == 404) { 19 | contanier.style.height = "400px"; 20 | weatherDetails.style.display = "none"; 21 | weatherBox.style.display = "none"; 22 | error404.style.display = "block"; 23 | error404.classList.add("fade-in"); 24 | return; 25 | } 26 | error404.style.display = "none"; 27 | error404.classList.remove("fade-in"); 28 | 29 | const image = document.querySelector(".weatherBox img"); 30 | const temprature = document.querySelector(".weatherBox .temperature"); 31 | const description = document.querySelector(".weatherBox .description"); 32 | const humidity = document.querySelector(".weatherDetails .humidity span"); 33 | const wind = document.querySelector(".weatherDetails .wind span"); 34 | 35 | switch (json.weather[0].main) { 36 | case "clear": 37 | image.src = "./image/clear.png"; 38 | break; 39 | 40 | case "Rain": 41 | image.src = "./image/rain.png"; 42 | break; 43 | 44 | case "Snow": 45 | image.src = "./image/snow.png"; 46 | break; 47 | 48 | case "Clouds": 49 | image.src = "./image/cloud.png"; 50 | break; 51 | 52 | case "Haze": 53 | image.src = "./image/mist.png"; 54 | break; 55 | 56 | case "Mist" : 57 | image.src = "./image/mist.png"; 58 | break; 59 | 60 | default : 61 | image.src = ""; 62 | } 63 | 64 | temprature.innerHTML = `${parseInt(json.main.temp)}°C`; 65 | description.innerHTML = `${json.weather[0].description}` 66 | humidity.innerHTML = `${json.main.humidity}%`; 67 | wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`; 68 | 69 | weatherBox.style.display = ''; 70 | weatherDetails.style.display = ''; 71 | weatherBox.classList.add("fade-in") 72 | weatherDetails.classList.add("fade-in"); 73 | contanier.style.height = "590px"; 74 | 75 | 76 | 77 | 78 | }); 79 | }); 80 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | border: 0; 6 | outline: none; 7 | } 8 | body{ 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #0c2461; 14 | } 15 | .container{ 16 | position: relative; 17 | width: 400px; 18 | height: 105px; 19 | background-color: #ffffff; 20 | padding: 28px 32px; 21 | overflow: hidden; 22 | border-radius: 10px; 23 | font-family: 'roboto', sans-serif; 24 | /* transition: 0.6s ease-out; */ 25 | } 26 | .searchBox{ 27 | width: 100%; 28 | height: min-content; 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | } 33 | .searchBox input{ 34 | color: #0c2461; 35 | width: 80%; 36 | font-size: 24px; 37 | font-weight: 500; 38 | text-transform: uppercase; 39 | padding-left: 32px; 40 | } 41 | 42 | .searchBox input::placeholder{ 43 | font-size: 20px; 44 | font-weight: 500; 45 | color: #0c2461; 46 | text-transform: capitalize; 47 | } 48 | .searchBox button{ 49 | cursor: pointer; 50 | width: 50px; 51 | height: 50px; 52 | color: #0c2461; 53 | background-color: #dff6ff; 54 | border-radius: 50%; 55 | font-size: 22px; 56 | /* transition: 0.4s ease; */ 57 | } 58 | 59 | .searchBox button:hover{ 60 | color: #ffffff; 61 | background-color: #0c2461; 62 | } 63 | 64 | .searchBox i{ 65 | position: absolute; 66 | color: #0c2461; 67 | font-size: 28px; 68 | } 69 | 70 | 71 | .weatherBox{ 72 | text-align: center; 73 | } 74 | 75 | .weatherBox img{ 76 | width: 60%; 77 | margin-top: 30px; 78 | } 79 | 80 | .weatherBox .temperature{ 81 | position: relative; 82 | color: #0c2461; 83 | font-size: 4rem; 84 | font-weight: 800; 85 | margin-top: 30px; 86 | margin-left: -16px; 87 | } 88 | 89 | .weatherBox .temperature span{ 90 | position: relative; 91 | margin-left: 4px; 92 | font-size: 1.5rem; 93 | } 94 | 95 | .weatherBox .description{ 96 | color: #0c2461; 97 | font-size: 22px; 98 | font-weight: 500px; 99 | text-transform: capitalize; 100 | } 101 | 102 | .weatherDetails{ 103 | width: 100%; 104 | display: flex; 105 | justify-content: space-between; 106 | margin-top: 30px; 107 | } 108 | 109 | .weatherDetails .humidity, .weatherDetails .wind { 110 | display: flex; 111 | align-items: center; 112 | width: 50%; 113 | height: 100px; 114 | } 115 | 116 | .weatherDetails .humidity{ 117 | padding-left: 20px; 118 | justify-content: flex-start; 119 | } 120 | 121 | .weatherDetails .wind{ 122 | padding-right: 20px; 123 | justify-content: flex-end; 124 | } 125 | .weatherDetails i { 126 | color: #06283d; 127 | font-size: 26px; 128 | margin-right: 10px; 129 | margin-top: 6px; 130 | } 131 | .weatherDetails span{ 132 | color: #06283d; 133 | font-size: 22px; 134 | font-weight: 500; 135 | } 136 | .weatherDetails p{ 137 | color: #06283d; 138 | font-size: 14px; 139 | font-weight: 500; 140 | } 141 | .notFound{ 142 | width: 100%; 143 | text-align: center; 144 | margin-top: 50%; 145 | scale: 0; 146 | opacity: 0; 147 | display: none; 148 | } 149 | 150 | .notFound img{ 151 | width: 70%; 152 | } 153 | 154 | .notFound p{ 155 | color: #06283d; 156 | font-size: 22px; 157 | font-weight: 500; 158 | margin-top: 12px; 159 | } 160 | 161 | .weatherBox, .weatherDetails { 162 | scale: 0; 163 | opacity: 0; 164 | } 165 | .fade-in{ 166 | animation: 0.5s fadeIn forwards; 167 | animation-delay: 0.5s; 168 | } 169 | @keyframes fadeIn { 170 | to{ 171 | scale: 1; 172 | opacity: 1; 173 | } 174 | } --------------------------------------------------------------------------------