-
Notifications
You must be signed in to change notification settings - Fork 85
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
Completed JS Weather Report #63
base: main
Are you sure you want to change the base?
Conversation
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.
Great work, Sydney + Agnes! 🥳
Thank you for your patience as we catch up on grading. Nice work! The HTML is structured well and the JS is clear and well-factored. This project is a Green. 🟢
Keep it up!
@@ -0,0 +1,208 @@ | |||
// // Location API | |||
const findLatitudeAndLongitude = async (city) => { |
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.
Great function naming + use of async
try { | ||
const response = await axios.get('https://weather-report-proxy-server-jk7z.onrender.com/location', | ||
{ | ||
params: { | ||
q: city, | ||
} | ||
}); | ||
|
||
latitude = response.data[0].lat; | ||
longitude = response.data[0].lon; | ||
return { latitude, longitude }; | ||
} catch (err) { |
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.
Great use of try/catch!
|
||
// OpenWeather API | ||
const findTemp = async () => { | ||
const cityname = state.cityName |
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.
Prefer cityName
here
|
||
latitude = response.data[0].lat; | ||
longitude = response.data[0].lon; | ||
return { latitude, longitude }; |
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.
🏁
// OpenWeather API | ||
const findTemp = async () => { | ||
const cityname = state.cityName | ||
const {latitude, longitude} = await findLatitudeAndLongitude(cityname) |
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.
👍🏾
const {latitude, longitude} = await findLatitudeAndLongitude(cityname) | ||
|
||
try { | ||
const response = await axios.get('https://weather-report-proxy-server-jk7z.onrender.com/weather', { |
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.
I never checked, where you able to deploy this successfully?
changeColorTemp() | ||
changeLandscape() |
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.
Smart choice!
const state = { | ||
tempNumber: null, | ||
cityName: "Atlanta", | ||
} |
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.
Nice job setting up state!
const registerEvents = () => { | ||
initialTemp() | ||
const decreaseButton = document.getElementById("decrease-button"); | ||
decreaseButton.addEventListener("click", decreaseTemp) | ||
const increaseButton = document.getElementById("increase-button"); | ||
increaseButton.addEventListener("click", increaseTemp) | ||
const cityTitle = document.querySelector("#city-input") | ||
cityTitle.addEventListener("input", changeCityName) | ||
const skySelect = document.getElementById("sky-selector") | ||
skySelect.addEventListener("change", changeSky) | ||
const searchCity = document.getElementById("real-temp-button") | ||
searchCity.addEventListener("click", findTemp) | ||
const resetButton = document.getElementById("reset-button") | ||
resetButton.addEventListener("click", resetCityToAtlanta) | ||
const celsius = document.getElementById('celsius') | ||
const fahrenheit = document.getElementById('fahrenheit') | ||
celsius.addEventListener('click', () => { | ||
if (celsius.classList.contains('active')) { | ||
return |
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.
Amazing work y'all 👍🏾
:root { | ||
--sunny: linear-gradient(-45deg, white, #a7e3eb, #2596be, #23a6d5); | ||
--cloudy: linear-gradient(-45deg, white, #a7e3eb, white, #a7e3eb); | ||
--rainy: linear-gradient(-45deg, #4d73b0, #88a6d6, #3b5a89, #668dca); | ||
--snowy: linear-gradient(-45deg, #dde6f3, #cdd8ea, #dde6f3, white); | ||
} | ||
|
||
* { | ||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif | ||
} | ||
|
||
.sunny { | ||
background: var(--sunny); | ||
background-size: 400% 400%; | ||
animation: gradient 15s ease infinite; |
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.
Nice work with this CSS 😍
<body id="sky-gradient" class="sunny"> | ||
<header> | ||
<section id="sky" class="weather-garden"> ☁️ ☁️ ☁️ ☀️ ☁️ ☁️ </section> | ||
<section> <h1 id="weather-report-title">Weather Report</h1> | ||
<h2 id="weather-saying">What's the weather like in...</h2> | ||
<section > | ||
<h2 id="city-title">Atlanta</h2> | ||
</section> | ||
</header> | ||
<main> | ||
<section id="tilecontainer"> | ||
<section id="searchbox" class="tiles"> | ||
<h3>Search Box For City</h3> | ||
<input id="city-input" type="text" name="City"> | ||
<button id="reset-button" class="bouncy"> Reset </button> | ||
</section> |
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!
No description provided.