diff --git a/index.html b/index.html index e69de29bb..dcab0341d 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + Weather Report + + + + +
+ + + +
+ +
+
+ +
+

Temperature 65℉

+ + +
+ +
+ + +

+ +
+ +
+

Enter the weather location below:

+
+ +

+ +
+
+
+ +
+
+

Choose a Sky option or change the temperature for a custom weather report!

+
+ A gif from Miss Congeniality of a contestant saying: I'd have to say April 25th. Becasue it's not too hot, not too cold. All you need is a light jacket! +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..4086acb77 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,111 @@ +// Variable assignment +let currentTemp = 65; + +const skyImages = { + sunny: ["https://media.giphy.com/media/lyVNcb1n5Ob0Q/giphy.gif", "The sun shines directly into the camera lens through tall evergreens. The camera angle moves slightly."], + cloudy: ["https://media.giphy.com/media/lOkbL3MJnEtHi/giphy.gif", "The sun shines through clouds racing across the sky."], + rainy: ["https://media.giphy.com/media/vLi3T5m3RH45y/giphy.gif", "A hyper realistic animation. of heavy rain bouncing off tiled patio"], + snowy: ["https://media.giphy.com/media/Fh3ezinVpi4yk/giphy.gif", "A hyper realiztic animation of heavy snow falling through evergreens against distant mountains."] +}; + +// temperature functions +// increase temp helper function +const addTemp = () => { + currentTemp += 1; + updateTemp(currentTemp); +}; +// decrease temp helper function +const subtractTemp = () => { + currentTemp -= 1; + updateTemp(currentTemp); +}; +// Font changes for temp +const changeTempColor = (currentTemp) => { + const temperatureCountContainer = document.getElementById("temperatureCount"); + let color = '' + if (currentTemp >= 80) { + color = 'red'; + } else if (currentTemp >= 70) { + color= 'orange'; + } else if (currentTemp >= 60) { + color = 'yellow'; + } else if (currentTemp >= 50) { + color = 'green'; + } else if (currentTemp <= 49) { + color = 'blue' + }; + document.getElementById("temperatureCount").style.color = color; +}; + +// function to run whenever the Temp button is hit. Takes in the current temp and runs the helper functions above as well as updating the landscape to match the temp +const updateTemp = currentTemp => { + const temperatureCountContainer = document.querySelector("#temperatureCount") + temperatureCountContainer.textContent = `Temperature ${currentTemp}℉`; + changeTempColor(currentTemp); + updateLandscape(currentTemp); +} + +// Function that updates the sky image +const changeSky = () => { + let option = document.querySelector('#sky'); + let optionValue = option.value; + var skyImage = document.createElement("IMG"); + skyImage.setAttribute("src", skyImages[optionValue][0]); + skyImage.setAttribute("alt", skyImages[optionValue][1]); + skyImageContainer.replaceChild(skyImage, skyImageContainer.childNodes[1]); +}; +// Function that updates the location to match user input +const updateLocation = () => { + const inputLocation = document.getElementById("locationInput").value; + const locationDisplay = document.getElementById("locationDisplay"); + locationDisplay.textContent = inputLocation; +}; +// Function to reset the location on button click +const resetLocation = () => { + const locationInput = document.getElementById("locationInput"); + locationInput.value = "Unceded Coast Salish Land"; + updateLocation(); +}; +// Function to update the background color and landscape text to match the current temp +const updateLandscape = (currentTemp) => { + const landscapeContainer = document.getElementById('landscape-text'); + let landscape = ''; + if (currentTemp >= 80) { + landscape = 'Too hot too function'; + document.body.style.background = 'linear-gradient(to bottom, #ffff99 0%, #cc0000 100%)'; + } else if (currentTemp >= 70) { + landscape= 'Good day to sit by the pool'; + document.body.style.background = 'linear-gradient(to bottom, #ffffcc 0%, #ff6600 100%)'; + } else if (currentTemp >= 60) { + landscape = 'The perfect temperature... it must be near April 25... '; + document.body.style.background = 'linear-gradient(to bottom, #ffffff 0%, #ff9999 100%)'; + } else if (currentTemp >= 50) { + landscape = 'Bundle up!'; + document.body.style.background = 'linear-gradient(to bottom, #99ffcc 0%, #009900 100%)'; + } else if (currentTemp < 49) { + landscape = '❅❆❄ Even my icicles have icicles! ❅❆❄'; + document.body.style.background = 'linear-gradient(to bottom, #ffffff 0%, #33ccff 100%)'; + } + landscapeContainer.textContent = landscape; +}; + + +const registerEventHandlers = () => { + const addTemperatureButton = document.querySelector("#addTemperatureButton"); + addTemperatureButton.addEventListener("click", addTemp); + + const subtractTemperatureButton = document.querySelector("#subtractTemperatureButton"); + subtractTemperatureButton.addEventListener("click", subtractTemp); + + const skyOptions = document.querySelector("#sky"); + skyOptions.addEventListener("change", changeSky); + + updateLocation(); + const locationInput = document.getElementById("locationInput"); + locationInput.addEventListener("input", updateLocation); + + const locationResetBtn = document.getElementById("locationReset"); + locationResetBtn.addEventListener("click", resetLocation); +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..e5919b866 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,129 @@ + +/* General styling */ +body { + font-family: Verdana, Geneva, + Tahoma, sans-serif; + background: linear-gradient(to bottom, #ff66ff 0%, #ccffff 100%); +} +h3 { + text-align: left; + font-size: 1.3em; + font-weight: normal; +} +/* label */ +label { + text-align: left; + font-size: 1.3em; +} +.button { + background-color: #ffe6e6; + color: navy; + padding: .3em 1em; + text-align: center; + display: inline-block; + font-size: 1em; +} +#locationInput { + width: 20vw; + height: 2em; + background-color: #ffe6e6; + color: navy; + font-size: 1em; +} + +/* Header flex-box*/ +header { + display: flex; + flex-direction: column; + overflow: visible; + position: relative; + align-items: flex-start; + justify-content: safe; + min-height: 350px; + margin-top: 3em; +} +/* Flex organizing */ +ul { + list-style-type: none; + flex: 1 1 auto; + /* justify-content: space-evenly; */ +} +h1 { + text-align: left; + font-size: 3em; + font-variant: small-caps; + font-weight: lighter; + font-style: italic; +} +#sassy-subtitle { + text-align: left; + font-size: 1em; + font-weight: lighter; + font-style: italic; +} +#locationDisplay { + font-size: 2em; + font-weight: lighter; + font-style: italic; +} + +/* Layout for main display area */ +.left-column { + float: inline-start; + position: relative; + text-align: left; + width: 40%; + padding-left: 1em; + margin-top: 0; + margin-left: 2em; +} +.weather-item { + padding-bottom: 1.5em; +} +.right-column { + display: flex; + flex-flow: row-wrap; + text-align: center; + justify-content: center; + align-content: center; + float: right; + width: 45%; + padding: .5em; +} +.weather-display:after { + content: ""; + display: table; + clear: both; +} +@media screen and (max-width:600px) { + .weather-item, .landscape { + width: 100%; + } +} + +/* Landscape flexbox */ +.landscape { + flex: 1 1 auto; + /* justify-self: center; */ + max-height: 80vh; + width: 100%; + position: relative; + object-fit: scale-down; + padding: .2em; + overflow: scroll; +} +/* Temperature count colors */ +#temperatureCount { + color: black; +} +/* Footer */ +footer { + text-align: center; + font-size: .8em; + font-style: italic; + margin-top: 1em; + line-height: 150%; +} + + +