Sharks - Philomena Kelly #75
Conversation
There was a problem hiding this comment.
Good job,Philomena! Your JS is very well-organized! One thing to consider is how can we dry up a few of the functions that are a long list of if statements and re-assigning state variables?
Something we could do is fatten up state with all of these values, like the image urls in updateLandscape that correlate to the sky or the temperature. For example:
const state = {
stats: [
{ upperBound: 49, color: "teal", ground: "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"},
{ upperBound: 60, color: "yellow", ground: "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"}
]
}Now we can iterate through our hard coded values that correlate to the right temp or sky by referencing a key just once. That's really all I saw that could be dried up! Nicely done!
| updateCity(); | ||
| }; | ||
|
|
||
| updateTempAndColor(); |
There was a problem hiding this comment.
Hmm should this be floating here outside a function? I think the only thing you should initialize or execute immediately when the script file loads is state. Everything else should be triggered by an event
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <input id="city" placeholder="location"><img src="https://cultofthepartyparrot.com/parrots/hd/parrot.gif" id="cityButton" height="25px"> | ||
| <br> | ||
| <img src="https://pngimg.com/uploads/sun/sun_PNG13420.png" alt="sun" height="25px" id="warmer"> | ||
| <p id="weather">75</p> | ||
| <img src="https://pngimg.com/uploads/snowflakes/snowflakes_PNG7593.png" alt="snowflake" height="25px" id="colder"> | ||
|
|
||
| <script src="/src/index.js"></script> | ||
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | ||
| </body> | ||
| </html> |
No description provided.