diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/cypress.config.js b/cypress.config.js new file mode 100644 index 0000000..ccb67cb --- /dev/null +++ b/cypress.config.js @@ -0,0 +1,11 @@ +const { defineConfig } = require('cypress') + +module.exports = defineConfig({ + e2e: { + // We've imported your old cypress plugins here. + // You may want to clean this up later by importing these. + setupNodeEvents(on, config) { + return require('./cypress/plugins/index.js')(on, config) + }, + }, +}) diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 0967ef4..0000000 --- a/cypress.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/cypress/integration/test-app.js b/cypress/e2e/test-app.cy.js similarity index 100% rename from cypress/integration/test-app.js rename to cypress/e2e/test-app.cy.js diff --git a/cypress/support/index.js b/cypress/support/e2e.js similarity index 100% rename from cypress/support/index.js rename to cypress/support/e2e.js diff --git a/index.html b/index.html index e69de29..760bb10 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,95 @@ + + + + + + + Document + + + + +
+

Weather App

+
+ + + +
+
+ +
+

Choose a location to view the weather.

+ +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..8e886d9 --- /dev/null +++ b/main.js @@ -0,0 +1,147 @@ +document.querySelector("form").addEventListener("submit", (event) => { + event.preventDefault(); + let inputSearch = document.getElementById("user-input").value; + // console.log(inputSearch[0].current_condition); + + console.log( + `https://v3.wttr.in/${inputSearch}?format=j1`, + "HELLO FROM THE OTHER SIDE" + ); + fetch(`https://v3.wttr.in/${event.target.location.value}?format=j1`) + .then((result) => { + console.log("Fetch was successful"); + return result.json(); + }) + .then((weather) => { + //article for current search + let current = document.getElementById("current"); + //event.target.weather_submit.value; + // console.log(current); + document.getElementById("current"); + + let currentHeading = document.createElement("h2"); + currentHeading.innerHTML = `${weather.nearest_area[0].areaName[0].value}`; + + //area for current search w. html + let searchArea = document.createElement("p"); + // searchArea with HTML + searchArea.innerHTML = `Area: ${weather.nearest_area[0].areaName[0].value}`; + + //create region element + let searchRegion = document.createElement("p"); + //region innerHTML + searchRegion.innerHTML = `Region: ${weather.nearest_area[0].region[0].value}`; + + // create country HTML + let searchCounty = document.createElement("p"); + searchCounty.innerHTML = `Country: ${weather.nearest_area[0].country[0].value}`; + + //Create currently & currently inner html + let searchCurrentF = document.createElement("p"); + searchCurrentF.innerHTML = ` Currently: Feels Like ${weather.weather[2].mintempF}° F`; + + //joininga all elements in current article + current.append( + currentHeading, + searchArea, + searchRegion, + searchCounty, + searchCurrentF + ); + + //-----adding CHANCE OF SUN + RAIN + SNOW----- + + //creating chance of sun element + adding text + let chanceOfSun = document.createElement("p"); + chanceOfSun.innerHTML = ` Chance of Sunshine: ${weather.weather[0].hourly[0].chanceofsunshine}`; + console.log(chanceOfSun.innerHTML); + //creating chance of rain element + adding text + let chanceOfRain = document.createElement("p"); + chanceOfRain.innerHTML = ` Chance of Rain: ${weather.weather[0].hourly[0].chanceofrain}`; + + //creating chance of snow element + adding text + let chanceOfSnow = document.createElement("p"); + chanceOfSnow.innerHTML = ` Chance of Snow: ${weather.weather[0].hourly[0].chanceofsnow}`; + + //adding all those to first article, + current.append(chanceOfSun, chanceOfRain, chanceOfSnow); + //-------Aritcle for Today section --- + + //gets article for today section + let article = document.getElementById("today"); + //adds an header for "today" + adding text + let articleHeader = document.createElement("h2"); + articleHeader.innerHTML = ` Today `; + + // creating TodayAvgTemp + inner HTML + let todayAvgTemp = document.createElement("p"); + todayAvgTemp.innerHTML = ` Average Temperature: ${weather.weather[0].avgtempF}°F`; + + // creating TodayMaxTemp + inner HTML + let todayMaxTemp = document.createElement("p"); + todayMaxTemp.innerHTML = ` Max Temperature: ${weather.weather[0].maxtempF}°F`; + + // creating TodayMinTemp + inner HTML + let todayMinTemp = document.createElement("p"); + todayMinTemp.innerHTML = ` Max Temperature: ${weather.weather[0].mintempF}°F`; + + // joining all lelemnts for today section + article.append(articleHeader, todayAvgTemp, todayMaxTemp, todayMinTemp); + + //--------------Article for TOMORROW----------- + //gets article for TOMORROW section + let tomorrow = document.getElementById("tomorrow"); + + //adds an header for "TOMORROW" + adding text + let tomorrowHeader = document.createElement("h2"); + tomorrowHeader.innerHTML = `Tomorrow`; + + // creating TomorrowAvgTemp + inner HTML + let tmmAvgTemp = document.createElement("p"); + tmmAvgTemp.innerHTML = ` Average Temperature: ${weather.weather[1].avgtempF}°F`; + + // creating TomorrowMaxTemp + inner HTML + let tmmMaxTemp = document.createElement("p"); + tmmMaxTemp.innerHTML = ` Max Temperature: ${weather.weather[1].maxtempF}°F`; + + // creating TomorrowMinTemp + inner HTML + let tmmMinTemp = document.createElement("p"); + tmmMinTemp.innerHTML = ` Max Temperature: ${weather.weather[1].mintempF}°F`; + + // joining all elements into TOMORROW'S article + tomorrow.append(tomorrowHeader, tmmAvgTemp, tmmMaxTemp, tmmMinTemp); + + //--------------DAY AFTER TOMOROW----------- + + //gets article for TOMORROW section + let dayAfter = document.getElementById("day-after"); + //adds an header for "day after" + adding text + let dayAferHeading = document.createElement("h2"); + dayAferHeading.innerHTML = `Day After Tomorrow`; + + // creating dayAfterAvgTemp + inner HTML + let dayAfteryAvgTemp = document.createElement("p"); + dayAfteryAvgTemp.innerHTML = ` Average Temperature: ${weather.weather[2].avgtempF}°F`; + + // creating dayAfterMaxTemp + inner HTML + let dayAfterMaxTemp = document.createElement("p"); + dayAfterMaxTemp.innerHTML = ` Max Temperature: ${weather.weather[2].maxtempF}°F`; + + // creating dayAfterMinTemp + inner HTML + let dayAfterMinTemp = document.createElement("p"); + dayAfterMinTemp.innerHTML = ` Max Temperature: ${weather.weather[2].mintempF}°F`; + // joining all element into day after article + dayAfter.append( + dayAferHeading, + dayAfteryAvgTemp, + dayAfterMaxTemp, + dayAfterMinTemp + ); + //------Creatung Aside ---- + console.log(weather, "Finally properly formatted weather"); + }); +}); + +// const inputSearch = document.querySelector(input[(type = "text")]); + +// console.log(inputSearch); diff --git a/main1.js b/main1.js new file mode 100644 index 0000000..696247f --- /dev/null +++ b/main1.js @@ -0,0 +1,147 @@ +const weatherForm = document.getElementById("weather-form"); +const input = document.querySelector("#user-input"); + +// Main Weather Display +const mainImage = document.querySelector("img"); +const main = document.querySelector(".main"); +const startMessage = document.querySelector("#start-message"); +const current = document.querySelector("#current"); +const locationHeader = document.querySelector("#location-header"); +const mainDisplay = document.querySelector("#main-display"); +const area = document.querySelector("#area"); +const region = document.querySelector("#region"); +const country = document.querySelector("#country"); +const currently = document.querySelector("#currently"); +const sunshine = document.querySelector("#sunshine"); +const rain = document.querySelector("#rain"); +const snow = document.querySelector("#snow"); + +//Previous List Variables +const previous = document.querySelector(".previous"); +const list = document.querySelector("#list"); +const previousMessage = document.querySelector("#previous-start"); + +// Today Weather Section +const today = document.querySelector("#today"); +const todayAvgTemp = document.querySelector("#today-avg"); +const todayMaxTemp = document.querySelector("#today-max"); +const todayMinTemp = document.querySelector("#today-min"); + +// Tomorrow Weather Section +const tomorrow = document.querySelector("#tomorrow"); +const tomorrowAvgTemp = document.querySelector("#tomorrow-avg"); +const tomorrowMaxTemp = document.querySelector("#tomorrow-max"); +const tomorrowMinTemp = document.querySelector("#tomorrow-min"); + +// Day After Weather Section +const dayAfter = document.querySelector("#day-after"); +const dayAfterAvgTemp = document.querySelector("#after-avg"); +const dayAfterMaxTemp = document.querySelector("#after-max"); +const dayAfterMinTemp = document.querySelector("#after-min"); + +//conversion tool +const ConvertSide = document.querySelector("#aside"); +const convert = document.querySelector("#convert"); +const tempToConvert = document.querySelector("#temp-to-convert"); +const toC = document.querySelector("#to-c"); +const toF = document.querySelector("#to-f"); +const converted = document.querySelector("#converted"); + +weatherForm.addEventListener("submit", (event) => { + event.preventDefault(); + + let inputSearch = input.value; + let city = inputSearch; + //getting weather data from API + fetch(`https://v3.wttr.in/${inputSearch}?format=j1`) + .then((res) => res.json()) + .then((res) => { + let weather = res; + console.log(weather, res); + + startMessage.style.display = "none"; + previousMessage.style.display = "none"; + // startMessage.classList.add("hidden"); + mainDisplay.removeAttribute("hidden"); + convert.removeAttribute("hidden"); + + locationHeader.innerHTML = city; + + if (city != `${weather.nearest_area[0].areaName[0].value}`) { + area.innerHTML = `Nearest Area: ${weather.nearest_area[0].areaName[0].value}`; + } else { + area.innerHTML = `Area: ${weather.nearest_area[0].areaName[0].value}`; + } + + locationHeader.innerHTML = `${weather.nearest_area[0].areaName[0].value}`; + region.innerHTML = `Region: ${weather.nearest_area[0].region[0].value}`; + country.innerHTML = `Country: ${weather.nearest_area[0].country[0].value}`; + currently.innerHTML = ` Currently: Feels Like ${weather.weather[2].mintempF}° F`; + sunshine.innerHTML = ` Chance of Sunshine: ${weather.weather[0].hourly[0].chanceofsunshine}`; + rain.innerHTML = ` Chance of Rain: ${weather.weather[0].hourly[0].chanceofrain}`; + snow.innerHTML = ` Chance of Snow: ${weather.weather[0].hourly[0].chanceofsnow}`; + console.log(rain, snow, sunshine); + + // today.classList.remove("hidden"); + // tomorrow.classList.remove("hidden"); + // dayAfter.classList.remove("hidden"); + + today.removeAttribute("hidden"); + tomorrow.removeAttribute("hidden"); + dayAfter.removeAttribute("hidden"); + + todayAvgTemp.innerHTML = ` Average Temperature: ${weather.weather[0].avgtempF}°F`; + todayMaxTemp.innerHTML = ` Max Temperature: ${weather.weather[0].maxtempF}°F`; + todayMinTemp.innerHTML = ` Min Temperature: ${weather.weather[0].mintempF}°F`; + + tomorrowAvgTemp.innerHTML = ` Average Temperature: ${weather.weather[1].avgtempF}°F`; + tomorrowMaxTemp.innerHTML = ` Max Temperature: ${weather.weather[1].maxtempF}°F`; + tomorrowMinTemp.innerHTML = ` Min Temperature: ${weather.weather[1].mintempF}°F`; + + dayAfterAvgTemp.innerHTML = ` Average Temperature: ${weather.weather[2].avgtempF}°F`; + dayAfterMaxTemp.innerHTML = ` Max Temperature: ${weather.weather[2].maxtempF}°F`; + dayAfterMinTemp.innerHTML = ` Min Temperature: ${weather.weather[2].mintempF}°F`; + + // previousMessage.classList.add("hidden"); + previousMessage.removeAttribute("hidden"); + const listItem = document.createElement("li"); + listItem.innerHTML = `${city} - ${weather.current_condition[0].FeelsLikeF}°F`; + list.append(listItem); + + if (weather.weather[0].hourly[0].chanceofsunshine > 50) { + mainImage.classList.remove("hidden"); + mainImage.src = "./assets/icons8-summer.gif"; + mainImage.alt = "sun"; + mainDisplay.prepend(mainImage); + } else if (weather.weather[0].hourly[0].chanceofrain > 50) { + mainImage.classList.remove("hidden"); + mainImage.src = "./assets/icons8-torrential-rain.gif"; + mainImage.alt = "rain"; + mainDisplay.prepend(mainImage); + } else if (weather.weather[0].hourly[0].chanceofsnow > 50) { + mainImage.classList.remove("hidden"); + mainImage.src = "./assets/icons8-light-snow.gif"; + imagemainImage.alt = "snow"; + mainDisplay.prepend(mainImage); + } else { + mainImage.classList.add("hidden"); + } + }) + .catch((error) => { + console.log(error); + }); + weatherForm.reset(); +}); +convert.addEventListener("submit", (e) => { + e.preventDefault(); + + let found = 0; + if (toC.checked) { + found = (tempToConvert.value - 32) * (5 / 9); + } + if (toF.checked) { + found = (tempToConvert.value * 9) / 5 + 32; + } + + converted.innerHTML = found.toFixed(2); +}); diff --git a/package-lock.json b/package-lock.json index 2cf7f97..14d022c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { - "cypress": "^9.5.2", + "cypress": "^12.4.1", "live-server": "^1.2.1" } }, @@ -939,9 +939,9 @@ } }, "node_modules/cypress": { - "version": "9.5.2", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.2.tgz", - "integrity": "sha512-gYiQYvJozMzDOriUV1rCt6CeRM/pRK4nhwGJj3nJQyX2BoUdTCVwp30xDMKc771HiNVhBtgj5o5/iBdVDVXQUg==", + "version": "12.4.1", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.4.1.tgz", + "integrity": "sha512-IFMPzc1RJ22Fac+YbdqywtpcuqZXqQJh+JqZDXn+A15zG/dw99njfv8f0bTvD+WAHhP118+xWG/VwilkFg1rnA==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -964,7 +964,7 @@ "dayjs": "^1.10.4", "debug": "^4.3.2", "enquirer": "^2.3.6", - "eventemitter2": "^6.4.3", + "eventemitter2": "6.4.7", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", @@ -977,7 +977,7 @@ "listr2": "^3.8.3", "lodash": "^4.17.21", "log-symbols": "^4.0.0", - "minimist": "^1.2.5", + "minimist": "^1.2.6", "ospath": "^1.2.2", "pretty-bytes": "^5.6.0", "proxy-from-env": "1.0.0", @@ -992,7 +992,7 @@ "cypress": "bin/cypress" }, "engines": { - "node": ">=12.0.0" + "node": "^14.0.0 || ^16.0.0 || >=18.0.0" } }, "node_modules/dashdash": { @@ -1174,9 +1174,9 @@ } }, "node_modules/eventemitter2": { - "version": "6.4.5", - "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz", - "integrity": "sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==", + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz", + "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==", "dev": true }, "node_modules/execa": { @@ -2463,10 +2463,13 @@ } }, "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/mixin-deep": { "version": "1.3.2", @@ -4877,9 +4880,9 @@ } }, "cypress": { - "version": "9.5.2", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.2.tgz", - "integrity": "sha512-gYiQYvJozMzDOriUV1rCt6CeRM/pRK4nhwGJj3nJQyX2BoUdTCVwp30xDMKc771HiNVhBtgj5o5/iBdVDVXQUg==", + "version": "12.4.1", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.4.1.tgz", + "integrity": "sha512-IFMPzc1RJ22Fac+YbdqywtpcuqZXqQJh+JqZDXn+A15zG/dw99njfv8f0bTvD+WAHhP118+xWG/VwilkFg1rnA==", "dev": true, "requires": { "@cypress/request": "^2.88.10", @@ -4901,7 +4904,7 @@ "dayjs": "^1.10.4", "debug": "^4.3.2", "enquirer": "^2.3.6", - "eventemitter2": "^6.4.3", + "eventemitter2": "6.4.7", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", @@ -4914,7 +4917,7 @@ "listr2": "^3.8.3", "lodash": "^4.17.21", "log-symbols": "^4.0.0", - "minimist": "^1.2.5", + "minimist": "^1.2.6", "ospath": "^1.2.2", "pretty-bytes": "^5.6.0", "proxy-from-env": "1.0.0", @@ -5070,9 +5073,9 @@ } }, "eventemitter2": { - "version": "6.4.5", - "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz", - "integrity": "sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==", + "version": "6.4.7", + "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz", + "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==", "dev": true }, "execa": { @@ -6064,9 +6067,9 @@ } }, "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", "dev": true }, "mixin-deep": { diff --git a/package.json b/package.json index ef32cf6..b22593f 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "author": "", "license": "ISC", "devDependencies": { - "cypress": "^9.5.2", + "cypress": "^12.4.1", "live-server": "^1.2.1" } } diff --git a/retry.js b/retry.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/retry.js @@ -0,0 +1 @@ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..88b79c3 --- /dev/null +++ b/style.css @@ -0,0 +1,75 @@ +body { + background-color: white; + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto; + grid-template-areas: + "header header header" + "aside main previous"; +} + +header { + grid-area: header; + text-align: center; + border-style: solid; + color: white; + border-color: rgb(0, 0, 0); + background-color: rgb(30, 107, 107); + padding-top: 20px; + padding-bottom: 20px; + font-family: "Courier New", Courier, monospace; +} +#start-message { + /* background-color: rgba(210, 203, 203, 0.879); */ + text-align: center; + padding-top: 30px; + padding-bottom: 30px; + + border-width: 1px; +} +.main { + grid-area: main; + border-radius: 10px; + background-color: rgba(210, 203, 203, 0.879); + text-align: center; + border-style: solid; + border-color: lightblue; + padding-top: 10px; +} +div { + margin-left: 10px; +} +#today, +#tomorrow, +#day-after { + text-align: center; + border: 4px solid lightskyblue; +} +#today { + float: left; + width: 29%; + height: 200px; +} +div { + margin: auto; +} +#tomorrow { + float: left; + width: 29%; + height: 200px; +} +#day-after { + float: left; + width: 29%; + height: 200px; +} +.previous { + grid-area: previous; + padding-left: 20px; +} +.aside { + background-color: rgb(255, 255, 255); + grid-area: aside; + margin-left: auto; + margin-right: auto; +}