WEATHER APP

├── README.md ├── Index.html ├── Style.css └── Script.js /README.md: -------------------------------------------------------------------------------- 1 | ***Overview*** 2 | 3 | This Weather Forecasting App provides real-time weather information for any location. Users can view current weather conditions and forecasts, leveraging data from a weather API. 4 | 5 | ***Features*** 6 | 7 | ***Real-Time Weather Data:-*** Fetches current weather and forecasts. 8 | 9 | ***Search Functionality:-*** Allows users to search by location. 10 | 11 | ***Responsive Design:-*** Ensures usability on various devices. 12 | 13 | ***Technologies Used*** 14 | HTML 15 | CSS 16 | JavaScript 17 | Weather API 18 | -------------------------------------------------------------------------------- /Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WEATHER APP 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 |

23 |

24 |

Current Temperature:

25 |
26 |

Max Temperature:

27 |

Min Temperature :

28 |

Wind :

29 |

Clouds :

30 |

Sunrise:

31 |

Sunset :

32 |

33 | 34 | 41 |

42 |

43 | 44 |

45 | 46 | 47 |

48 | 49 |

50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .navbar { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | padding: 10px 20px; 8 | background-color: rgb(98, 162, 247); 9 | color: white; 10 | } 11 | 12 | .navbar form { 13 | display: flex; 14 | } 15 | 16 | 17 | #text { 18 | width: 200px; 19 | padding: 8px; 20 | border: 1px solid #ddd; 21 | border-radius: 5px; 22 | outline: none; 23 | margin-right: 10px; 24 | background-color: #f1f1f1; 25 | } 26 | 27 | #submit { 28 | padding: 8px 16px; 29 | border: none; 30 | outline: none; 31 | border-radius: 5px; 32 | background-color: #4CAF50; 33 | color: white; 34 | cursor: pointer; 35 | } 36 | 37 | #submit:hover { 38 | background-color: #3e8e41; 39 | } 40 | 41 | /* Main Content */ 42 | 43 | .main { 44 | display: grid; 45 | grid-template-columns: repeat(2, 1fr); 46 | gap: 20px; 47 | margin: auto; 48 | margin-top: 3rem; 49 | background-color: white; 50 | color: black; 51 | border-radius: 10px; 52 | padding: 20px; 53 | background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxc-O8FHC61NiY-S50B384zka_mQ2GwRr1uMME08U39OiAtvM9aO1QdXGyh6w4I7smDus&usqp=CAU"); 54 | 55 | background-position: center; 56 | background-repeat: no-repeat; 57 | background-size: cover; 58 | } 59 | 60 | #weather-info, #map { 61 | background-color: #f5f5f5; 62 | border-radius: 5px; 63 | padding: 15px; 64 | } 65 | .container{ 66 | font-size: 1.2rem; 67 | font-weight: bold; 68 | } 69 | .container p { 70 | font-size: 1rem; 71 | font-weight: bold; 72 | } 73 | 74 | 75 | 76 | .forecast-container { 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | margin: auto; 81 | margin-top: 1rem; 82 | gap: 20px; 83 | text-align: center; 84 | background-image: linear-gradient(rgb(91, 91, 236), white); 85 | width: 100%; 86 | color: black; 87 | border-radius: 10px; 88 | background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxc-O8FHC61NiY-S50B384zka_mQ2GwRr1uMME08U39OiAtvM9aO1QdXGyh6w4I7smDus&usqp=CAU"); 89 | background-size: cover; 90 | background-position: center; 91 | 92 | font-size: 1.2rem; 93 | font-weight: bold; 94 | } 95 | 96 | 97 | .forecast-container h2 { 98 | text-align: center; 99 | color: rgb(236, 198, 128); 100 | text-decoration: underline; 101 | font-weight: 750; 102 | font-family: Arial, Helvetica, sans-serif; 103 | } 104 | 105 | .forecast-card { 106 | background-color: white; 107 | border-radius: 5px; 108 | padding: 10px; 109 | text-align: center; 110 | } 111 | .forecast-card p { 112 | font-size: 1rem; 113 | font-weight: bold; 114 | } 115 | .forecast-card img { 116 | margin: 5px auto; 117 | } 118 | 119 | 120 | 121 | body { 122 | background-color: black; 123 | color: white; 124 | } 125 | 126 | iframe { 127 | border-radius: 5px; 128 | } 129 | -------------------------------------------------------------------------------- /Script.js: -------------------------------------------------------------------------------- 1 | let form = document.querySelector("form"); 2 | let container = document.getElementById("container"); 3 | let forecastBox = document.querySelector(".forecast-container"); 4 | 5 | let kelvinToCelsius = (tempInKelvin) => tempInKelvin - 273.15; 6 | 7 | form.addEventListener('submit', async (e) => { 8 | e.preventDefault(); 9 | let input = document.querySelector("input"); 10 | 11 | let iframe = document.querySelector("iframe"); 12 | iframe.src = `https://www.google.com/maps?q=${input.value}&t=&z=13&ie=UTF8&iwloc=&output=embed`; 13 | 14 | getData(input.value); 15 | getForecast(input.value); 16 | }); 17 | 18 | let getData = async (inp) => { 19 | let url = `https://api.openweathermap.org/data/2.5/weather?q=${inp}&appid=a8cd1c623d1b64e07a2899f69190d11e`; 20 | let response = await fetch(url); 21 | let data = await response.json(); 22 | 23 | displayWeather(data); 24 | }; 25 | 26 | let getForecast = async (inp1) => { 27 | let url = `https://api.openweathermap.org/data/2.5/forecast?q=${inp1}&appid=a8cd1c623d1b64e07a2899f69190d11e`; 28 | let response = await fetch(url); 29 | let data = await response.json(); 30 | 31 | displayForecast(data); 32 | }; 33 | 34 | let displayWeather = (data) => { 35 | let temp = document.getElementById("temp"); 36 | temp.innerHTML = `Current Temperature : ${kelvinToCelsius(data.main.temp).toFixed(1)}°C`; 37 | 38 | let maxTemp = document.getElementById("max-temp"); 39 | maxTemp.innerHTML = `Max Temperature☀️ : ${kelvinToCelsius(data.main.temp_max).toFixed(1)}°C`; 40 | 41 | let minTemp = document.getElementById("min-temp"); 42 | minTemp.innerHTML = `Min Temperature🌤️ : ${kelvinToCelsius(data.main.temp_min).toFixed(1)}°C`; 43 | 44 | let wind = document.getElementById("wind"); 45 | wind.innerHTML = ` Wind 💨: { speed : ${data.wind.speed}, deg : ${data.wind.deg}}`; 46 | 47 | let clouds = document.getElementById("clouds"); 48 | clouds.innerHTML = `Clouds ⛅🌨️: {all : ${data.clouds.all}}%`; 49 | 50 | let sunrise = document.getElementById("sunrise"); 51 | sunrise.innerHTML = `Sunrise🌅 : ${new Date(data.sys.sunrise * 1000)}`; 52 | 53 | let sunset = document.getElementById("sunset"); 54 | sunset.innerHTML = `Sunset🌇 : ${new Date(data.sys.sunset * 1000)}`; 55 | }; 56 | 57 | let displayForecast = (data) => { 58 | let forecastHTML = ''; 59 | 60 | 61 | let forecastByDate = {}; 62 | data.list.forEach(item => { 63 | const date = new Date(item.dt * 1000).toLocaleDateString(); 64 | if (!forecastByDate[date]) { 65 | forecastByDate[date] = item; 66 | } 67 | }); 68 | 69 | 70 | let dates = Object.keys(forecastByDate).slice(0, 5); 71 | 72 | 73 | dates.forEach(date => { 74 | const item = forecastByDate[date]; 75 | const iconCode = item.weather[0].icon; 76 | const iconUrl = `http://openweathermap.org/img/wn/${iconCode}.png`; 77 | 78 | forecastHTML += ` 79 |

80 |

${date}

81 |

82 |

83 |

Time: ${new Date(item.dt * 1000).toLocaleTimeString()}

84 |

85 |

Temperature: ${kelvinToCelsius(item.main.temp).toFixed(1)}°C

86 |

Weather: ${item.weather[0].description}

87 |

88 |

89 |

90 | `; 91 | }); 92 | 93 | forecastBox.innerHTML = forecastHTML; 94 | }; --------------------------------------------------------------------------------