├── README.md ├── 404.png ├── clear.png ├── cloud.png ├── mist.png ├── rain.png ├── snow.png ├── index.html ├── index.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # weather-show-page-using-html-css-js -------------------------------------------------------------------------------- /404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/weather-show-page-using-html-css-js/HEAD/404.png -------------------------------------------------------------------------------- /clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/weather-show-page-using-html-css-js/HEAD/clear.png -------------------------------------------------------------------------------- /cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/weather-show-page-using-html-css-js/HEAD/cloud.png -------------------------------------------------------------------------------- /mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/weather-show-page-using-html-css-js/HEAD/mist.png -------------------------------------------------------------------------------- /rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/weather-show-page-using-html-css-js/HEAD/rain.png -------------------------------------------------------------------------------- /snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/weather-show-page-using-html-css-js/HEAD/snow.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WeatherApp 8 | 9 | 10 | 11 |

12 | 18 |

19 |

sorry,location not found!!!

20 |

21 |

22 |

23 |

24 |

25 |

0 ^°C

26 |

Light Rain

27 |

28 |

29 | 30 |

31 | 32 |

33 | 45% 34 |

Humidity

35 |

36 |

37 | 38 |

39 | 40 |

41 | 12Km/Hr 42 |

wind speed

43 |

44 |

45 | 46 | 47 |

48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |

57 | 58 |

59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const inputBox = document.querySelector(`.input-box`); 2 | const searchBtn = document.getElementById(`searchBtn`); 3 | const weather_img = document.querySelector(`.weather-img`); 4 | const description = document.querySelector(`.description`); 5 | const temperature = document.querySelector(`.temperature`); 6 | const humidity = document.getElementById(`humidity`); 7 | const wind_speed = document.getElementById(`wind-speed`); 8 | const location_not_found = document.querySelector(`.location-not-found`); 9 | const weather_body = document.querySelector(`.weather-body`); 10 | 11 | 12 | 13 | async function checkWeather(city) { 14 | const api_key = "33d9c89bd813247536f05eb59ddd5a58"; 15 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`; 16 | const weather_data = await fetch(`${url}`).then(response => response.json()); 17 | 18 | /* if (weather_data.cod === `404`) { 19 | location_not_found.computedStyleMap.display = "flex"; 20 | weather_body.computedStyleMap.display = "none"; 21 | console.log("error"); 22 | return; 23 | } 24 | location_not_found.computedStyleMap.display = "none"; 25 | weather_body.computedStyleMap.display = "flex"; */ 26 | 27 | if (weather_data.cod === '404') { 28 | location_not_found.style.display = 'flex'; 29 | weather_body.style.display = 'none'; 30 | console.log('error'); 31 | return; 32 | } 33 | 34 | location_not_found.style.display = 'none'; 35 | weather_body.style.display = 'flex'; 36 | 37 | 38 | 39 | 40 | 41 | 42 | temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`; 43 | description.innerHTML = `${weather_data.weather[0].description}`; 44 | humidity.innerHTML = `${weather_data.main.humidity}%`; 45 | wind_speed.innerHTML = `${weather_data.wind.speed}Km/Hr`; 46 | 47 | 48 | switch (weather_data.weather[0].main) { 49 | case 'Clouds': 50 | weather_img.src = "cloud.png"; 51 | break; 52 | case 'Clear': 53 | weather_img.src = "clear.png"; 54 | break; 55 | case 'Rain': 56 | weather_img.src = "rain.png"; 57 | break; 58 | case 'Mist': 59 | weather_img.src = "mist.png"; 60 | break; 61 | 62 | case 'Snow': 63 | weather_img.src = "snow.png"; 64 | } 65 | } 66 | 67 | 68 | 69 | 70 | searchBtn.addEventListener('click', () => { 71 | checkWeather(inputBox.value); 72 | }); -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | border: none; 6 | outline: none; 7 | font-family: sans-serif; 8 | } 9 | 10 | body { 11 | min-height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: black; 16 | } 17 | 18 | .container { 19 | width: 400px; 20 | height: min-content; 21 | background-color: white; 22 | border-radius: 12px; 23 | padding: 28px; 24 | 25 | } 26 | 27 | .search-box { 28 | width: 100%; 29 | height: min-content; 30 | display: flex; 31 | justify-content: space-between; 32 | align-items: center; 33 | 34 | } 35 | 36 | .search-box input { 37 | width: 84%; 38 | font-size: 20px; 39 | text-transform: capitalize; 40 | color: black; 41 | background-color: aliceblue; 42 | padding: 12px 16px; 43 | border-radius: 14px; 44 | } 45 | 46 | .search-box::placeholder { 47 | color: black; 48 | } 49 | 50 | .search-box button { 51 | width: 46px; 52 | height: 46px; 53 | background-color: aliceblue; 54 | border-radius: 50%; 55 | cursor: pointer; 56 | font-size: 20px; 57 | 58 | } 59 | 60 | .search-box button:hover { 61 | color: white; 62 | background-color: aquamarine; 63 | 64 | } 65 | 66 | .weather-body img { 67 | width: 60%; 68 | } 69 | 70 | .weather-body { 71 | display: none; 72 | justify-content: center; 73 | align-items: center; 74 | flex-direction: column; 75 | margin-block: 20px; 76 | } 77 | 78 | .wether-box { 79 | margin-block: 20px; 80 | text-align: center; 81 | 82 | } 83 | 84 | .weather-box .temperature { 85 | font-size: 40px; 86 | font-weight: 800; 87 | position: relative; 88 | } 89 | 90 | .wether-box .temperature sup { 91 | font-size: 20px; 92 | position: absolute; 93 | font-weight: 600; 94 | } 95 | 96 | .weather-box .description { 97 | font-size: 20px; 98 | font-weight: 700; 99 | text-transform: capitalize; 100 | } 101 | 102 | .weather-details { 103 | width: 100%; 104 | display: flex; 105 | justify-content: space-between; 106 | margin-top: 30px; 107 | 108 | } 109 | 110 | .humidity, 111 | .wind { 112 | display: flex; 113 | align-items: center; 114 | 115 | } 116 | 117 | .humidity { 118 | margin-left: 20px; 119 | 120 | } 121 | 122 | .wind { 123 | margin-right: 20px; 124 | } 125 | 126 | .weather-details i { 127 | font-size: 36px; 128 | 129 | } 130 | 131 | .weather-details .text { 132 | margin-left: 10px; 133 | font-size: 16px; 134 | 135 | } 136 | 137 | .text span { 138 | font-size: 20px; 139 | font-weight: 700; 140 | 141 | } 142 | 143 | .location-not-found { 144 | margin-top: 20px; 145 | display: none; 146 | align-items: center; 147 | justify-content: center; 148 | flex-direction: column; 149 | } 150 | 151 | .location-not-found img { 152 | width: 80%; 153 | } 154 | 155 | .location-not-found h1 { 156 | font-size: 20px; 157 | color: azure; 158 | margin-block-end: 15px; 159 | 160 | } --------------------------------------------------------------------------------