diff --git a/index.html b/index.html index cb54ac05d..b67e1232a 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,87 @@ - Weather Report - - + + + + + Weather Report + + + + + - +
+
+

Weather Report

+
+
+
+
+ +

+ 70 + ℉ +

+ +
+ +
+
+

Atlanta,
GA

+
+
+ + +
+
+

City Name:

+ +
+
+

Sky:

+ +
+
+
+
+

☁️ ☁️ ☁️ ☁️ ☀️ ☁️ ☁️ ☁️ ☁️

+
+
+

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

+
+
+
+ - \ No newline at end of file + + + + diff --git a/src/index.js b/src/index.js index e69de29bb..8639ceeec 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,155 @@ +const state = { + left_arrow: null, + right_arrow: null, + degreeCountLabel: null, + landscape: "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷", + degreeCount: 70, + textBox: null, + sky: "☁️ ☁️ ☁️ ☀️ ☁️ ☁️", + degreeCount: 70, + sky_options: null, + temp: 0, + tempDisplay: null, + cityHeader: null +} + +const convertKelvintoFahrenheight = (kelv_degree) => { + state.degreeCount = Math.floor((kelv_degree - 273.15) * 9/5 + 32) +} + +const findCityLocation = async (cityName) => { + await axios.get('http://localhost:5000/location', { + params: { + q: cityName + } + }) + .then(response => { + axios.get('http://localhost:5000/weather', { + params: { + lat: response.data[0].lat, + lon: response.data[0].lon + } + }).then(response => { + // state.temp = response.data.main.temp + // state.degreeCount = state.temp + convertKelvintoFahrenheight(response.data.main.temp) + state.degreeCountLabel.textContent = state.degreeCount + change_color() + console.log(state.degreeCount) + }) + }) + .catch((error) => { + console.log(error); + }) +} + +const resetCity = () => { + state.textBox.value = 'Atlanta' + state.cityHeader.innerText = 'Atlanta' + findCityLocation('Atlanta') +} + +findCityLocation() +// city, name, latitude, longitude, temp (state - global variables) + +const refreshUI = () => { + state.degreeCountLabel.textContent = state.degreeCount; +} + +const change_color = () => { + if (state.degreeCountLabel.textContent >= 80) + { + state.degreeCountLabel.style.color = 'red'; + change_landscape("🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂") + } else if (state.degreeCountLabel.textContent >= 70) { + state.degreeCountLabel.style.color = 'orange'; + change_landscape("🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷") + } else if (state.degreeCountLabel.textContent >= 60) + { + state.degreeCountLabel.style.color = 'gold'; + change_landscape("🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃") + } else if (state.degreeCountLabel.textContent >= 50) { + state.degreeCountLabel.style.color = 'green'; + change_landscape("🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲") + } else { + state.degreeCountLabel.style.color = 'teal'; + } +} + +const change_landscape = (garden) => { + state.landscape.textContent = garden; +} + +let decreaseDegree = (event) => { + --state.degreeCount; + change_color(); + refreshUI(); +} + +let increaseDegree = (event) => { + ++state.degreeCount; + change_color(); + refreshUI(); +} + +function updateCityName(event) { + if (event.key === "Enter") { + + const cityNameInput = document.getElementById('textbox'); + const cityName = cityNameInput.value.trim(); + + const cityElement = document.getElementById('city-header'); + cityElement.textContent = cityName; + findCityLocation(cityName) + } + } +let changeSky = (event) => { + console.log(event.target.value); + if (event.target.value == 'sunny') { + state.sky.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️' + } else if (event.target.value == 'cloudy') { + state.sky.textContent = '☁️☁️ ☁️ ☁️ ☁️ 🌤 ☁️ ☁️☁️' + } else if ( event.target.value == 'rainy') { + state.sky.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧' + } else { + state.sky.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨' + } +} + // Updatecity name - takes location and updates city + // city and state object + +const loadControls = () => { + state.degreeCountLabel = document.getElementById('degrees') + state.left_arrow = document.querySelector('.fa-chevron-left'); + state.right_arrow = document.querySelector('.fa-chevron-right'); + state.landscape = document.getElementById('landscape') + state.textBox = document.getElementById('textbox') + console.log(state) + state.landscape = document.getElementById('landscape'); + state.sky_options = document.querySelector('.select-sky'); + state.sky = document.getElementById('sky'); + state.resetCity = document.getElementById('reset-city'); + state.cityHeader = document.getElementById('city-header'); +} + +const registerEvents = () => { + state.left_arrow.addEventListener('click', decreaseDegree); + state.right_arrow.addEventListener('click', increaseDegree); + state.textBox.addEventListener('keypress',updateCityName) + state.sky_options.addEventListener('change', changeSky); + state.resetCity.addEventListener('click', resetCity) +} + +const onLoaded = () => { + // steps to carry out when the page has loaded + loadControls(); + registerEvents(); + refreshUI(); +}; + + // we would usually run the onLoaded function in + // response to the document finishing loading, but in + // code sandbox, the page has already loaded by the + // time our script is added to the page. + // document.addEventListener("DOMContentLoaded", onLoaded); +onLoaded(); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..d99813ccf 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,184 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 5px 10px; +} + +body { + /* background-color: #0c79bd; */ + background: rgb(12,121,189); + background: linear-gradient(180deg, rgba(12,121,189,1) 37%, rgba(12,121,189,0.46680679107580536) 100%); + /* height: 100vh; */ + min-height: 100vh; +} + +.container { + display: flex; + flex-flow: column wrap; + gap: 20px; + width: 75vw; + height: 85vh; + margin: 5rem auto; + border-radius: 15px; +} + +.row { + /* border: 2px solid red; */ +} + +h1 { + border-bottom: 2px solid black; +} + +.row.weather-for-city, +.row.choose-city-sky, +.row.weather-garden { + background-color: rgba(248, 248, 255, 0.305); +} + +h2, +.row.weather-for-city section, +.row.choose-city-sky section { + display: inline-block; +} + +.row.weather-for-city { + flex-grow: 1; +} + +.row.choose-city-sky { + flex-grow: 0.25; +} + +.row.weather-garden { + flex-grow: 2; +} + +.row.weather-for-city, +.row.choose-city-sky { + display: flex; + align-items: center; + justify-content: space-between; +} + +h1, +#city > h2, +h4, +.fa-solid { + font-family: 'Kanit', sans-serif; +} + +#city > h2 { + text-align: right; +} + +h2 { + font-size: 4em; +} + +#city > h2, +h4 { + font-size: 2em; +} + +#temperature { + text-align: center; +} + +#temperature div { + height: 90px; +} + +#temperature div h2 { + position: relative; + top: 12px; + right: 5px; +} + +#reset-city { + width: 325px; + height: 40px; + border-radius: 5px; + font-size: 16px; + color: white; + border: 1px solid #005922; + background-color: #005922; +} + +.choose-city > #textbox { + width: 300px; + height: 25px; + border-radius: 5px; + border: 1px solid #005922; + background-color: transparent; +} + +.choose-sky { + width: 360px; +} + +.choose-sky select { + width: 150px; + height: 35px; + border-radius: 5px; + border: 1px solid #005922; + color: white; + background-color: #005922; +} + +select > option:hover { + background-color: #005922; +} + + +.row.weather-garden #landscape, +.row.weather-garden #sky { + width: 100%; + text-align: center; + letter-spacing: 20px; + font-size: 3rem; +} + +.row.weather-garden #sky { + height: 50%; +} + +.red { +color: red; +} + +.orange { +color: orange; +} + +.yellow { +color: gold; +} + +.yellow-green { +color: yellowgreen; +} + +.green { +color: green; +} + +.teal { +color: teal; +} + +.cloudy { +background-color: lightgrey; +} + +.sunny { +background-color: rgb(221, 255, 255); +} + +.rainy { +background-color: lightblue; +} + +.snowy { +background-color: lightsteelblue; +} \ No newline at end of file