diff --git a/.gitignore b/.gitignore index 31b153a9b..1b2daf7fa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .DS_Store node_modules -.cache \ No newline at end of file +.cache +jsExample.js \ No newline at end of file diff --git a/index.html b/index.html index 68b320b9a..57f3a2cb2 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,64 @@ - + Weather Report + + - +
+
+ +

~ current temperature in ~

+ + +
+
+ 25 +
+
+
+ + + +
+
+ +
+
+ 
+|   :   :   :     :     :      │
+|  :   :   :     :     :       │
+|   :   :   :     :     :      │
+
+
+
+ 
+┼┼┼│                      │  ┼┼│
+┼┼┼┼┐                       ┼┼┼│
+┼┼┼┼│           *         │┼┼┼┼│
+┼┼┼┼┘          *          │ ┼┼┼│
+┼  ├────┼          ───────│ ┼┼┼│
+┼┼┼┼│┐┐┐┐┐┐┐┐ ├├├├├├├├├──│┼ ┼┼┼│
+┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼
+********************************
+********************************
+********************************
+
+
+
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..c2d36da0b 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,230 @@ +// import axios from 'axios'; +// const axios = require('axios'); + +const state = { + temp: 25, + tempUnits: '°C', + city: 'Denver', + lat: 39.7392, + lon: -104.985, + sky: 'sunny', +}; + +const landscapes = { + cold: '-----cold-----\ + I X I I I I I I I I I I\ + ┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼\ + ********************************', + cool: '***cool***', + neutral: + '\ + ----neutral-----\ + ┼┼┼│ │ ┼┼│\ + ┼┼┼┼┐ ┼┼┼│\ + ┼┼┼┼│ * │┼┼┼┼│\ + ┼┼┼┼┘ * │ ┼┼┼│\ + ┼ ├────┼ ───────│ ┼┼┼│\ + ┼┼┼┼│┐┐┐┐┐┐┐┐ ├├├├├├├├├──│┼ ┼┼┼│\ + ┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼\ + ********************************\ + ********************************\ + ********************************', + warm: '^^^^^^warm^^^^^^', + hot: '<<<<>>>>', +}; + +const skies = { + sunny: + '\ + | : : : : : │\ + | : : : : : │\ + | : : : : : │', + cloudy: + '\ +| : = : = : = : = : │\ +| : = : = : = : = : = │\ +| = : = : = : = : = : │', + rainy: + '\ +| : :: : : : : : : : : │\ +| : : : : : : : : : : │\ +| : : : :: : :: : :: : │', + snowy: + '\ +| * * * * * * * │\ +| * * * * * * * * * *│\ +| * * * * * * ** * │', +}; + +const convertFtoC = (temp) => { + return Math.round(((temp - 32) * 5) / 9); +}; + +const convertKtoC = (temp) => { + return Math.round(temp - 273.15); +}; + +const convertCtoF = (temp) => { + return Math.round(temp * (9 / 5) + 32); +}; + +const changeLandscapeTemp = () => { + let color = 'rgba(150, 50, 110, 0.5)'; + let degC = 0.0; + let landscape = landscapes.neutral; + + if (state.tempUnits === '°F') { + degC = convertFtoC(state.temp); + } else { + degC = state.temp; + } + if (degC > 30) { + landscape = landscapes.hot; + color = 'rgba(150, 90, 30, 0.5)'; + } else if (degC > 25) { + landscape = landscapes.warm; + color = 'rgba(120, 60, 40, 0.5)'; + } else if (degC > 15) { + landscape = landscapes.neutral; + color = 'rgba(100, 110, 10, 0.5)'; + } else if (degC > 0) { + landscape = landscapes.cool; + color = 'rgba(80, 10, 110, 0.5)'; + } else if (degC <= 0) { + landscape = landscapes.cold; + color = 'rgba(5, 5, 110, 0.5)'; + } + + let backgroundColors = `radial-gradient(${color}, rgba(0, 0, 0, 0))`; + + const backgroundColor = document.getElementById('weather_body'); + backgroundColor.style.backgroundImage = backgroundColors; + + const landscapeReturn = document.getElementById('landscape'); + landscapeReturn.textContent = landscape; + + const tempContainer = document.querySelector('#numeric_temperature'); + tempContainer.textContent = `${state.temp}`; + + const unitsContainer = document.querySelector('#temperature_units'); + unitsContainer.textContent = `${state.tempUnits}`; +}; + +const changeUnits = () => { + const currentUnits = state.tempUnits; + // document.getElementById('#temperature_units').textContent; + // state.tempUnits = currentUnits; + console.log('current units: ' + currentUnits); + if (currentUnits === '°C') { + state.temp = convertCtoF(state.temp); + state.tempUnits = '°F'; + } else if (currentUnits === '°F') { + state.temp = convertFtoC(state.temp); + state.tempUnits = '°C'; + } + changeLandscapeTemp(); +}; + +const increaseTemp = () => { + state.temp += 1; + changeLandscapeTemp(); +}; + +const reset = () => { + state.temp = 25; + state.tempUnits = '°C'; + changeLandscapeTemp(); + resetLocation(); +}; + +const decreaseTemp = () => { + state.temp -= 1; + changeLandscapeTemp(); +}; + +const searchLocation = () => { + axios + .get('http://localhost:5000/location', { + params: { + q: state.city, + }, + }) + .then((response) => { + console.log('success!' + JSON.stringify(response.data[0])); + state.lat = response.data[0].lat; + state.lon = response.data[0].lon; + changeCity(); + searchTemperature(); + }) + .catch((error) => { + console.log('searchLocation error: ' + error.response); + }); +}; + +const searchTemperature = () => { + axios + .get('http://localhost:5000/weather', { + params: { + lat: state.lat, + lon: state.lon, + }, + }) + .then((response) => { + console.log('success!' + JSON.stringify(response.data.current.temp)); + state.temp = convertKtoC(response.data.current.temp); + changeLandscapeTemp(); + }) + .catch((error) => { + console.log('searchTemperature error: ' + error.response); + }); +}; + +const changeCity = () => { + const newCity = document.getElementById('location_text').value; + const cityDisplay = document.getElementById('location_text'); + state.city = newCity; + cityDisplay.textContent = state.city; +}; + +const resetLocation = () => { + const locationInput = document.getElementById('location_text'); + locationInput.value = 'Denver'; + changeCity(); +}; + +const changeSky = () => { + // const currentSky = state.sky; + const skyInput = document.getElementById('sky_selector'); + const skyValue = skyInput.options[skyInput.selectedIndex].value; + console.log('sky_selector' + skyValue); + state.sky = skyValue; + const skyReturn = document.getElementById('sky_display'); + skyReturn.textContent = skies[state.sky]; +}; + +const registerEventHandlers = () => { + // changeCity(); + const changeLocationOnInput = document.querySelector('#location_text'); + changeLocationOnInput.addEventListener('change', searchLocation); + + // changeCity(); + const changeLocation = document.querySelector('#refresh_weather'); + changeLocation.addEventListener('click', searchLocation); + + const changeUnitsButton = document.querySelector('#temperature_units'); + changeUnitsButton.addEventListener('click', changeUnits); + + const increaseTempButton = document.querySelector('#increase'); + increaseTempButton.addEventListener('click', increaseTemp); + + const resetButton = document.querySelector('#reset'); + resetButton.addEventListener('click', reset); + + const decreaseTempButton = document.querySelector('#decrease'); + decreaseTempButton.addEventListener('click', decreaseTemp); + + const skySelector = document.querySelector('#sky_selector'); + skySelector.addEventListener('change', changeSky); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 000000000..9d1bd473f --- /dev/null +++ b/styles/style.css @@ -0,0 +1,72 @@ +html { + font-size: min(max(2rem, 4vw), 30px); + padding: calc(8px + 1.5625vw); + text-align: center; +} + +header { + padding: calc(8px + 1.5625vw); +} + +nav { + display: flex; + align-items: center; + flex-direction: row; + column-gap: 1rem; + row-gap: 0rem; + justify-content: center; +} + +figure { + flex-wrap: nowrap; + display: flex; + align-items: center; + flex-direction: row; + row-gap: 0rem; + margin-top: 0; + margin-bottom: 0; + justify-content: center; + flex: 25%; +} + +#weather_body { + display: flex; + flex-direction: column; + align-items: center; + background-image: + radial-gradient(rgba(100, 110, 10, 0.5), rgba(0, 0, 0, 0)); +} + +.ascii_art { + font-family: monospace; + font-size: 0.5rem; + line-height: 0.5rem; + text-align: center; + max-width: 32ch; + text-overflow: clip; +} + +#location_text { + font-weight: bold; + font-size: large; + text-align: center; +} + + +#weather_display { + display: flex; +} + +#numeric_temperature { + font-size: 8rem; + line-height: 90%; +} + +#units_div { + align-self: flex-start; + flex-shrink: 2; +} + +#change_temperature { + gap: 1rem; +} \ No newline at end of file