From 7ec7aed0593db1b14a840e59395f122b206c5e3c Mon Sep 17 00:00:00 2001 From: Jose Padolina Date: Sat, 20 Apr 2024 03:16:48 -0700 Subject: [PATCH] add weather app --- index.html | 25 +++++++++++++++++++++++++ main.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 14 ++++++++++++++ 3 files changed, 93 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..41605e73 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + Weather App + + + + +
+

Weather App

+
+ + +
+
+
+
+ + + + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..cd2a617a --- /dev/null +++ b/main.js @@ -0,0 +1,54 @@ +$(document).ready(function () { + const apiKey = '9a8359cd2576df91c6c91e74bb622c7a'; + const baseUrl = 'http://api.openweathermap.org/data/2.5'; + const weatherInfo = $('#weatherInfo'); + const forecastInfo = $('#forecastInfo'); + let city = ''; + + $('#searchBtn').click(function () { + city = $('#cityInput').val().trim(); + if (city === '') { + alert('Please enter a city name'); + return; + } + + fetchCurrentWeather(); + fetchForecast(); + }); + + function fetchCurrentWeather() { + const currentWeatherUrl = `${baseUrl}/weather?q=${city}&appid=${apiKey}&units=imperial`; + fetch(currentWeatherUrl) + .then(response => response.json()) + .then(data => { + const { name, main, weather } = data; + const currentWeatherHtml = ` +

Current Weather in ${name}

+

Temperature: ${main.temp}°F

+

Conditions: ${weather[0].description}

+ + `; + weatherInfo.html(currentWeatherHtml); + }) +} + +function fetchForecast() { + const forecastUrl = `${baseUrl}/forecast?q=${city}&appid=${apiKey}&units=imperial`; + fetch(forecastUrl) + .then(response => response.json()) + .then(data => { + const forecast = data.list.filter(item => item.dt_txt.includes('12:00:00')); + const forecastHtml = forecast.map(item => ` +
+
+
${new Date(item.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' })}
+

Temperature: ${item.main.temp}°F

+

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

+ +
+
+ `).join(''); + forecastInfo.html(`

5-Day Forecast

${forecastHtml}`); + }) +} +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..ce741b23 --- /dev/null +++ b/style.css @@ -0,0 +1,14 @@ +body { + background-color: #f8f9fa; +} + +.center-content { + display: flex; + flex-direction: column; + align-items: center; +} + +#forecastInfo { + display: flex; + flex-direction: row; +} \ No newline at end of file