diff --git a/index.html b/index.html new file mode 100644 index 00000000..1fe1727b --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + + + + + Weather Project + + +
+
+
+

Weather Project

+
+
+
+
+ +
+
+
+
+ + +
+
+
+
+ +
+ +
+ + + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..f54d3a2a --- /dev/null +++ b/main.js @@ -0,0 +1,276 @@ +document.querySelector("#search-btn").addEventListener("click", () => { + const searchInput = document.querySelector(".search-input").value; + fetchData(searchInput); + fetchFiveDay(searchInput); + document.querySelector(".search-input").value = ""; +}); + +async function fetchData(searchInput) { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${searchInput}&APPID=a4396d434551ba845da6a657caa7cd7c&units=imperial`; + + try { + const response = await fetch(url); + if (!response.ok) { + if (response.status === 404) { + alert("Error 404. Please enter a valid city name."); + } else { + alert(`Error: ${response.status}.`); + } + throw new Error(`Response status: ${response.status}`); + } + const data = await response.json(); + const city = data.name; + const temperature = data.main.temp; + const description = data.weather[0].main; + const imageIconNumber = data.weather[0].icon; + const imageUrl = `https://openweathermap.org/img/wn/${imageIconNumber}@2x.png`; + + updateWeather(city, temperature, description, imageUrl); + } catch (error) { + console.log("Error", error); + } +} +const updateWeather = (city, temperature, description, imageUrl) => { + const tempInfo = document.querySelector(".temp-info"); + const tempRounded = Math.round(temperature); + + tempInfo.innerHTML = ""; + + const template = ` +
+
+
+
+
+

${tempRounded}°F

+

${city}

+

${description}

+
+
+
+
+ weather icon +
+
+
+
+
`; + + tempInfo.insertAdjacentHTML("beforeend", template); +}; + +async function fetchFiveDay(searchInput) { + const url = `https://api.openweathermap.org/data/2.5/forecast?q=${searchInput}&appid=a4396d434551ba845da6a657caa7cd7c&units=imperial`; + + try { + const response = await fetch(url); + + if (!response.ok) { + if (response.status === 404) { + alert("Error 404. Please enter a valid city name."); + } else { + alert(`Error: ${response.status}.`); + } + throw new Error(`Response status: ${response.status}`); + } + const dataFiveDay = await response.json(); + + const list = dataFiveDay.list; + + const dayOne = list[7]; + const dayTwo = list[15]; + const dayThree = list[22]; + const dayFour = list[29]; + const dayFive = list[36]; + + const dayOneTemp = dayOne.main.temp; + + const dayOneDescription = dayOne.weather[0].description; + const dayOneImageIconNumber = dayOne.weather[0].icon; + const dayOneImageUrl = `https://openweathermap.org/img/wn/${dayOneImageIconNumber}@2x.png`; + + const dayTwoTemp = dayTwo.main.temp; + const dayTwoDescription = dayTwo.weather[0].description; + const dayTwoImageIconNumber = dayTwo.weather[0].icon; + const dayTwoImageUrl = `https://openweathermap.org/img/wn/${dayTwoImageIconNumber}@2x.png`; + + const dayThreeTemp = dayThree.main.temp; + const dayThreeDescription = dayThree.weather[0].description; + const dayThreeImageIconNumber = dayThree.weather[0].icon; + const dayThreeImageUrl = `https://openweathermap.org/img/wn/${dayThreeImageIconNumber}@2x.png`; + + const dayFourTemp = dayFour.main.temp; + const dayFourDescription = dayFour.weather[0].description; + const dayFourImageIconNumber = dayFour.weather[0].icon; + const dayFourImageUrl = `https://openweathermap.org/img/wn/${dayFourImageIconNumber}@2x.png`; + + const dayFiveTemp = dayFive.main.temp; + const dayFiveDescription = dayFive.weather[0].description; + const dayFiveImageIconNumber = dayFive.weather[0].icon; + const dayFiveImageUrl = `https://openweathermap.org/img/wn/${dayFiveImageIconNumber}@2x.png`; + + updateWeatherTwo( + dayOneTemp, + dayOneDescription, + dayOneImageUrl, + dayTwoTemp, + dayTwoDescription, + dayTwoImageUrl, + dayThreeTemp, + dayThreeDescription, + dayThreeImageUrl, + dayFourTemp, + dayFourDescription, + dayFourImageUrl, + dayFiveTemp, + dayFiveDescription, + dayFiveImageUrl + ); + } catch (error) { + console.log("Error"); + } +} + +const updateWeatherTwo = ( + dayOneTemp, + dayOneDescription, + dayOneImageUrl, + dayTwoTemp, + dayTwoDescription, + dayTwoImageUrl, + dayThreeTemp, + dayThreeDescription, + dayThreeImageUrl, + dayFourTemp, + dayFourDescription, + dayFourImageUrl, + dayFiveTemp, + dayFiveDescription, + dayFiveImageUrl +) => { + const fiveDay = document.querySelector(".five-day"); + + const dayOneTempRound = Math.round(dayOneTemp); + const dayTwoTempRound = Math.round(dayTwoTemp); + const dayThreeTempRound = Math.round(dayThreeTemp); + const dayFourTempRound = Math.round(dayFourTemp); + const dayFiveTempRound = Math.round(dayFiveTemp); + + fiveDay.innerHTML = ""; + + const date = new Date(); + const day = date.getDay(); + + let dayOne; + let dayTwo; + let dayThree; + let dayFour; + let dayFive; + + if (day === 0) { + dayOne = "Sunday"; + dayTwo = "Monday"; + dayThree = "Tuesday"; + dayFour = "Wednesday"; + dayFive = "Thursday"; + } else if (day === 1) { + dayOne = "Monday"; + dayTwo = "Tuesday"; + dayThree = "Wednesday"; + dayFour = "Thursday"; + dayFive = "Friday"; + } else if (day === 2) { + dayOne = "Tuesday"; + dayTwo = "Wednesday"; + dayThree = "Thursday"; + dayFour = "Friday"; + dayFive = "Saturday"; + } else if (day === 3) { + dayOne = "Wednesday"; + dayTwo = "Thursday"; + dayThree = "Friday"; + dayFour = "Saturday"; + dayFive = "Sunday"; + } else if (day === 4) { + dayOne = "Thursday"; + dayTwo = "Friday"; + dayThree = "Saturday"; + dayFour = "Sunday"; + dayFive = "Monday"; + } else if (day === 5) { + dayOne = "Friday"; + dayTwo = "Saturday"; + dayThree = "Sunday"; + dayFour = "Monday"; + dayFive = "Tuesday"; + } else if (day === 6) { + dayOne = "Saturday"; + dayTwo = "Sunday"; + dayThree = "Monday"; + dayFour = "Tuesday"; + dayFive = "Wednesday"; + } else { + console.log("Invalid day. Please enter a number between 0 and 6."); + } + + const template = `
+
+
+ +
+
${dayOneDescription}
+

${dayOneTempRound}°F

+

+ +

+ ${dayOne} +
+
+
+ +
+
${dayTwoDescription}
+

${dayTwoTempRound}°F

+

+ +

+ ${dayTwo} +
+
+
+ +
+
${dayThreeDescription}
+

${dayThreeTempRound}°F

+

+ +

+ ${dayThree} +
+
+
+ +
+
${dayFourDescription}
+

${dayFourTempRound}°F

+

+ +

+ ${dayFour} +
+
+
+ +
+
${dayFiveDescription}
+

${dayFiveTempRound}°F

+

+ +

+ ${dayFive} +
+
+
+
`; + fiveDay.insertAdjacentHTML("beforeend", template); +}; diff --git a/style.css b/style.css new file mode 100644 index 00000000..66550dac --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +.current-weather { + border: none; +}