Panthers - Billie Betts #91
Conversation
index.html
Outdated
| </div> | ||
| <div class="grid-item-field"> | ||
| <p id="temp_field">🌷</p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Rather than hard-coding a value for UI elements (which just happens to match the initial value backing the control), I like to leave the initial markup blank, and update the UI on first load from the initial backing values in the JS code. So like here, leave off the emoji, then when the document loads, update the UI in the JS to show the initial sky and landscape value. This would protect us from changing the default starting JS value, but having it be out of sync with what the UI is showing.
I would tend to do this for any of the configurable elements (temperature, ground, sky, city).
|
|
||
| .header { | ||
| text-align: center; | ||
| font-family: "American Typewriter"; | ||
| font-size: 25px; | ||
| } | ||
|
|
||
| .city-header { | ||
| font-family: "Gill Sans"; | ||
| font-size: 45px; | ||
| } | ||
|
|
||
| .grid-container { | ||
| display: grid; |
There was a problem hiding this comment.
Amazing work with styling 👍🏾 I would suggest adding media queries to account for all types of screen sizes
|
|
||
| // CONDITIONS | ||
|
|
||
| let selectConditions = document.querySelectorAll('input[type="radio"]'); |
There was a problem hiding this comment.
Nice job using this radio, I'll allow it even though there's an issue with wave 05 (selecting the sky), the requirements specify that a user should select from a dropdown element.
| const HOW_YA_FEELIN = ['🥶', '😮💨', '😄', '😎', '😅', '🥵', '🤔']; | ||
| const HILLS_ARE_ALIVE = ['🧊', '🌲', '🌷', '🌻', '🌴', '🔥', '🌎']; |
| const updateTempies = (adjustedTemp) => { | ||
| let tempSetting = 6; | ||
|
|
||
| if (adjustedTemp > 99) { | ||
| tempSetting = 5; | ||
| } else if (adjustedTemp > 79) { | ||
| tempSetting = 4; | ||
| } else if (adjustedTemp > 65) { | ||
| tempSetting = 3; | ||
| } else if (adjustedTemp > 39) { | ||
| tempSetting = 2; | ||
| } else if (adjustedTemp > 14) { | ||
| tempSetting = 1; | ||
| } else if (adjustedTemp <= 14) { | ||
| tempSetting = 0; | ||
| } |
There was a problem hiding this comment.
Nice work with this conditional Billie!
| showField.innerHTML = HILLS_ARE_ALIVE[tempSetting]; | ||
| showYou.innerHTML = HOW_YA_FEELIN[tempSetting]; |
| const handleAdd = () => { | ||
| currentTemp++; | ||
| shownTemp.innerHTML = currentTemp; | ||
|
|
||
| updateTempies(currentTemp); | ||
| }; | ||
|
|
||
| const handleSub = () => { | ||
| currentTemp--; | ||
| shownTemp.innerHTML = currentTemp; | ||
|
|
||
| updateTempies(currentTemp); | ||
| }; |
| const modifyWeather = (weatherData) => { | ||
| let relevantData = [weatherData['main'], weatherData['weather']]; | ||
| let defTempCond = []; | ||
|
|
||
| let unmodifiedTemp = relevantData[0]['temp']; | ||
| let tempF = ((unmodifiedTemp - 273.15) * 9) / 5 + 32; | ||
| let modifiedTemp = tempF.toFixed(0); | ||
| defTempCond.push(modifiedTemp); | ||
|
|
||
| let condID = Number(relevantData[1][0]['id']); | ||
| let idToCond = 'sunny'; | ||
|
|
||
| if (condID > 800) { | ||
| idToCond = '⛅'; | ||
| } else if (condID === 800) { | ||
| idToCond = '✨'; | ||
| } else if (condID > 700) { | ||
| idToCond = '⛅'; | ||
| } else if (condID > 599) { | ||
| idToCond = '☃️'; | ||
| } else { | ||
| idToCond = '🌈'; | ||
| } | ||
|
|
||
| defTempCond.push(idToCond); | ||
| return defTempCond; | ||
| }; | ||
|
|
There was a problem hiding this comment.
Consider moving this outside of the function to separate concerns but great work with this approach 🏁
| .get('http://127.0.0.1:5000/location', { | ||
| params: { | ||
| q: currentCity, | ||
| format: 'json', | ||
| }, | ||
| }) | ||
| .then((response) => { | ||
| locationData = response.data; | ||
|
|
||
| const modifyLocation = (locationData) => { | ||
| let latlon = []; | ||
| let focusLocation = locationData[0]; | ||
|
|
||
| let focusLat = Number(focusLocation['lat']); | ||
| let adjustLat = focusLat.toFixed(2); | ||
| latlon.push(adjustLat); | ||
|
|
||
| let focusLon = Number(focusLocation['lon']); | ||
| let adjustLon = focusLon.toFixed(2); | ||
| latlon.push(adjustLon); | ||
|
|
||
| return latlon; | ||
| }; | ||
|
|
||
| modifiedLocData = modifyLocation(locationData); | ||
|
|
||
| axios | ||
| .get('http://127.0.0.1:5000/weather', { | ||
| params: { |
There was a problem hiding this comment.
Consider breaking this function up a bit. It's taking on a lot responsibilty. Whenever we see a function that is more than 10 lines long we should consider seprating concerns. This is completely preferential but just a note. More on this here:
https://dmitripavlutin.com/the-art-of-writing-small-and-plain-functions/
No description provided.