-
Notifications
You must be signed in to change notification settings - Fork 527
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Lions - Ariel & Kate - Weather Report #21
base: main
Are you sure you want to change the base?
Changes from all commits
101c130
60d98f1
90d0f56
18958fa
13066e8
4f71dbd
8b1544f
6bd53ad
69da9c6
c193365
443d9ee
257a36f
bbab1b5
266e46d
de7affb
01896e8
75a9963
bfb6f78
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,8 +5,55 @@ | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Weather Report</title> | ||
<link href="./styles/index.css" rel="stylesheet"> | ||
</head> | ||
<body> | ||
|
||
<header> | ||
<h1>WEATHER REPORT</h1> | ||
</header> | ||
<!-- <section> --> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't forget to clean up comments once they're no longer needed. |
||
<div class="left-column box" id="temp-input"> | ||
<h2 id="temperature-text">TEMPERATURE</h2> | ||
|
||
<button type="button" id="increase-temp">⬆️</button> | ||
<p id="temp">72</p> | ||
<button type="button" id="decrease-temp">⬇️</button> | ||
<button type="button" id="realtime-temp">Get Realtime Temperature</button> | ||
</div> | ||
<div class="left-column box" id="sky-input"> | ||
<h2 id="sky-text">SKY</h2> | ||
<!-- dropdown source: https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp --> | ||
<form id="dropdown"> <!-- Not sure what this is supposed to look like --> | ||
<select name="sky" id="sky-select"> | ||
<option value="sunny">Sunny</option> | ||
<option value="cloudy">Cloudy</option> | ||
<option value="rainy">Rainy</option> | ||
<option value="snowy">Snowy</option> | ||
</select> | ||
<br><br> | ||
</form> | ||
Comment on lines
+23
to
+34
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This works well! A few thoughts:
|
||
</div> | ||
<div class="left-column box" id="city-input"> | ||
<h2>CITY NAME</h2> | ||
<!-- blank field source: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_target--> | ||
<form action="/action_page.php" method="get" target="_blank"> | ||
<input type="text" id="city-name-input" name="city-name-input"> | ||
</form> | ||
Comment on lines
+38
to
+41
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I there are better ways to do this using JavaScript. Right now your form attempts to use |
||
<button id="reset-city-name-2">Reset</button> | ||
</div> | ||
<div class="right-column" id="city-container"> | ||
<h2 id="city-display">✨ Seattle ✨</h2> | ||
</div> | ||
<div id="weather-text"> | ||
<h2>WEATHER GARDEN</h2> | ||
</div> | ||
<div class="right-column box" id="emoji-display"> | ||
<p id="sky-container">☁️ ☁️ ☁️ ☀️ ☁️ ☁️</p> | ||
<p id="landscape">🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷</p> | ||
</div> | ||
<!-- </section> --> | ||
<script src="src/index.js" type="text/javascript"></script> | ||
<script src="./node_modules/axios/dist/axios.min.js"></script> | ||
</body> | ||
</html> | ||
</html> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
Comment on lines
+9
to
+11
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Removed unneeded |
||
axios | ||
.get('http://127.0.0.1:5000/location', { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Consider having a global constant for the URL. |
||
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'); | ||
Comment on lines
+33
to
+34
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We can use |
||
console.log(cityTemp); | ||
const tempFahrenheit = | ||
(parseInt(cityTemp) - parseInt(273.15)) * 1.8 + 32; | ||
Comment on lines
+36
to
+37
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like this logic! However, we don't need to do |
||
console.log(tempFahrenheit); | ||
tempDisplay.textContent = tempFahrenheit; | ||
colorTempChange(tempDisplay); | ||
const landscape = landscapeChange(tempDisplay); | ||
|
||
const landscapeContainer = document.getElementById('landscape'); | ||
landscapeContainer.textContent = landscape; | ||
}); | ||
}) | ||
Comment on lines
+12
to
+46
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice job with the multiple API calls! As an alternative, can you consider how you could do this with promise chaining instead? |
||
.catch((error) => { | ||
console.log('error!'); | ||
console.log(error); | ||
}); | ||
}; | ||
Comment on lines
+9
to
+51
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There's a lot that goes on in this function! Can you consider how this could be broken down into helpers? |
||
|
||
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; | ||
}; | ||
Comment on lines
+53
to
+71
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These work well! As an alternative, can you think of how they could be combined into one function to make your code more DRY? |
||
|
||
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'; | ||
} | ||
}; | ||
Comment on lines
+73
to
+85
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The last |
||
|
||
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; | ||
Comment on lines
+103
to
+104
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Consider getting this value from the event instead of hardcoding the id. |
||
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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice job registering! Consider using the more robust form or registering that was at the bottom of the crab fan site example. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
Comment on lines
+5
to
+12
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice grid! Consider using |
||
|
||
/* .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; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍🏻