Panthers--Maggie T #92
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "dependencies": { | ||
| "axios": "^1.2.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| //application states | ||
| const state = { | ||
| sky: 'sunny', | ||
| temperature: 0, | ||
| city: '', | ||
| }; | ||
|
Comment on lines
+2
to
+6
There was a problem hiding this comment. Instead of having a hard coded default sky state, how might you refactor this so the logic is more data driven? The sky should really be displayed based on the call to the api |
||
| const temperatureChangeStep = 1; | ||
|
|
||
|
|
||
| //references to all elements on the page | ||
| const elTemperature = document.querySelector('#temperature'); | ||
| const elIncreaseTemp = document.querySelector('#increaseTemp'); | ||
| const elDecreaseTemp = document.querySelector('#decreaseTemp'); | ||
| const elLandscape = document.querySelector('#landscape'); | ||
| const elCity = document.querySelector('#city'); | ||
| const elCityInput = document.querySelector('#cityInput'); | ||
| const elCityReset = document.querySelector('#cityReset'); | ||
| const elCitySearch = document.querySelector('#citySearch'); | ||
| const elSky = document.querySelector('#sky'); | ||
| const elSkyInput = document.querySelector('#skyInput'); | ||
|
|
||
| //event handlers to intercept user interactions | ||
| elSkyInput.addEventListener('change', (event) => { | ||
| setSky(event.target.value); | ||
| }); | ||
|
|
||
| elCityInput.addEventListener('input', (event) => { | ||
| setCity(event.target.value); | ||
| }); | ||
|
|
||
| elCityReset.addEventListener('click', (event) => { | ||
| setCity(''); | ||
| elCityInput.focus(); | ||
| }); | ||
|
Comment on lines
+30
to
+33
There was a problem hiding this comment. There's an issue with wave 06 (resetting the city name), the requirements specify that you must include a button that resets the city name & when a user clicks on this button, the city name will be set to a default name along with the temperature for that city. Currently your code is not displaying the city name when you reset the city. There was a problem hiding this comment. When you reset the city it should be updated to a selected city instead of an empty string like so: cityNameInput.value = 'Seattle'; |
||
|
|
||
| elCitySearch.addEventListener('click', (event) => { | ||
| searchCityWeather(state.city); | ||
| }); | ||
|
|
||
| elIncreaseTemp.addEventListener('click', (event) => { | ||
| increaseTemp(event.target.value); | ||
| }); | ||
|
|
||
| elDecreaseTemp.addEventListener('click', (event) => { | ||
| decreaseTemp(event.target.value); | ||
| }); | ||
|
|
||
| //functions to render state to the screen | ||
| const renderSky = () => { | ||
| const sky = state.sky; | ||
| let skyScape = 'unknown'; | ||
|
|
||
| if (sky === 'sunny') skyScape = '☀️'; | ||
| else if (sky === 'cloudy') skyScape = '☁️'; | ||
| else if (sky === 'rainy') skyScape = '🌧'; | ||
| else if (sky === 'snowy') skyScape = '🌨'; | ||
|
|
||
| elSky.innerText = skyScape; | ||
| }; | ||
|
|
||
| const renderTemperature = () => { | ||
| elTemperature.innerText = state.temperature; | ||
|
|
||
| const temp = state.temperature; | ||
| let color = 'teal'; | ||
| let landscape = '❄️❄️❄️❄️❄️'; | ||
|
|
||
| if (temp >= 80) { | ||
| color = 'red'; | ||
| landscape = '🔥🔥🔥🔥🔥'; | ||
| } else if (temp >= 70) { | ||
| color = 'orange'; | ||
| landscape = '😊😊😊😊😊'; | ||
| } else if (temp >= 60) { | ||
| color = 'yellow'; | ||
| landscape = '🌷🌷🌷🌷🌷'; | ||
| } else if (temp >= 50) { | ||
| color = 'green'; | ||
| landscape = '🐿🐿🐿🐿🐿'; | ||
| } | ||
|
|
||
| elTemperature.style.color = color; | ||
| elLandscape.innerText = landscape; | ||
| }; | ||
|
|
||
| const renderCity = () => { | ||
| elCity.innerText = state.city; | ||
| elCityInput.value = state.city; | ||
| }; | ||
|
|
||
| //setters for changing state and calling respective render functions | ||
| const setSky = (value) => { | ||
| state.sky = value; | ||
| renderSky(); | ||
| }; | ||
|
|
||
| const setTemperature = (value) => { | ||
| state.temperature = value; | ||
| renderTemperature(); | ||
| }; | ||
|
|
||
| const setCity = (value) => { | ||
| state.city = value; | ||
| renderCity(); | ||
| }; | ||
|
|
||
| //functions to run user actions | ||
| const increaseTemp = () => { | ||
| setTemperature(state.temperature + temperatureChangeStep); | ||
| }; | ||
|
|
||
| const decreaseTemp = () => { | ||
| setTemperature(state.temperature - temperatureChangeStep); | ||
| }; | ||
|
|
||
| const kelvinToFarenheit = (k) => 1.8 * (k - 273) + 32; | ||
|
|
||
|
|
||
| const searchCityWeather = (city) => { | ||
| console.log('searchCityWeather()', city); | ||
|
|
||
| //disable buttons to prevent multiple requests | ||
| elCitySearch.disabled = true; | ||
| elCityReset.disabled = true; | ||
|
|
||
| return fetchCityLatLong(city) | ||
| .then(fetchLatLongTemperature) | ||
| .then((temperature) => setTemperature(temperature)) | ||
| .catch(console.error) | ||
| .finally(() => { | ||
| elCitySearch.disabled = false; | ||
| elCityReset.disabled = false; | ||
| }); | ||
| }; | ||
|
|
||
| //use the city to get lat/long | ||
| const fetchCityLatLong = (city) => { | ||
| console.log('fetchCityLatLong()', city); | ||
|
There was a problem hiding this comment. Remember to remove debugging log statements |
||
| const url = `http://127.0.0.1:5000/location?q=${city}`; | ||
|
|
||
| return axios.get(url).then((response) => { | ||
| const { data } = response; | ||
| const firstResult = data[0]; | ||
| return { | ||
| lat: firstResult.lat, | ||
| lon: firstResult.lon, | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| // use lat/lon coordinates to get temperature | ||
| const fetchLatLongTemperature = (latLong) => { | ||
| const { lat, lon } = latLong; | ||
|
|
||
| console.log('fetchLatLongTemperature()', lat, lon); | ||
|
|
||
| const url = `http://127.0.0.1:5000/weather?lat=${lat}&lon=${lon}`; | ||
| return axios.get(url).then((response) => { | ||
| const { data } = response; | ||
| const tempK = data.main.temp; | ||
| const tempF = kelvinToFarenheit(tempK); | ||
| const tempRounded = Math.round(tempF); | ||
| console.log({ tempRounded, tempK, tempF }); | ||
|
|
||
| return tempRounded; | ||
| }); | ||
| }; | ||
|
|
||
| //initialization - render all state first | ||
| renderCity(); | ||
| renderTemperature(); | ||
| renderSky(); | ||
|
|
||
| //run initial search and show a temperature | ||
| setCity('Denver'); | ||
| searchCityWeather('Denver'); | ||
|
|
||
|
Comment on lines
+166
to
+174
There was a problem hiding this comment. Since your script file is included at the end of the HTML file, it's probably fine to invoke this directly. But prefer to register it to be called in response to the DOMContentLoaded event. In the similar live code we did, we did call our onLoaded function directly, since codesandbox got in the way of our code being able to see the DOMContentLoaded event. |
||
| // setTemperature(60) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
|
|
||
| body { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 30px; | ||
| background-color: rgb(136, 55, 211); | ||
| font-size: 120%; | ||
| flex-direction: column; | ||
| } | ||
|
Comment on lines
+2
to
+11
There was a problem hiding this comment. I would suggest adding media queries to account for all types of screen sizes |
||
|
|
||
| .card { | ||
| background-color: gray; | ||
| padding: 2em; | ||
| border-radius: 30px; | ||
| width: 100%; | ||
| height: 80%; | ||
| max-width: 420px; | ||
| margin: .5em; | ||
| font-family: 'Roboto Mono', monospace; | ||
| margin-top: 4em; | ||
| border: 1px solid purple; | ||
| } | ||
|
|
||
| button { | ||
| border-radius: 50%; | ||
| margin: .5em 1em; | ||
| height: 56px; | ||
| width: 55px; | ||
| border: 1px solid purple; | ||
| transition: 0.2s ease-in-out; | ||
| cursor: pointer; | ||
| font-size: 12px; | ||
| font-weight: 800; | ||
| } | ||
|
|
||
| button:hover { | ||
| background:rgb(214, 208, 202); | ||
| } | ||
|
|
||
| #cityInput { | ||
| border: 1px solid purple; | ||
| border-radius: 24px; | ||
| background-color: rgb(214, 208, 202); | ||
| color: black; | ||
| font-size: 105%; | ||
| font-family: inherit; | ||
| padding: 0.4em 1em; | ||
| width: 180px; | ||
| height: 24px; | ||
| } | ||
|
|
||
| #skyInput { | ||
| margin: 0; | ||
| width: calc(100% - 200px); | ||
| font-size: 105%; | ||
| border: 1px solid purple; | ||
| background-color: antiquewhite; | ||
| color: black; | ||
| font-family: inherit; | ||
| padding: 1.5em 1em; | ||
| float: left; | ||
|
|
||
| } | ||
|
|
||
| #decreaseTemp{ | ||
| font-size: 36px; | ||
| font-weight: 600; | ||
| } | ||
| #increaseTemp { | ||
| font-size: 28px; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
|
Comment on lines
+54
to
+75
|
||
|
|
||
| .landscapeSky{ | ||
| background-color: gray; | ||
| padding: 2em; | ||
| border-radius: 30px; | ||
| width: 100%; | ||
| max-width: 420px; | ||
| margin: .5em; | ||
| margin-bottom: 4em; | ||
| font-family: 'Roboto Mono', monospace; | ||
| font-size: 24px; | ||
| border: 1px solid purple; | ||
|
|
||
| } | ||
|
|
||
| h4 { | ||
| font-size: 30px; | ||
| font-family: 'Roboto Mono', monospace; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 48px; | ||
| font-family: 'Roboto Mono', monospace; | ||
| } | ||
|
|
||
| .red { | ||
| color: red; | ||
| } | ||
|
|
||
| .orange { | ||
| color: orange; | ||
| } | ||
|
|
||
| .yellow { | ||
| color: gold; | ||
| } | ||
|
|
||
| .yellow-green { | ||
| color: yellowgreen; | ||
| } | ||
|
|
||
| .green { | ||
| color: green; | ||
| } | ||
|
|
||
| .teal { | ||
| color: teal; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Markup looks great!