Amethyst - Hannah & Phalesa #72
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 |
|---|---|---|
| @@ -0,0 +1,200 @@ | ||
| "use strict"; | ||
|
|
||
| const state = { | ||
| temperature: 70, | ||
| emoji: null, | ||
| sky: "😎🌈☁️🌧️😎🌈☁️🌧️😎🌈☁️🌧️😎🌈☁️🌧️😎🌈☁️", | ||
| skyEmoji: null, | ||
| lat: null, | ||
| lon: null | ||
| }; | ||
|
|
||
| // DOM elements | ||
| const temperatureElement = document.getElementById('temperature'); | ||
| const increaseBtn = document.getElementById('increase-btn'); | ||
| const decreaseBtn = document.getElementById('decrease-btn'); | ||
| const landscapeImg = document.getElementById('landscape-img'); | ||
| const emojiElement = document.getElementById('emoji'); | ||
| const cityElement = document.getElementById('city'); | ||
| const resetCityButton = document.getElementById('reset-city'); | ||
| const skyElement = document.getElementById('sky'); | ||
| const skyEmojiElement = document.getElementById('skyEmoji'); | ||
| const checkCurrentTempElement = document.getElementById('check-current-temp'); | ||
|
Comment on lines
+13
to
+22
There was a problem hiding this comment. Pieces of code like this are usually found in an event handler that runs on the event document.addEventListener("DOMContentLoaded", function () {
const increaseTemp = document.querySelector("#increase-temp");
const decreaseTemp = document.querySelector("#decrease-temp");
const displayTemp = document.querySelector("#display-temp");
const resetButton = document.querySelector("#reset-button");
const searchButton = document.querySelector("#search-button");
const cityName = document.getElementById("city-name");
const cityInput = document.getElementById("city-input");
const selectSky = document.querySelector("#sky-dropdown");
const result = document.querySelector("#sky");
const landscape = document.querySelector("#landscape");
increaseTemp.addEventListener("click", increaseTemperature);
decreaseTemp.addEventListener("click", decreaseTemperature);
...
}This is also usually found at the bottom of the file too, that way you can put all your function definitions for event handlers above it! |
||
| // const demoElement = document.getElementById('demo'); | ||
|
|
||
|
|
||
| // find city latitude and longitude | ||
| const findCityLocation = () => { | ||
| let lat; | ||
| let lon; | ||
| return axios.get('http://127.0.0.1:5000/location', { | ||
| params: { | ||
| q: document.getElementById("city").value | ||
| } | ||
| }) | ||
| .then( (response) => { | ||
| console.log(response) | ||
| console.log(document.getElementById("city").value); | ||
| lat = response.data[0]['lat']; | ||
| lon = response.data[0]['lon']; | ||
| console.log('success in findLatitudeAndLongitude!', lat, lon); | ||
| getWeather({ lat: lat, lon: lon}); | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error) | ||
| }); | ||
| }; | ||
|
Comment on lines
+27
to
+46
There was a problem hiding this comment. Here's an alternative to promise chaining! You can use the const findCityLocation = async () => {
let lat;
let lon;
const resp = await axios.get('http://127.0.0.1:5000/location', {
params: {
q: document.getElementById("city").value
}
})
try {
[lat, lon] = resp.data[0]
getWeather({ lat: lat, lon: lon});
} catch (error) {
console.log(error)
}
}; |
||
|
|
||
| const getWeather = (query) => { | ||
| axios.get('http://127.0.0.1:5000/weather', { | ||
| params: { | ||
| lat: query.lat, | ||
| lon: query.lon, | ||
| } | ||
| }) | ||
| .then((response) => { | ||
| console.log(response) | ||
| state.temperature = Math.floor((response.data["main"]["temp"] - 273.15) * 1.8 +32); | ||
| // document.getElementById("cityTemp").innerHTML = state.temperature; | ||
| updateTemperatureDisplay(state.temperature); | ||
| }) | ||
|
|
||
| .catch((error) => { | ||
| console.log(error) | ||
| }) | ||
| }; | ||
|
|
||
| const currentTempButton = () => { | ||
| // cityInput(); | ||
| findCityLocation(); | ||
| } | ||
|
|
||
| // const convertToF = (temperature) => { | ||
| // return Math.trunc((temperature-273.15) * 9 /5 + 32) | ||
| // } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // const findCityLocation = async (cityName) => { | ||
| // return axios.get('https://localhost:5000/location/weather', { | ||
| // params: { | ||
| // q: cityName, | ||
| // }, | ||
| // }) | ||
| // .then(response => { | ||
| // const temperature = response.data.temperature; | ||
| // updateTemperatureDisplay(temperature); | ||
| // console.log(temperature); | ||
| // }) | ||
| // .catch(error => { | ||
| // console.log(error); | ||
| // }); | ||
| // }; | ||
|
|
||
|
|
||
| // const checkTempButton = document.getElementById('check-current-temp'); | ||
| // checkTempButton.addEventListener('click', () => { | ||
| // const cityName = cityElement.value; | ||
| // findCityLocation(cityName); | ||
| // }); | ||
|
|
||
| // const resetCity = () => { | ||
| // cityElement.value = ''; | ||
| // // findCityLocation('Pittsburgh'); | ||
| // }; | ||
|
|
||
|
|
||
| // const refreshUI = () => { | ||
| // temperatureElement.textContent = state.temperature; | ||
| // }; | ||
|
|
||
|
|
||
| // Event listeners for the buttons | ||
| increaseBtn.addEventListener('click', increaseTemperature); | ||
| decreaseBtn.addEventListener('click', decreaseTemperature); | ||
| resetCityButton.addEventListener('click', resetCityName); | ||
| checkCurrentTempElement.addEventListener('click', cityInput); | ||
|
|
||
| // Function to increase the temperature | ||
| function increaseTemperature() { | ||
| state.temperature++; | ||
| updateTemperatureDisplay(state.temperature); | ||
| // findCityLocation(cityElement.value); | ||
| } | ||
|
|
||
| // Function to decrease the temperature | ||
| function decreaseTemperature() { | ||
| state.temperature--; | ||
| updateTemperatureDisplay(state.temperature); | ||
| // findCityLocation(cityElement.value); | ||
| } | ||
|
|
||
| // Function to reset city name & clear input field | ||
| function resetCityName() { | ||
| cityElement.value = ''; | ||
| cityInput(); | ||
| } | ||
|
|
||
| // Function to update the temperature display, change the text color, and update the landscape | ||
| function updateTemperatureDisplay(temperature) { | ||
| temperatureElement.textContent = `${temperature}°F`; | ||
|
|
||
| if (temperature >= 80) { | ||
|
There was a problem hiding this comment. I can tell you all had fun with this one LOL |
||
| temperatureElement.style.color = 'red'; | ||
| emojiElement.textContent = '☀️🏝️🥵🌞☀️☀️🏝️🥵🌞☀️☀️🏝️🥵🌞☀️☀️🏝️🥵🌞☀️☀️🏝️🥵🌞☀️☀️🏝️🥵🌞☀️🏝️🥵🌞'; | ||
| landscapeImg.src = 'styles/sunny1.jpeg'; | ||
| landscapeImg.alt = 'Sunny'; | ||
| } else if (temperature >= 70 && temperature <= 79) { | ||
| temperatureElement.style.color = 'grey'; | ||
| emojiElement.textContent = '🌞😶🌫️🌼🌷😎🍂🌤️🌞😶🌫️🌼🌷😎🍂🌤️🌞😶🌫️🌼🌷😎🍂🌤️🌞😶🌫️🌼🌷😎🍂🌤️'; | ||
| landscapeImg.src = 'styles/cloudy.jpeg'; | ||
| landscapeImg.alt = 'Cloudy'; | ||
| } else if (temperature >= 60 && temperature <= 69) { | ||
| temperatureElement.style.color = 'indigo'; | ||
| emojiElement.textContent = '☁️🫥🌦️🌧️🌤️🌧️☔️🌈☁️🫥🌦️🌧️🌤️🌧️☔️🌈☁️🫥🌦️🌧️🌤️🌧️☔️🌈☁️🫥🌦️🌧️🌤️🌧️☔️🌈'; | ||
| landscapeImg.src = 'styles/rainy.jpeg'; | ||
| landscapeImg.alt = 'Rainy'; | ||
| } else if (temperature >= 50 && temperature <= 59) { | ||
| temperatureElement.style.color = 'orange'; | ||
| emojiElement.textContent = '🌤️🍁🥮⛅️🍂😎🍃🌤️🍁🥮⛅️🍂😎🍃🌤️🍁🥮⛅️🍂😎🍃🌤️🍁🥮⛅️🍂😎🍃🌤️'; | ||
| landscapeImg.src = 'styles/autumn.jpeg'; | ||
| landscapeImg.alt = 'Autumn'; | ||
| } else { | ||
| temperatureElement.style.color = 'teal'; | ||
| emojiElement.textContent = '❄️❄️☃️☃️⛄️⛄️🤶🏾🥶🥶🥶⛄️⛄️⛄️❄️❄️❄️❄️🌨️🌨️🌨️🌨️☃️⛷️⛄️🤶🏾🥶❄️☃️🌨️☃️⛷️⛄️🤶🏾🥶❄️☃️'; | ||
| landscapeImg.src = 'styles/snowy.jpeg'; | ||
| landscapeImg.alt = 'Snowy'; | ||
| } | ||
| } | ||
|
|
||
| //function to return city input | ||
| function cityInput() { | ||
|
There was a problem hiding this comment. Nice, I see you used the hoisting functionality of the |
||
| let cityName = document.getElementById("city").value; | ||
| document.getElementById("cityChoice").innerHTML = cityName; | ||
| } | ||
| //function to update sky selection when there is a change | ||
| function skySelection() { | ||
| var choice = document.getElementById("sky").value; | ||
| updateSkyDisplay(); | ||
| } | ||
|
|
||
| function updateSkyDisplay() { | ||
| let sky = document.getElementById("sky").value | ||
|
|
||
| if (sky == "sunny") { | ||
| skyEmojiElement.textContent = '🌞😎☀️☀🌼😎🌞😎☀️☀🌼😎🌞😎☀️☀🌼😎🌞😎☀️☀🌼😎🌞😎☀️☀🌼😎🌞😎☀️'; | ||
|
|
||
| } else if (sky === "cloudy") { | ||
| skyEmojiElement.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️🌤 ☁️ ☁️☁️☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️☁️☁️☁️☁️ ☁️ 🌤 ☁️☁️☁️☁️🌤'; | ||
|
|
||
| } else if (sky === "rainy") { | ||
| skyEmojiElement.textContent = '🌦️🌧️🌧️☔️🌈🌦️🌧️🌧️☔️🌈🌦️🌧️🌧️☔️🌈🌦️🌧️🌧️☔️🌈🌦️🌧️🌧️☔️🌈🌦️🌧️🌧️☔️🌈🌦️🌧️🌧️'; | ||
|
|
||
| } else if (sky === "snowy") { | ||
| skyEmojiElement.textContent = '❄️❄️☃️☃️⛄️⛄️🤶🏾🥶🥶🥶⛄️⛄️⛄️❄️❄️❄️❄️🌨️🌨️🌨️🌨️☃️⛷️⛄️🤶🏾🥶❄️☃️🌨️☃️⛷️⛄️🤶🏾🥶❄️☃️❄️'; | ||
| } | ||
|
|
||
| } | ||
|
There was a problem hiding this comment. Awesome job everyone! You really ate this one up! Please feel free to reach out to me if you have any questions about the comments I left or if you want to discuss anything in greater detail! ⭐️ |
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,88 @@ | ||
| body { | ||
| font-family: 'Rubik', sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: rgba(194, 227, 232, 0.892); | ||
| } | ||
|
|
||
| header { | ||
| background-color: rgba(11, 31, 94, 0.906); | ||
| text-align: center; | ||
| color: rgb(255, 255, 255); | ||
| padding: 10px; | ||
| } | ||
|
|
||
| nav h1 { | ||
| color: rgb(255, 255, 255); | ||
| font-size: 25px; | ||
| } | ||
|
|
||
| #temperature-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 24px; | ||
| margin-top: 20px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| #temperature { | ||
| margin: 20px; | ||
| } | ||
|
|
||
| button { | ||
| padding: 8px 16px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| #emoji-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 2px; | ||
| } | ||
|
|
||
| #sky-emoji-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 2px; | ||
| } | ||
|
|
||
| #landscape-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 400px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| #landscape-img { | ||
| max-width: 700px; | ||
| max-height: 400px; | ||
| } | ||
|
|
||
| #sky-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 24px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| #city-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 24px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
|
|
||
| footer { | ||
| background-color: rgb(40, 12, 181); | ||
| font-size: 25px; | ||
| padding: 10px; | ||
| text-align: center; | ||
| color: rgb(255, 255, 255); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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.
Love how you all chose to use this psuedostate! I think that it is great practice for what you will see in React though it will be utilized differently!