Skip to content

Completed JS Weather Report#63

Open
SydneyALV wants to merge 46 commits intoAda-C19:mainfrom
SydneyALV:main
Open

Completed JS Weather Report#63
SydneyALV wants to merge 46 commits intoAda-C19:mainfrom
SydneyALV:main

Conversation

@SydneyALV
Copy link

No description provided.

Copy link

@ameerrah9 ameerrah9 left a 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) => {

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

Comment on lines +4 to +15
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) {

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

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 };

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)

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', {

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?

Comment on lines +44 to +45
changeColorTemp()
changeLandscape()

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smart choice!

Comment on lines +51 to +54
const state = {
tempNumber: null,
cityName: "Atlanta",
}

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!

Comment on lines +173 to +191
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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work y'all 👍🏾

Comment on lines +2 to +16
: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;

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 😍

Comment on lines +12 to +27
<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>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markup looks great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants