diff --git a/README.md b/README.md index 8e4b04468..be99eafa6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,21 @@ # Weather Report +##Pair Plan of Action +1. Access needs + 1. Open to working together until 6 PM after class + 2. Prefer in-person + 3. Communication via text and Slack +2. Learning styles + 1. Prepare and process individually before meeting and planning + 2. Refer to examples +3. How you prefer to receive feedback + 1. Nicely and politely + 2. Immediately if there is an issue + 3. Open to constructive criticism +4. Communication skills to improve + 1. Taking turns driving and navigating + 2. Communicate code more efficiently + ## Skills Assessed - Following directions and reading comprehension diff --git a/index.html b/index.html index 68b320b9a..7e8c32207 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,55 @@ Weather Report + - +
+

WEATHER REPORT

+
+ +
+

TEMPERATURE

+ + +

72

+ + +
+
+

SKY

+ + +
+
+

CITY NAME

+ +
+ +
+ +
+
+

✨ Seattle ✨

+
+
+

WEATHER GARDEN

+
+
+

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

+

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

+
+ + + - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index e69de29bb..94d76edc9 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,164 @@ +'use strict'; + +//eevent happens (clicking on the get realtime temp) +//take in city from city-input +//request location api to return lat and lon, using city name +//using the returned lat and lon, request weather api to return temperature +//convert temp from kelvin to farhenheit +//set that value as temp display +const getTempFromCoordinates = () => { + const cityInput = document.getElementById('city-display').textContent; + console.log(cityInput); + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: cityInput, + }, + }) + .then((response) => { + console.log('success', response); + const return_obj = { + lat: response.data[0].lat, + lon: response.data[0].lon, + }; + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: return_obj['lat'], + lon: return_obj['lon'], + }, + }) + .then((weatherResponse) => { + console.log(weatherResponse); + const cityTemp = weatherResponse.data['main']['temp']; + let tempDisplay = document.getElementById('temp'); + console.log(cityTemp); + const tempFahrenheit = + (parseInt(cityTemp) - parseInt(273.15)) * 1.8 + 32; + console.log(tempFahrenheit); + tempDisplay.textContent = tempFahrenheit; + colorTempChange(tempDisplay); + const landscape = landscapeChange(tempDisplay); + + const landscapeContainer = document.getElementById('landscape'); + landscapeContainer.textContent = landscape; + }); + }) + .catch((error) => { + console.log('error!'); + console.log(error); + }); +}; + +const increaseTemp = () => { + const currentTemp = document.getElementById('temp'); + currentTemp.textContent = parseInt(currentTemp.textContent) + 1; + colorTempChange(currentTemp); + + const landscapeContainer = document.getElementById('landscape'); + const landscape = landscapeChange(currentTemp); + landscapeContainer.textContent = landscape; +}; + +const decreaseTemp = () => { + const currentTemp = document.getElementById('temp'); + currentTemp.textContent = parseInt(currentTemp.textContent) - 1; + colorTempChange(currentTemp); + + const landscapeContainer = document.getElementById('landscape'); + const landscape = landscapeChange(currentTemp); + landscapeContainer.textContent = landscape; +}; + +const colorTempChange = (temp) => { + if (parseInt(temp.textContent) >= 80) { + temp.style.color = '#FF0000'; + } else if (parseInt(temp.textContent) >= 70) { + temp.style.color = '#FFA500'; + } else if (parseInt(temp.textContent) >= 60) { + temp.style.color = '#D1D100'; + } else if (parseInt(temp.textContent) >= 50) { + temp.style.color = '#00FF00'; + } else if (parseInt(temp.textContent) <= 49) { + temp.style.color = '#00AEAE'; + } +}; + +const landscapeChange = (temp) => { + let landscape = ''; + if (parseInt(temp.textContent) >= 80) { + landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; + } else if (parseInt(temp.textContent) >= 70) { + landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (parseInt(temp.textContent) >= 60) { + landscape = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; + } else if (parseInt(temp.textContent) >= 50) { + landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } else if (parseInt(temp.textContent) <= 49) { + landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } + return landscape; +}; + +const skyChangeOnSelect = () => { + const selectedSky = document.getElementById('sky-select').value; + const skyContainer = document.getElementById('sky-container'); + const skyEmojiDisplay = skyChange(selectedSky); + skyContainer.textContent = skyEmojiDisplay; + console.log(document.getElementById('sky-select')); + console.log(skyEmojiDisplay); + console.log(selectedSky); +}; + +const skyChange = (skySelect) => { + let skyEmoji = ''; + if (skySelect === 'sunny') { + skyEmoji = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️'; + } else if (skySelect === 'cloudy') { + skyEmoji = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️'; + } else if (skySelect === 'rainy') { + skyEmoji = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧'; + } else if (skySelect === 'snowy') { + skyEmoji = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'; + } + return skyEmoji; +}; + +const displayCityName = () => { + const inputCity = document.getElementById('city-name-input').value; + const displayCityContainer = document.getElementById('city-display'); + + displayCityContainer.textContent = '✨ ' + inputCity + ' ✨'; +}; + +const resetCityName = () => { + const inputCity = document.getElementById('city-name-input'); + const cityNameDisplay = document.getElementById('city-display'); + inputCity.value = 'Seattle'; + cityNameDisplay.textContent = 'Seattle'; + console.log(inputCity); + console.log(inputCity.value); +}; + +// const response = get_location(); +// const long = response[0]['lat']; + +const registerEventHandlers = () => { + const increaseButton = document.getElementById('increase-temp'); + const decreaseButton = document.getElementById('decrease-temp'); + const cityInputForm = document.getElementById('city-name-input'); + const selectedSky = document.getElementById('sky-select'); + const realtimeTempButton = document.getElementById('realtime-temp'); + const resetButton = document.getElementById('reset-city-name-2'); + // const cityNameDisplay = document.getElementById('city-display'); + + increaseButton.addEventListener('click', increaseTemp); + decreaseButton.addEventListener('click', decreaseTemp); + cityInputForm.addEventListener('input', displayCityName); + selectedSky.addEventListener('change', skyChangeOnSelect); + realtimeTempButton.addEventListener('click', getTempFromCoordinates); + resetButton.addEventListener('click', resetCityName); + // cityNameDisplay.addEventListener('change', resetCityName); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..2220808f9 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,139 @@ +#temp { + color: #FFA500; +} + +body { + display: grid; + width: 100vw; + height: 100vh; + grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%; + grid-template-rows: 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3%; + background-color: rgb(165, 212, 243); +} + +/* .box { + border-radius: 30px; + background-color: bisque; +} */ + +header { + grid-row: 2 / 2; + grid-column: 2 / 7; + display: grid; + justify-self: center; + +} + +#temp-input { + display: grid; + grid-row: 4 / 6; + grid-column: 2 / 4; + flex-direction: column; + grid-template-columns: 20% 20% 20% 20% 20%; + grid-template-rows: 20% 20% 20% 20% 20%; + column-gap: 10px; +} + +#decrease-temp { + display: flex; + grid-row: 5/5; + grid-column: 3/4; + justify-self: center; + align-self: center; +} + +#increase-temp { + display: flex; + grid-row: 2/3; + grid-column: 3/4; + justify-self: center; + align-self: center; +} + +#temperature-text { + display: grid; + grid-row: 1/1; + grid-column: 1/6; + justify-self: center; + align-self: center; +} + +#temp { + display: flex; + grid-row: 3/3; + grid-column: 3/3; + justify-self: center; +} + +#realtime-temp { + display: flex; + grid-row: 3/5; + grid-column: 5/6; + justify-self: center; + align-self: center; +} + +#sky-input { + grid-row: 7 / 9; + grid-column: 2 / 4; + flex-direction: column; + /* display: flex; + column-gap: 10px; */ + display: grid; + grid-template-rows: 50% 50% ; + border-radius: 20px; + justify-self: center; + align-self: center; +} + +#sky-text { + grid-row: 1 / span 1; +} + +#dropdown { + grid-row: 2 / span 1; +} + +#city-input { + display: flex; + grid-row: 9 / 12; + grid-column: 2 / 4; + flex-direction: column; + column-gap: 10px; + justify-self: center; + align-self: center; +} + +#city-container { + grid-row: 4 / 5; + grid-column: 5 / 8; + display: grid; + justify-self: center; +} + +#weather-text { + display: grid; + grid-row: 6 / 7; + grid-column: 5 / 8; + justify-self: center; +} + +#emoji-display { + grid-row: 7 / 9; + grid-column: 5 / 8; + display: grid; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 6.25% 87.5% 6.25%; +} + +#sky-container { + grid-row: 1 / span 1; + grid-column: 2 / span 1; + justify-self: center; +} + +#landscape { + grid-row: 3 / span 1; + grid-column: 2 / span 1; + justify-self: center; +} \ No newline at end of file