From fed5a1fe331286ce94e2849d98a0708d97efb988 Mon Sep 17 00:00:00 2001 From: Victoria Shade Date: Thu, 16 Jun 2022 00:43:35 -0700 Subject: [PATCH 1/2] Sound Logic --- index.html | 59 +++++++- src/index.js | 187 +++++++++++++++++++++++ styles/index.css | 380 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 624 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 68b320b9a..59b7b0795 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,63 @@ Weather Report + - +
+

Weather Report

+

For the lovely city of:

+
+
+
+ + + +
+
+
+

Temperature

+ +

+ +

+ + +
+
+
+

Sky

+ +
+ +
+
+

City Name

+ + + +
+ +
+ + + + + - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index e69de29bb..35d5878b3 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,187 @@ +const currentLocation = { + city: "Seattle", + latitude: 47.6038321, + longitude: -122.3300624, + climate: temperature, +}; + +window.onload = () => { + displayCurrentLocation(); + getCurrentForecast(); + setTheMood(); + changeTemperatureAndLandscapeStyling(); +}; + + +const displayCurrentLocation = () => { + const cityName = document.getElementById("city-name"); + cityName.textContent = "✨ " + currentLocation.city + " ✨"; +} + + +const updateDisplayForGivenCity = () => { + const cityNameInput = document.getElementById("city-name-input"); + cityNameInput.addEventListener("keyup", () => { + currentLocation.city = cityNameInput.value; + displayCurrentLocation(); + }); +} + + +const resetLocation = () => { + const cityName = document.getElementById("city-name"); + if (cityName != "Seattle"); { + currentLocation.city = "Seattle" + currentLocation.latitude = 47.6038321, + currentLocation.longitude = -122.3300624, + currentLocation.climate = temperature, + document.getElementById("city-name-input").value = ""; + displayCurrentLocation(); + getCurrentForecast(); + }; +} + + +const increaseTemperature = () => { + const temperature = document.getElementById("temperature"); + temperature.textContent = (parseInt(temperature.textContent) + 1); + changeTemperatureAndLandscapeStyling(); +} + + +const decreaseTemperature = () => { + const temperature = document.getElementById("temperature"); + temperature.textContent = (parseInt(temperature.textContent) - 1); + changeTemperatureAndLandscapeStyling(); +} + + +const getCurrentLocationCoordinates = () => { + axios + .get("http://127.0.0.1:5000/location", { + params: { + q: currentLocation.city, + }, + }) + .then((response) => { + latitude = response.data[0].lat; + longitude = response.data[0].lon; + currentLocation.latitude = latitude; + currentLocation.longitude = longitude; + console.log(`${currentLocation.city}'s coordinates: ${latitude}, ${longitude} have been found`); + getCurrentForecast(); + }) + .catch((error) => { + console.log(`Coordinates for ${currentLocation.city} Not Found ${error.response.data}`); + }); +} + + +const getCurrentForecast = () => { + axios + .get("http://127.0.0.1:5000/weather", { + params: { + lat: currentLocation.latitude, + lon: currentLocation.longitude, + units: "imperial" + }, + }) + .then((response) => { + temperature.textContent = Math.round(response.data.current.temp); + currentLocation.climate = temperature.textContent; + console.log(`${currentLocation.city}'s current temperature of ${temperature.textContent} has been found`); + changeTemperatureAndLandscapeStyling(); + }) + .catch((error) => { + console.log(`Current Temperature for ${currentLocation.city} Not Found ${error.response.data}`); + }); +} + + +const changeTemperatureAndLandscapeStyling = () => { + temperature = document.getElementById("temperature"); + landscape = document.getElementById("weather-garden-containing-landscape"); + adjustedTemperature = parseInt(temperature.textContent); + + if (adjustedTemperature >= 80) { + temperature.style.color = "red"; + landscape.textContent = "🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚" + } else if (adjustedTemperature >= 70 && adjustedTemperature <= 79) { + temperature.style.color = "orange"; + landscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" + } else if (adjustedTemperature >= 60 && adjustedTemperature <= 69) { + temperature.style.color = "goldenrod"; + landscape.textContent = "🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ" + } else if (adjustedTemperature >= 50 && adjustedTemperature <= 59) { + temperature.style.color = "green"; + landscape.textContent = "πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²" + } else if (adjustedTemperature <= 49) { + temperature.style.color = "teal"; + landscape.textContent = "πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²" + } +} + + +const setTheMood = () => { + const skyIcons = document.getElementById("weather-garden-containing-sky"); + const choice = document.getElementById("sky-drop-down").value; + + switch (choice) { + case "sunny": + skyIcons.textContent = "β˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈβ˜€οΈ"; + break; + case "cloudy": + skyIcons.textContent = "☁️☁️☁️☁️☁️πŸŒ₯⛅️πŸŒ₯☁️☁️☁️☁️☁️"; + break; + case "rainy": + skyIcons.textContent = "πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸ’§πŸŒ§πŸŒ¦β›ˆπŸ’§πŸŒ§πŸŒ§πŸŒˆπŸŒ§"; + break; + case "snowy": + skyIcons.textContent = "πŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨"; + break; + case "What's the Vibe?": + skyIcons.textContent = "πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸ’§πŸŒ§πŸŒ¦β›ˆπŸ’§πŸŒ§πŸŒ§πŸŒˆπŸŒ§"; + } +} + + +const registerEventHandlers = () => { + const cityNameInput = document.getElementById("city-name-input"); + cityNameInput.addEventListener("keyup", updateDisplayForGivenCity); + + const resetButton = document.getElementById("city-name-reset-button"); + resetButton.addEventListener("click", resetLocation); + + const increaseTemperatureButton = document.getElementById("increase-temperature-button"); + increaseTemperatureButton.addEventListener("click", increaseTemperature); + + const decreaseTemperatureButton = document.getElementById("decrease-temperature-button"); + decreaseTemperatureButton.addEventListener("click", decreaseTemperature); + + const choice = document.getElementById("sky-drop-down"); + choice.addEventListener('change', setTheMood); + + const getCurrentForecastButton = document.getElementById("get-current-forecast-button"); + getCurrentForecastButton.addEventListener("click", getCurrentLocationCoordinates); +} + + +if (document.readyState !== 'loading') { + resetLocation(); + increaseTemperature(); + decreaseTemperature(); + getCurrentLocationCoordinates(); + getCurrentForecast(); + changeTemperatureAndLandscapeStyling(); + setTheMood(); + registerEventHandlers(); +} else { + document.addEventListener('DOMContentLoaded', resetLocation); + document.addEventListener('DOMContentLoaded', increaseTemperature); + document.addEventListener('DOMContentLoaded', decreaseTemperature); + document.addEventListener('DOMContentLoaded', getCurrentLocationCoordinates); + document.addEventListener('DOMContentLoaded', getCurrentForecast); + document.addEventListener('DOMContentLoaded', changeTemperatureAndLandscapeStyling); + document.addEventListener('DOMContentLoaded', setTheMood); + document.addEventListener("DOMContentLoaded", registerEventHandlers); +} diff --git a/styles/index.css b/styles/index.css index e69de29bb..1b20ea1aa 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,380 @@ + +/* Page Background */ +html { + position: relative; + background: #0066FF; +} + +header { + text-align: center; +} +/* Weather Report */ +#main-title { + position: absolute; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); + + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 48px; + + color: #FFFFFF; +} + +/* For the lovely city of: */ +#sub-title { + position: absolute; + left: 50%; + width: 247px; + height: 36px; + top: 70px; /* 60 */ + margin-right: -50%; + transform: translate(-50%, -50%); + + font-family: 'Inter'; + font-style: normal; + font-weight: lighter; + font-size: 24px; + + color: #FFFFFF; +} + +/* cityNameContentBox */ +#city-name-display-box { + position: absolute; + width: 800px; + height: 221px; + left: 647px; /* 615 */ + top: 100px; /* 186 */ + text-decoration: none; + + background: #0066FF; +} + +/* cityNameContentBox */ +/* #star-wrap-open { + position: absolute; + width: 20px; + height: 221px; + left: 640px; + top: 100px; + + background: #0066FF; +} */ + +/* cityNameContentBox */ +#star-wrap-close { + /* position: absolute; + width: 20px; + height: 221px; + left: 1000px; + top: 100px; */ + + background: #0066FF; +} + +/* cityName */ +#city-name { + position: absolute; + width: 750px; + height: 221px; + left: 647px; /* 615 */ + top: 95px; /* 186 */ + + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-size: 120px; + /* font-size: 12vmin; */ + /* font-size: 7vmin; */ + padding-right: 2.0rem; + text-decoration: none; + flex-wrap: wrap; + justify-content: center; + text-align: center; + + + background-color: #0066FF; + +} + +/* temperatureContentBox */ +#temperature-content-box { + position: absolute; + width: 433px; + height: 252px; + left: 66px; + top: 156px; + + background: #FFFFFF; +} + +/* Temperature */ +#temperature-content-box-header { + text-align: center; + position: absolute; + width: 145px; + height: 27px; + left: 210px; + top: 159px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 29px; + + color: #000000; +} + +/* temperatureDisplay */ +#temperature { + position: absolute; + text-align: center; + justify-content: center; + width: 100px; + height: 112px; + left: 106px; + top: 245px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 96px; + + background: #FFFFFF; +} + +/* increaseTemperature */ +#increase-temperature-button { + position: absolute; + width: 21px; + height: 16px; + left: 146px; + top: 208px; + } + +/* decreaseTemperature */ +#decrease-temperature-button { + position: absolute; + width: 21px; + height: 16px; + left: 146px; + top: 366px; +} + +/* getCurrentForecastButton */ +#get-current-forecast-button { + position: absolute; + width: 215px; + height: 112px; + left: 242px; + top: 245px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 19px; + + background: #0066FF; + color: #FFFFFF; +} + +/* Get Realtime Temperature */ +#get-current-forecast-button-text { + text-align: center; + position: absolute; + width: 215px; + height: 112px; + left: 242px; + top: 265px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 19px; + + color: #FFFFFF; +} + +/* skyContentBox */ +#sky-content-box { + position: absolute; + width: 433px; + height: 160px; + left: 66px; + top: 425px; + + background: #FFFFFF; +} + +/* Sky */ +#sky-content-box-header { + position: absolute; + width: 42px; + height: 29px; + left: 261px; + top: 428px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 29px; + + color: #000000; +} + +/* skyDropDown */ +#sky-drop-down { + position: absolute; + width: 174px; /*154*/ + height: 28px; + left: 190px; /*210*/ + top: 511px; + + background: #D9D9D9; +} + +/* cityNameContentBox */ +#city-name-content-box { + position: absolute; + width: 433px; + height: 160px; + left: 66px; + top: 603px; + + background: #FFFFFF; +} + +/* City Name */ +#city-name-content-box-header { + position: absolute; + width: 119px; + height: 29px; + left: 223px; + top: 606px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 29px; + + color: #000000; +} + +/* cityNameInput */ +#city-name-input { + position: absolute; + justify-content:center; + width: 258px; + height: 28px; + left: 90px; + top: 691px; + + background: #D9D9D9; +} + +/* Go */ +#city-name-weather-details-button { + position: absolute; + justify-content:center; + text-align: center; + width: 50px; + height: 36px; + left: 369px; + top: 689px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-size: 16px; + + background: #0066FF; + color: #FFFFFF; +} + +/* cityNameResetButton */ +#city-name-reset-button { + position: absolute; + justify-content:center; + text-align: center; + + width: 50px; + height: 36px; + left: 433px; + top: 689px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-size: 16px; + + background: #0066FF; + color: #FFFFFF; +} + +/* Weather Garden */ +#weather-garden-header { + position: absolute; + width: 190px; + height: 29px; + left: 882px; /*833*/ + top: 311px; + + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 29px; + + color: #FFFFFF; +} + +/* weatherGardenDisplay */ +#weather-garden-container { + position: absolute; + width: 625px; + height: 270px; + left: 647px; /*615*/ + top: 370px; + + background: #FFFFFF; +} + +/* weatherGardenDisplaySky */ +#weather-garden-containing-sky { + position: absolute; + width: 625px; + height: 135px; + left: 647px; /*615*/ + top: 370px; + + background: #FFFFFF; +} + +/* weatherGardenDisplayLandscape */ +#weather-garden-containing-landscape { + position: absolute; + width: 625px; + height: 135px; + left: 647px; /*615*/ + top: 505px; + + background: #FFFFFF; +} + +footer { + text-align: right; + position: fixed; + right: 1%; + bottom: 0%; + width: 100%; +} + From 699d01b72215253124dfc358661d81a7367705b3 Mon Sep 17 00:00:00 2001 From: Victoria Shade Date: Thu, 16 Jun 2022 16:51:34 -0700 Subject: [PATCH 2/2] Fuck me --- styles/index.css | 245 ++++++++++++++++++----------------------------- 1 file changed, 94 insertions(+), 151 deletions(-) diff --git a/styles/index.css b/styles/index.css index 1b20ea1aa..87e4953a2 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,10 +1,8 @@ - /* Page Background */ html { position: relative; background: #0066FF; } - header { text-align: center; } @@ -15,15 +13,12 @@ header { left: 50%; margin-right: -50%; transform: translate(-50%, -50%); - font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 48px; - color: #FFFFFF; } - /* For the lovely city of: */ #sub-title { position: absolute; @@ -38,10 +33,8 @@ header { font-style: normal; font-weight: lighter; font-size: 24px; - color: #FFFFFF; } - /* cityNameContentBox */ #city-name-display-box { position: absolute; @@ -50,68 +43,50 @@ header { left: 647px; /* 615 */ top: 100px; /* 186 */ text-decoration: none; - background: #0066FF; } - -/* cityNameContentBox */ -/* #star-wrap-open { - position: absolute; - width: 20px; - height: 221px; - left: 640px; - top: 100px; - - background: #0066FF; -} */ - -/* cityNameContentBox */ -#star-wrap-close { - /* position: absolute; - width: 20px; - height: 221px; - left: 1000px; - top: 100px; */ - - background: #0066FF; -} - /* cityName */ #city-name { position: absolute; - width: 750px; + align-items: center; + text-align: center; + align-content: center; + justify-content: center; + /* width: 750px; */ + width: 590px; + padding: 5px; height: 221px; left: 647px; /* 615 */ - top: 95px; /* 186 */ - + top: 140px; /* 186 */ font-family: 'Inter'; font-style: normal; font-weight: 600; - font-size: 120px; - /* font-size: 12vmin; */ - /* font-size: 7vmin; */ + font-size: 6vw; + flex-wrap: wrap; + text-overflow: ellipsis; + word-wrap: break-word; + overflow: visible; + line-height: 1em; + max-height: 2em; padding-right: 2.0rem; text-decoration: none; - flex-wrap: wrap; - justify-content: center; - text-align: center; - background-color: #0066FF; + color: #FFFFFF; } - /* temperatureContentBox */ #temperature-content-box { position: absolute; + text-align: center; + align-items: center; + border-radius: 1em; width: 433px; height: 252px; left: 66px; - top: 156px; - + top: 333px; background: #FFFFFF; } - /* Temperature */ #temperature-content-box-header { text-align: center; @@ -119,17 +94,14 @@ header { width: 145px; height: 27px; left: 210px; - top: 159px; - + top: 337px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; - color: #000000; } - /* temperatureDisplay */ #temperature { position: absolute; @@ -138,166 +110,135 @@ header { width: 100px; height: 112px; left: 106px; - top: 245px; - + top: 421px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 96px; - background: #FFFFFF; } - /* increaseTemperature */ #increase-temperature-button { position: absolute; + text-align: center; + margin: auto; + border: none; width: 21px; - height: 16px; - left: 146px; - top: 208px; - } - + height: 30px; + left: 143px; + top: 397px; + background-color: #FFFFFF; +} /* decreaseTemperature */ #decrease-temperature-button { position: absolute; - width: 21px; + border: none; + width: 30px; height: 16px; - left: 146px; - top: 366px; + left: 143px; + top: 532px; + background-color: #FFFFFF; } - /* getCurrentForecastButton */ #get-current-forecast-button { position: absolute; + border: solid; width: 215px; height: 112px; left: 242px; - top: 245px; - + top: 421px; font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 20px; line-height: 19px; - background: #0066FF; color: #FFFFFF; } - -/* Get Realtime Temperature */ -#get-current-forecast-button-text { - text-align: center; - position: absolute; - width: 215px; - height: 112px; - left: 242px; - top: 265px; - - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 19px; - - color: #FFFFFF; -} - /* skyContentBox */ #sky-content-box { position: absolute; width: 433px; height: 160px; left: 66px; - top: 425px; - + top: 603px; + border-radius: 1em; background: #FFFFFF; } - /* Sky */ #sky-content-box-header { position: absolute; + text-align: center; width: 42px; height: 29px; left: 261px; - top: 428px; - + top: 606px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; - color: #000000; } - /* skyDropDown */ #sky-drop-down { position: absolute; + align-items: center; + text-align: center; + border: thin solid; width: 174px; /*154*/ height: 28px; left: 190px; /*210*/ - top: 511px; + top: 689px; + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-size: 16px; background: #D9D9D9; } - /* cityNameContentBox */ #city-name-content-box { position: absolute; width: 433px; height: 160px; left: 66px; - top: 603px; + top: 155px; + border-radius: 1em; background: #FFFFFF; } - -/* City Name */ +/* city Name */ #city-name-content-box-header { position: absolute; + text-align: center; width: 119px; height: 29px; left: 223px; - top: 606px; - + top: 158px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; - color: #000000; } - /* cityNameInput */ #city-name-input { position: absolute; - justify-content:center; - width: 258px; + justify-content: center; + text-align: center; + border: thin solid; + width: 297px; height: 28px; left: 90px; - top: 691px; - - background: #D9D9D9; -} - -/* Go */ -#city-name-weather-details-button { - position: absolute; - justify-content:center; - text-align: center; - width: 50px; - height: 36px; - left: 369px; - top: 689px; + top: 243px; font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 16px; - - background: #0066FF; - color: #FFFFFF; + background: #D9D9D9; } /* cityNameResetButton */ @@ -305,73 +246,75 @@ header { position: absolute; justify-content:center; text-align: center; - - width: 50px; - height: 36px; - left: 433px; - top: 689px; - + border: solid; + width: 60px; + height: 34px; + left: 413px; + top: 243px; font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 16px; - background: #0066FF; color: #FFFFFF; } - /* Weather Garden */ #weather-garden-header { position: absolute; - width: 190px; + align-items: center; + text-align: center; + width: 625px; height: 29px; - left: 882px; /*833*/ - top: 311px; - + left: 647px; /*833*/ + top: 428px; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 24px; line-height: 29px; - color: #FFFFFF; } - /* weatherGardenDisplay */ #weather-garden-container { position: absolute; width: 625px; height: 270px; left: 647px; /*615*/ - top: 370px; - - background: #FFFFFF; + top: 493px; + background: #0066FF; } - -/* weatherGardenDisplaySky */ -#weather-garden-containing-sky { +/* weatherGardenDisplayLandscape */ +#weather-garden-containing-landscape { position: absolute; + text-align: center; + margin: auto; width: 625px; - height: 135px; + height: 68px; left: 647px; /*615*/ - top: 370px; - - background: #FFFFFF; + top: 500px; + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-size: 48px; + background: #0066FF; } - -/* weatherGardenDisplayLandscape */ -#weather-garden-containing-landscape { +/* weatherGardenDisplaySky */ +#weather-garden-containing-sky { position: absolute; + text-align: center; + margin: auto; width: 625px; height: 135px; left: 647px; /*615*/ - top: 505px; - - background: #FFFFFF; + top: 635px; + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-size: 48px; + background: #0066FF; } - footer { - text-align: right; + text-align: center; position: fixed; right: 1%; bottom: 0%;