diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/all-features.png b/assets/all-features.png deleted file mode 100644 index 0fb4bd5..0000000 Binary files a/assets/all-features.png and /dev/null differ diff --git a/assets/landing.png b/assets/landing.png deleted file mode 100644 index 48be7e7..0000000 Binary files a/assets/landing.png and /dev/null differ diff --git a/assets/multiple-searches.png b/assets/multiple-searches.png deleted file mode 100644 index e2856c4..0000000 Binary files a/assets/multiple-searches.png and /dev/null differ diff --git a/assets/single-search.png b/assets/single-search.png deleted file mode 100644 index 66088e8..0000000 Binary files a/assets/single-search.png and /dev/null differ diff --git a/index.html b/index.html index e69de29..56e3afe 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,68 @@ + + + + + + + Document + + + + +
+

Weather App

+
+ + + +
+
+ +
+
+ +
+ Choose a location to view the weather. +
+ + + + + + +
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..2b5a454 --- /dev/null +++ b/main.js @@ -0,0 +1,78 @@ +const article = document.querySelectorAll("article") +const ul = document.querySelectorAll( "ul") +const h2 = document.querySelector("bold") +const aside = document.querySelectorAll("aside") +const p = document.querySelector("p") +const array = [] +const image = document.querySelector("img") +document.querySelector("form").addEventListener("submit", (event) => { + event.preventDefault() + fetch(`https://wttr.in/${event.target.location.value}?format=j1`) + .then(result => { + return result.json() + }).then(weather => { + console.log(weather) + function chance(){ + if(weather.weather[0].hourly[0].chanceofsunshine > 50){ + image.setAttribute("src", "./assets/icons8-summer.gif") + image.setAttribute("alt", "sun") + } else if (weather.weather[0].hourly[0].chanceofrain > 50){ + image.setAttribute("src", "./assets/icons8-torrential-rain.gif") + image.setAttribute("alt", "rain") + } else if (weather.weather[0].hourly[0].chanceofsnow > 50){ + image.setAttribute("src", "./assets/icons8-light-snow.gif") + image.setAttribute("alt", "snow") + } + } + function get(){ + let input = document.getElementById('inputText') + if(input.value.toLowerCase() === weather.nearest_area[0].areaName[0].value.toLowerCase()){ + article[0].innerHTML = `

${weather.nearest_area[0].areaName[0].value}

` + chance() + article[0].innerHTML += `

Area: ${weather.nearest_area[0].areaName[0].value}

` + + } else { + article[0].innerHTML = `

${input.value}

` + chance() + article[0].innerHTML += `

Nearest Area: ${weather.nearest_area[0].areaName[0].value}

` + + } + input.value = ""; + article[0].innerHTML += `

Region: ${weather.nearest_area[0].region[0].value}

Country: ${weather.nearest_area[0].country[0].value}

Currently: Feels like ${weather.current_condition[0].FeelsLikeF}°F

` + article[0].innerHTML += `

Chance of Sunshine: ${weather.weather[0].hourly[0].chanceofsunshine}

Chance of Rain: ${weather.weather[0].hourly[0].chanceofrain}

Chance of Snow: ${weather.weather[0].hourly[0].chanceofsnow}

` + const head = document.querySelectorAll('h2') + head[2].innerHTML = `Today` + head[3].innerHTML = `Tomorrow` + head[4].innerHTML = `Day After Tomorrow` + article[1].innerHTML = `Average Temperature: ${weather.weather[0].avgtempF}°F

Max Temperature: ${weather.weather[0].maxtempF}°F

Min Temperature: ${weather.weather[0].mintempF}°F` + article[2].innerHTML = `Average Temperature: ${weather.weather[1].avgtempF}°F

Max Temperature: ${weather.weather[1].maxtempF}°F

Min Temperature: ${weather.weather[1].mintempF}°F` + article[3].innerHTML = `Average Temperature: ${weather.weather[2].avgtempF}°F

Max Temperature: ${weather.weather[2].maxtempF}°F

Min Temperature: ${weather.weather[2].mintempF}°F` + } + get() + let li = document.createElement('li') + if(!array.includes(weather.nearest_area[0].areaName[0].value)){ + li.innerHTML = `${weather.nearest_area[0].areaName[0].value}:${weather.current_condition[0].FeelsLikeF}°F` + ul[4].append(li) + } + p.remove() + array.push(weather.nearest_area[0].areaName[0].value) + li.addEventListener("click", (event) => { + event.preventDefault() + get() + }) + const conversion = document.querySelector('#conversionForm'); + conversion.addEventListener('submit', (event) => { + event.preventDefault(); + let conversion = event.target.convert.value; + let toC = document.querySelector('#to-c') + let toF = document.querySelector('#to-f') + if (toC.checked) { + conversion = (conversion - 32) * (5 / 9); + document.querySelector('#result').innerHTML = `${conversion.toFixed(2)}°C`; + } else { + conversion = conversion * (9 / 5) + 32; + document.querySelector('#result').innerHTML = `${conversion.toFixed(2)}°F`; + } + }); + }) +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c403ce1 --- /dev/null +++ b/styles.css @@ -0,0 +1,49 @@ +.header { + background-color: rgb(9, 67, 67); + grid-area: header; + text-align: center; +} + +.main { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + justify-content: center; + background-color: rgb(54, 146, 106); + text-align: center; + grid-area: main; + border-top: 2px solid rgb(208, 232, 128); + border-left: 2px solid rgb(208, 232, 128); + border-bottom: 2px solid rgb(208, 232, 128); + border-right: 2px solid rgb(208, 232, 128); +} + +.previous { + background-color: rgb(208, 232, 128); + display: grid; + grid-area: previous; + text-decoration: underline; +} + +.conversion { + background-color: rgb(118, 155, 95); + display: grid; + grid-area: aside; +} +.weatherForecast { + background-color: rgba(197, 231, 153, 0.543); + display: grid; + grid-template-columns: "auto auto auto"; + grid-template-rows: "auto auto auto"; + grid-template-areas: "header header header"; + border-left: thick solid rgb(208, 232, 128); + border-right: thick solid rgb(208, 232, 128); + border: 50px; + +} +body { + background-color: rgb(174, 239, 151); + display: grid; + text-align: center; + grid-template-columns: "auto auto auto"; + grid-template-rows: "auto auto auto"; + grid-template-areas: "header header header" "aside main previous"; +} \ No newline at end of file