Skip to content

Completed JS Weather Report#63

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

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

Conversation

@SydneyALV

Copy link
Copy Markdown

No description provided.

@ameerrah9 ameerrah9 left a comment

Copy link
Copy Markdown

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!

Comment thread src/index.js
@@ -0,0 +1,208 @@
// // Location API
const findLatitudeAndLongitude = async (city) => {

Copy link
Copy Markdown

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 thread src/index.js
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) {

Copy link
Copy Markdown

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!

Comment thread src/index.js

// OpenWeather API
const findTemp = async () => {
const cityname = state.cityName

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Prefer cityName here

Comment thread src/index.js

latitude = response.data[0].lat;
longitude = response.data[0].lon;
return { latitude, longitude };

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🏁

Comment thread src/index.js
// OpenWeather API
const findTemp = async () => {
const cityname = state.cityName
const {latitude, longitude} = await findLatitudeAndLongitude(cityname)

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

👍🏾

Comment thread src/index.js
const {latitude, longitude} = await findLatitudeAndLongitude(cityname)

try {
const response = await axios.get('https://weather-report-proxy-server-jk7z.onrender.com/weather', {

Copy link
Copy Markdown

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 thread src/index.js
Comment on lines +44 to +45
changeColorTemp()
changeLandscape()

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Smart choice!

Comment thread src/index.js
Comment on lines +51 to +54
const state = {
tempNumber: null,
cityName: "Atlanta",
}

Copy link
Copy Markdown

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 thread src/index.js
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

Copy link
Copy Markdown

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 thread styles/index.css
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;

Copy link
Copy Markdown

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 thread index.html
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>

Copy link
Copy Markdown

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