Skip to content
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

Open
wants to merge 46 commits into
base: main
Choose a base branch
from
Open

Completed JS Weather Report #63

wants to merge 46 commits into from

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