diff --git a/cypress/integration/test-app.js b/cypress/integration/test-app.js index 7d3b967..d698903 100644 --- a/cypress/integration/test-app.js +++ b/cypress/integration/test-app.js @@ -152,8 +152,8 @@ describe("Add message handling for imperfect location matching", () => { .click(); cy.wait("@fetchSeattle"); cy.get(`main article h2`).contains("Seattle"); - cy.get(`main article p`).contains("Area"); - cy.get(`main article p`).contains("Seattle"); + cy.get(`main article p`).contains("Area"); + cy.get(`main article p`).contains("Seattle"); }); it("Can have the different entry name and area name", () => { cy.intercept("GET", "https://wttr.in/mamaroneck*", { @@ -167,8 +167,8 @@ describe("Add message handling for imperfect location matching", () => { cy.wait("@fetchMamaroneck"); cy.get(`main article h2`).contains("mamaroneck"); - cy.get(`main article p`).contains("Nearest Area"); - cy.get(`main article p`).contains("Orienta"); + cy.get(`main article p`).contains("Nearest Area"); + cy.get(`main article p`).contains("Orienta"); }); }); @@ -184,14 +184,14 @@ describe("Add icon based on chance data", () => { .click(); cy.wait("@fetchMamaroneck"); cy.get(`main article p`).contains("Chance of Sunshine"); - cy.get(`main article p`).contains("53"); + cy.get(`main article p`).contains("53"); }); it("Has a Chance of Rain p tag with appropriate data", () => { - cy.get(`main article p`).contains("Chance of Rain"); - cy.get(`main article p`).contains("0"); + cy.get(`main article p`).contains("Chance of Rain"); + cy.get(`main article p`).contains("0"); }); it("Has a Chance of Snow p tag with appropriate data", () => { - cy.get(`main article p`).contains("Chance of Snow"); + cy.get(`main article p`).contains("Chance of Snow"); }); // sunny icon diff --git a/index.html b/index.html index e69de29..e7948b2 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + + + + Weather App + + +
+

Weather App

+ +
+ +
+

Choose a location to view the weather.

+
+ +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..1403fcc --- /dev/null +++ b/main.js @@ -0,0 +1,119 @@ +let weatherForcast = document.querySelector("article"); +let weatherImg = document.createElement('img'); +let form = document.querySelector('form'); +form.addEventListener("submit", (event) => { + event.preventDefault(); + document.querySelector("main p").hidden = true; + let searchedLocation = event.target.location.value; + event.target.location.value = '' + fetch(`https://wttr.in/${searchedLocation}?format=j1`) + .then((result) => { + return result.json(); + }) + .then((json) => { + let feelsLike = getWeatherReport(weatherForcast, json, searchedLocation); + let ul = document.querySelector("ul"); + let previousSearch = document.createElement("li"); + let a = document.createElement("a"); + a.textContent = searchedLocation; + a.href = `https://wttr.in/${searchedLocation}?format=j1`; + previousSearch.textContent = feelsLike; + previousSearch.prepend(a); + ul.append(previousSearch); + console.log(json); + let previous = document.querySelector("aside.previous p"); + previous.hidden = true; + a.addEventListener("click", (event) => { + event.preventDefault(); + getWeatherReport(weatherForcast, json, searchedLocation); + }); + }) + .catch((error) => { + console.log(error); + }); +}); +let getWeatherReport = (weatherForcast, json, searchedLocation) => { + weatherForcast.innerHTML = ""; + let location = document.createElement("h2"); + location.textContent = searchedLocation; +weatherForcast.append(location); +let area = json.nearest_area[0].areaName[0].value; +let areaInfo = document.createElement("p"); +weatherForcast.append(areaInfo); + if (area.toLowerCase() === searchedLocation.toLowerCase()) { + areaInfo.textContent = `Area: ${area}`; + } else { + areaInfo.textContent = `Nearest Area: ${area}`; + } + let region = json.nearest_area[0].region[0].value; +regionInfo = document.createElement("p"); +regionInfo.textContent = region; +weatherForcast.append(regionInfo); +let country = json.nearest_area[0].country[0].value; +countryInfo = document.createElement("p"); +countryInfo.textContent = country; + weatherForcast.append(countryInfo); +let feelsLike = ` Currently feels like ${json.current_condition[0].FeelsLikeF} °F`; + tempInfo = document.createElement("p"); + tempInfo.textContent = feelsLike; +weatherForcast.append(tempInfo); +let chanceOfSunlight = json.weather[0].hourly[0].chanceofsunshine; +let chanceOfRain = json.weather[0].hourly[0].chanceofrain; +let chanceOfSnow = json.weather[0].hourly[0].chanceofsnow; +let sunlight = document.createElement("p"); +sunlight.textContent = `Chance of Sunshine ${chanceOfSunlight}%`; +weatherForcast.append(sunlight); +let rainfall = document.createElement("p"); +rainfall.textContent = `Chance of Rain ${chanceOfRain}%`; +weatherForcast.append(rainfall); + let snowfall = document.createElement("p"); + snowfall.textContent = `Chance of Snow ${chanceOfSnow}%`; + weatherForcast.append(snowfall); + for (let i = 0; i < json.weather[0].hourly.length; i++) { + if (Number(json.weather[0].hourly[i].chanceofsunshine) > 50) { + weatherImg.src = "./assets/icons8-summer.gif"; + weatherImg.alt = "sun"; + } + if (Number(json.weather[0].hourly[i].chanceofrain) > 50) { + weatherImg.src = "./assets/icons8-torrential-rain.gif"; + ("https://img.freepik.com/free-photo/rainy-day-icon-3d-render-illustration-style_516190-319.jpg?w=996"); + weatherImg.alt = "rain"; + } + if (Number(json.weather[0].hourly[i].chanceofsnow) > 50) { + weatherImg.src = "./assets/icons8-light-snow.gif"; + weatherImg.alt = "snow"; + } + } + weatherForcast.prepend(weatherImg); + let articles = document.querySelectorAll("aside article"); + let forecast = ["Today ", "Tomorrow ", "Day After Tomorrow "]; + for (let i = 0; i < articles.length; i++) { + articles[i].innerHTML = " "; + let days = document.createElement("p"); + days.textContent = forecast[i]; + let avgTemp = document.createElement("p"); + avgTemp.textContent = `Average Temperature: ${json.weather[i].avgtempF} °F`; + let maxTemp = document.createElement("p"); + maxTemp.textContent = `Max Temperature: ${json.weather[i].maxtempF} °F`; + let minTemp = document.createElement("p"); + minTemp.textContent = `Min Temperature: ${json.weather[i].mintempF} °F`; + articles[i].append(days, avgTemp, maxTemp, minTemp); + } + return feelsLike; +}; +let conAside = document.querySelector("aside.aside form"); +conAside.addEventListener("submit", (event) => { + event.preventDefault(); + let temp = event.target.querySelector("#temp-to-convert").value; + let conType = event.target.querySelectorAll(".temperature"); + console.log("This is type:", conType); + if (conType[0].checked) { + let celcius = ((temp - 32) * 5) / 9; + event.target.querySelector("h4").textContent = `${celcius.toFixed(2)} °C`; + } else if (conType[1].checked) { + let fahreinheit = (temp * 9) / 5 + 32; + event.target.querySelector("h4").textContent = `${fahreinheit.toFixed( + 2 + )} °F`; + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..d2b1e18 --- /dev/null +++ b/style.css @@ -0,0 +1,69 @@ +.header{ + grid-area: header; + background-image: url("https://www.2ec.com.au/wp-content/uploads/sites/4/2022/08/MicrosoftTeams-image-21.jpg"); + background-size: 1000px; + background-position: bottom; + border-bottom: 5px solid black; + justify-content: center; + padding: 10px; +} + +.previous { + display: inline-block; + grid-area: previous; + border: 1px solid black; + justify-content: center; + padding: 10px; +} +.days article{ + grid-area: days; + border: 2px solid black; + justify-content: center; + padding: 10px; + + } +.aside { + grid-area: aside; + border: 1px solid black; + justify-content: center; + padding: 10px; +} + +.main { + grid-area: main; + border: 5px solid black; + justify-content: center; + padding: 10px solid black;} + +body { + background: rgb(33,29,136); + background: linear-gradient(94deg, rgba(33,29,136,1) 0%, rgba(29,129,253,1) 50%, rgba(69,246,252,1) 100%); display: grid; + grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: auto auto auto; + grid-template-areas: + "header header header" + "aside main previous" + "days days days"; + justify-content: center; + color: white; +text-shadow: -1px 1px 2px #000, + 1px 1px 2px #000, + 1px -1px 0 #000, + -1px -1px 0 #000; + text-align: center; + font-family: sans-serif; + border: 10px solid black; + justify-content: center; +} + +img { + border:solid black 5px; +} + +aside aside form{ +justify-content: center; +padding: 10px solid black; +} +article { + border: 2px solid black; +} \ No newline at end of file