From a4ed2d14c1c399dbfd1ffd9321d7a8d5c80abf04 Mon Sep 17 00:00:00 2001 From: Kathryn Fabbroni Date: Mon, 16 Dec 2024 20:32:42 -0500 Subject: [PATCH 1/2] Fixed Bugs, needs stylinglinting --- index.html | 44 ++++++++++++ main.js | 199 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 12 ++++ weather.svg | 1 + 4 files changed, 256 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css create mode 100644 weather.svg diff --git a/index.html b/index.html new file mode 100644 index 00000000..966c60fd --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + +
+
+
+
+ weather forecast graphic +

Weather Project

+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..20e1c813 --- /dev/null +++ b/main.js @@ -0,0 +1,199 @@ +const submitBtn = document.querySelector(".search"); +const current = document.querySelector(".current"); +const fiveDay = document.querySelector(".five-day"); +const searchInput = document.querySelector(".city-name") +const clear = ''; +const clouds = ''; +const drizzle = ''; +const thunderStorm = '' +const rain = ''; +const snow = '' +const mist = ''; +let currentResults = []; +let fiveDayResults = []; +let conditionImg; + +submitBtn.addEventListener("click", () => { + document.querySelector(".current").replaceChildren(); + document.querySelector(".five-day").replaceChildren(); + currentResults = []; + fiveDayResults = []; + conditionImg = ""; + + let city = searchInput.value; + if (!city){ + alert("Please enter valid city name.") + } + else {fetchWeather(city)}; + searchInput.value = "" + +}) + +async function fetchWeather(city){ + try { + const currentWeather = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial`); + const currentWeatherData = await currentWeather.json(); + getCurrentWeather(currentWeatherData); + + const fiveDayForecast = await fetch (`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial`); + const fDFData = await fiveDayForecast.json(); + getFiveDayForcast(fDFData); + + } catch (error){ + console.error("Error fetching data"); + alert("Weather inquiry failed.") + } +} + +function getCurrentWeather(currentWeatherData){ + currentResults.push({ + city: currentWeatherData.name, + temp: Math.floor(currentWeatherData.main.temp), + conditions: currentWeatherData.weather[0].main, + }) + renderCurrentWeather(currentResults) +} + +function getFiveDayForcast(fDFData){ + const fiveDayHourly = fDFData.list; + for (let i = 0; i < fiveDayHourly.length; i = i+8){ + fiveDayResults.push(fiveDayHourly[i]) + } + renderFiveDayForecast(fiveDayResults) +} + + +function renderCurrentWeather(currentResults){ + const temp = currentResults[0].city; + const city = currentResults[0].temp + let conditions = currentResults[0].conditions; + + + for (let i = 0; i < currentResults.length; i++){ + if (conditions === "Clouds"){ + conditionImg = clouds; + } else if (conditions === "Rain"){ + conditionImg = rain + } else if (conditions === "Clear"){ + conditionImg = clear + } else if (conditions === "Drizzle"){ + conditionImg = drizzle + } else if (conditions === "Thunderstorm"){conditions = thunderStorm + } else if (conditions === "Snow"){ + conditionImg = snow + } else {conditionImg = mist} + const template = `
+
+
+
+

${temp}°

+

${city}

+

${conditions}

+
+
+
+
+
+
+ ${conditionImg} +
+
+
+
` + + document.querySelector(".current").insertAdjacentHTML('beforeend', template) + } + } + + + function renderFiveDayForecast(fiveDayResults){ + const dailyForecasts = [] + for (let i=0;i
+
+ +
+
+
+

${dailyForecasts[0].day}

+
${dailyForecasts[0].temp}°
+ ${dailyForecasts[0].conditionsImg} +

${dailyForecasts[0].conditions}

+
+
+
+
+
+
+

${dailyForecasts[1].day}

+
${dailyForecasts[1].temp}°
+ ${dailyForecasts[1].conditionsImg} +

${dailyForecasts[1].conditions}

+
+
+
+
+
+
+

${dailyForecasts[2].day}

+
${dailyForecasts[2].temp}°
+ ${dailyForecasts[2].conditionsImg} +

${dailyForecasts[2].conditions}

+
+
+
+
+
+
+

${dailyForecasts[3].day}

+
${dailyForecasts[3].temp}°
+ ${dailyForecasts[3].conditionsImg} +

${dailyForecasts[3].conditions}

+
+
+
+
+
+
+

${dailyForecasts[4].day}

+
${dailyForecasts[3].temp}°
+ ${dailyForecasts[3].conditionsImg} +

${dailyForecasts[3].conditions}

+
+
+
` + +document.querySelector(".five-day").insertAdjacentHTML('beforeend', template) +} + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..b3bc2a4b --- /dev/null +++ b/style.css @@ -0,0 +1,12 @@ +.day { + border: 1px solid black; +} + +.five-day { + width: 100%; + flex-wrap: nowrap; +} + +.weatherImg { + padding-top: 15px; +} diff --git a/weather.svg b/weather.svg new file mode 100644 index 00000000..97166fa2 --- /dev/null +++ b/weather.svg @@ -0,0 +1 @@ + \ No newline at end of file From bc9e7be864255b48583bb18d1915a2af43dce9c2 Mon Sep 17 00:00:00 2001 From: Kathryn Fabbroni Date: Mon, 16 Dec 2024 20:51:26 -0500 Subject: [PATCH 2/2] fixed linting, alignment --- main.js | 309 +++++++++++++++++++++++++++++--------------------------- 1 file changed, 162 insertions(+), 147 deletions(-) diff --git a/main.js b/main.js index 20e1c813..3ec7ea76 100644 --- a/main.js +++ b/main.js @@ -1,13 +1,13 @@ const submitBtn = document.querySelector(".search"); const current = document.querySelector(".current"); const fiveDay = document.querySelector(".five-day"); -const searchInput = document.querySelector(".city-name") +const searchInput = document.querySelector(".city-name"); const clear = ''; const clouds = ''; const drizzle = ''; -const thunderStorm = '' +const thunderStorm = ''; const rain = ''; -const snow = '' +const snow = ''; const mist = ''; let currentResults = []; let fiveDayResults = []; @@ -19,181 +19,196 @@ submitBtn.addEventListener("click", () => { currentResults = []; fiveDayResults = []; conditionImg = ""; - let city = searchInput.value; - if (!city){ - alert("Please enter valid city name.") - } - else {fetchWeather(city)}; - searchInput.value = "" -}) + if (!city) { + alert("Please enter valid city name."); + } else { + fetchWeather(city); + } + + searchInput.value = ""; +}); -async function fetchWeather(city){ +async function fetchWeather(city) { try { - const currentWeather = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial`); + const currentWeather = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial` + ); const currentWeatherData = await currentWeather.json(); getCurrentWeather(currentWeatherData); - const fiveDayForecast = await fetch (`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial`); + const fiveDayForecast = await fetch( + `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial` + ); const fDFData = await fiveDayForecast.json(); getFiveDayForcast(fDFData); - - } catch (error){ + } catch (error) { console.error("Error fetching data"); - alert("Weather inquiry failed.") + alert("Weather inquiry failed."); } } -function getCurrentWeather(currentWeatherData){ +function getCurrentWeather(currentWeatherData) { currentResults.push({ city: currentWeatherData.name, temp: Math.floor(currentWeatherData.main.temp), conditions: currentWeatherData.weather[0].main, - }) - renderCurrentWeather(currentResults) + }); + renderCurrentWeather(currentResults); } -function getFiveDayForcast(fDFData){ +function getFiveDayForcast(fDFData) { const fiveDayHourly = fDFData.list; - for (let i = 0; i < fiveDayHourly.length; i = i+8){ - fiveDayResults.push(fiveDayHourly[i]) + for (let i = 0; i < fiveDayHourly.length; i = i + 8) { + fiveDayResults.push(fiveDayHourly[i]); } - renderFiveDayForecast(fiveDayResults) + renderFiveDayForecast(fiveDayResults); } +function renderCurrentWeather(currentResults) { + const temp = currentResults[0].city; + const city = currentResults[0].temp; + let conditions = currentResults[0].conditions; -function renderCurrentWeather(currentResults){ - const temp = currentResults[0].city; - const city = currentResults[0].temp - let conditions = currentResults[0].conditions; - - - for (let i = 0; i < currentResults.length; i++){ - if (conditions === "Clouds"){ + for (let i = 0; i < currentResults.length; i++) { + if (conditions === "Clouds") { conditionImg = clouds; - } else if (conditions === "Rain"){ - conditionImg = rain - } else if (conditions === "Clear"){ - conditionImg = clear - } else if (conditions === "Drizzle"){ - conditionImg = drizzle - } else if (conditions === "Thunderstorm"){conditions = thunderStorm - } else if (conditions === "Snow"){ - conditionImg = snow - } else {conditionImg = mist} - const template = `
-
-
-
-

${temp}°

-

${city}

-

${conditions}

+ } else if (conditions === "Rain") { + conditionImg = rain; + } else if (conditions === "Clear") { + conditionImg = clear; + } else if (conditions === "Drizzle") { + conditionImg = drizzle; + } else if (conditions === "Thunderstorm") { + conditions = thunderStorm; + } else if (conditions === "Snow") { + conditionImg = snow; + } else { + conditionImg = mist; + } + const template = ` +
+
+
+
+

${temp}°

+

${city}

+

${conditions}

+
+
-
-
-
-
-
- ${conditionImg} +
+
+
+ ${conditionImg} +
+
-
-
-
` +
`; - document.querySelector(".current").insertAdjacentHTML('beforeend', template) - } + document + .querySelector(".current") + .insertAdjacentHTML("beforeend", template); } +} + +function renderFiveDayForecast(fiveDayResults) { + const dailyForecasts = []; + for (let i = 0; i < fiveDayResults.length; i++) { + const dailyConditions = []; + const temp = Math.floor(fiveDayResults[i].main.temp); + const conditions = fiveDayResults[i].weather[0].main; + const date = new Date(fiveDayResults[i].dt_txt).getDay(); + const daysOfWeek = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ]; + const day = daysOfWeek[date]; + dailyConditions.push(fiveDayResults[i].weather[0].main); - - function renderFiveDayForecast(fiveDayResults){ - const dailyForecasts = [] - for (let i=0;i
+ const template = `
- -
-
-
-

${dailyForecasts[0].day}

-
${dailyForecasts[0].temp}°
- ${dailyForecasts[0].conditionsImg} -

${dailyForecasts[0].conditions}

-
-
-
-
-
-
-

${dailyForecasts[1].day}

-
${dailyForecasts[1].temp}°
- ${dailyForecasts[1].conditionsImg} -

${dailyForecasts[1].conditions}

-
-
-
-
-
-
-

${dailyForecasts[2].day}

-
${dailyForecasts[2].temp}°
- ${dailyForecasts[2].conditionsImg} -

${dailyForecasts[2].conditions}

-
-
-
-
-
-
-

${dailyForecasts[3].day}

-
${dailyForecasts[3].temp}°
- ${dailyForecasts[3].conditionsImg} -

${dailyForecasts[3].conditions}

-
-
-
-
-
-
-

${dailyForecasts[4].day}

-
${dailyForecasts[3].temp}°
- ${dailyForecasts[3].conditionsImg} -

${dailyForecasts[3].conditions}

-
-
-
` +
+
+
+

${dailyForecasts[0].day}

+
${dailyForecasts[0].temp}°
+ ${dailyForecasts[0].conditionsImg} +

${dailyForecasts[0].conditions}

+
+
+
+
+
+
+

${dailyForecasts[1].day}

+
${dailyForecasts[1].temp}°
+ ${dailyForecasts[1].conditionsImg} +

${dailyForecasts[1].conditions}

+
+
+
+
+
+
+

${dailyForecasts[2].day}

+
${dailyForecasts[2].temp}°
+ ${dailyForecasts[2].conditionsImg} +

${dailyForecasts[2].conditions}

+
+
+
+
+
+
+

${dailyForecasts[3].day}

+
${dailyForecasts[3].temp}°
+ ${dailyForecasts[3].conditionsImg} +

${dailyForecasts[3].conditions}

+
+
+
+
+
+
+

${dailyForecasts[4].day}

+
${dailyForecasts[3].temp}°
+ ${dailyForecasts[3].conditionsImg} +

${dailyForecasts[3].conditions}

+
+
+
+
`; -document.querySelector(".five-day").insertAdjacentHTML('beforeend', template) + document.querySelector(".five-day").insertAdjacentHTML("beforeend", template); } - \ No newline at end of file