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

Lions - Ariel & Kate - Weather Report #21

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
# Weather Report

##Pair Plan of Action
1. Access needs
1. Open to working together until 6 PM after class
2. Prefer in-person
3. Communication via text and Slack
2. Learning styles
1. Prepare and process individually before meeting and planning
2. Refer to examples
3. How you prefer to receive feedback
1. Nicely and politely
2. Immediately if there is an issue
3. Open to constructive criticism
4. Communication skills to improve
1. Taking turns driving and navigating
2. Communicate code more efficiently
Comment on lines +3 to +17

Choose a reason for hiding this comment

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

👍🏻


## Skills Assessed

- Following directions and reading comprehension
Expand Down
51 changes: 49 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,55 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
<link href="./styles/index.css" rel="stylesheet">
</head>
<body>

<header>
<h1>WEATHER REPORT</h1>
</header>
<!-- <section> -->

Choose a reason for hiding this comment

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

Don't forget to clean up comments once they're no longer needed.

<div class="left-column box" id="temp-input">
<h2 id="temperature-text">TEMPERATURE</h2>

<button type="button" id="increase-temp">⬆️</button>
<p id="temp">72</p>
<button type="button" id="decrease-temp">⬇️</button>
<button type="button" id="realtime-temp">Get Realtime Temperature</button>
</div>
<div class="left-column box" id="sky-input">
<h2 id="sky-text">SKY</h2>
<!-- dropdown source: https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp -->
<form id="dropdown"> <!-- Not sure what this is supposed to look like -->
<select name="sky" id="sky-select">
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
<br><br>
</form>
Comment on lines +23 to +34

Choose a reason for hiding this comment

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

This works well! A few thoughts:

  • Have SKY be in a label instead of an h2 so it gets associated with the select.
  • I appreciate you linking to where you got code from!
  • Try to avoid using br. Use CSS to adjust spacing where needed instead.

</div>
<div class="left-column box" id="city-input">
<h2>CITY NAME</h2>
<!-- blank field source: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_target-->
<form action="/action_page.php" method="get" target="_blank">
<input type="text" id="city-name-input" name="city-name-input">
</form>
Comment on lines +38 to +41

Choose a reason for hiding this comment

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

I there are better ways to do this using JavaScript. Right now your form attempts to use action_page.php - something that doesn't exist on your site. It's OK to look up how to do things online, but tey to always make sure you understand what each part is doing.

<button id="reset-city-name-2">Reset</button>
</div>
<div class="right-column" id="city-container">
<h2 id="city-display">✨ Seattle ✨</h2>
</div>
<div id="weather-text">
<h2>WEATHER GARDEN</h2>
</div>
<div class="right-column box" id="emoji-display">
<p id="sky-container">☁️ ☁️ ☁️ ☀️ ☁️ ☁️</p>
<p id="landscape">🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷</p>
</div>
<!-- </section> -->
<script src="src/index.js" type="text/javascript"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</body>
</html>
</html>

164 changes: 164 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
'use strict';

//eevent happens (clicking on the get realtime temp)
//take in city from city-input
//request location api to return lat and lon, using city name
//using the returned lat and lon, request weather api to return temperature
//convert temp from kelvin to farhenheit
//set that value as temp display
const getTempFromCoordinates = () => {
const cityInput = document.getElementById('city-display').textContent;
console.log(cityInput);
Comment on lines +9 to +11

Choose a reason for hiding this comment

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

Removed unneeded console.logs

axios
.get('http://127.0.0.1:5000/location', {

Choose a reason for hiding this comment

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

Consider having a global constant for the URL.

params: {
q: cityInput,
},
})
.then((response) => {
console.log('success', response);
const return_obj = {
lat: response.data[0].lat,
lon: response.data[0].lon,
};
axios
.get('http://127.0.0.1:5000/weather', {
params: {
lat: return_obj['lat'],
lon: return_obj['lon'],
},
})
.then((weatherResponse) => {
console.log(weatherResponse);
const cityTemp = weatherResponse.data['main']['temp'];
let tempDisplay = document.getElementById('temp');
Comment on lines +33 to +34

Choose a reason for hiding this comment

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

We can use const in both cases here.

console.log(cityTemp);
const tempFahrenheit =
(parseInt(cityTemp) - parseInt(273.15)) * 1.8 + 32;
Comment on lines +36 to +37

Choose a reason for hiding this comment

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

I like this logic! However, we don't need to do parseInt on a literal we define ourself. We could either just have it as 273.15 or 273, whichever we wanted. Also, consider moving this logic to a helper function.

console.log(tempFahrenheit);
tempDisplay.textContent = tempFahrenheit;
colorTempChange(tempDisplay);
const landscape = landscapeChange(tempDisplay);

const landscapeContainer = document.getElementById('landscape');
landscapeContainer.textContent = landscape;
});
})
Comment on lines +12 to +46

Choose a reason for hiding this comment

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

Nice job with the multiple API calls! As an alternative, can you consider how you could do this with promise chaining instead?

.catch((error) => {
console.log('error!');
console.log(error);
});
};
Comment on lines +9 to +51

Choose a reason for hiding this comment

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

There's a lot that goes on in this function! Can you consider how this could be broken down into helpers?


const increaseTemp = () => {
const currentTemp = document.getElementById('temp');
currentTemp.textContent = parseInt(currentTemp.textContent) + 1;
colorTempChange(currentTemp);

const landscapeContainer = document.getElementById('landscape');
const landscape = landscapeChange(currentTemp);
landscapeContainer.textContent = landscape;
};

const decreaseTemp = () => {
const currentTemp = document.getElementById('temp');
currentTemp.textContent = parseInt(currentTemp.textContent) - 1;
colorTempChange(currentTemp);

const landscapeContainer = document.getElementById('landscape');
const landscape = landscapeChange(currentTemp);
landscapeContainer.textContent = landscape;
};
Comment on lines +53 to +71

Choose a reason for hiding this comment

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

These work well! As an alternative, can you think of how they could be combined into one function to make your code more DRY?


const colorTempChange = (temp) => {
if (parseInt(temp.textContent) >= 80) {
temp.style.color = '#FF0000';
} else if (parseInt(temp.textContent) >= 70) {
temp.style.color = '#FFA500';
} else if (parseInt(temp.textContent) >= 60) {
temp.style.color = '#D1D100';
} else if (parseInt(temp.textContent) >= 50) {
temp.style.color = '#00FF00';
} else if (parseInt(temp.textContent) <= 49) {
temp.style.color = '#00AEAE';
}
};
Comment on lines +73 to +85

Choose a reason for hiding this comment

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

The last else if can just be an else. Also, consider using classes instead of setting the color directly. This allows us to have all the styling information the the CSS file, and allows us easily have other type of styling be impacted by the temperature (for example if we decided we wanted the font to change depending on the temperature as well).


const landscapeChange = (temp) => {
let landscape = '';
if (parseInt(temp.textContent) >= 80) {
landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
} else if (parseInt(temp.textContent) >= 70) {
landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
} else if (parseInt(temp.textContent) >= 60) {
landscape = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
} else if (parseInt(temp.textContent) >= 50) {
landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
} else if (parseInt(temp.textContent) <= 49) {
landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
}
return landscape;
};

const skyChangeOnSelect = () => {
const selectedSky = document.getElementById('sky-select').value;
Comment on lines +103 to +104

Choose a reason for hiding this comment

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

Consider getting this value from the event instead of hardcoding the id.

const skyContainer = document.getElementById('sky-container');
const skyEmojiDisplay = skyChange(selectedSky);
skyContainer.textContent = skyEmojiDisplay;
console.log(document.getElementById('sky-select'));
console.log(skyEmojiDisplay);
console.log(selectedSky);
};

const skyChange = (skySelect) => {
let skyEmoji = '';
if (skySelect === 'sunny') {
skyEmoji = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
} else if (skySelect === 'cloudy') {
skyEmoji = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
} else if (skySelect === 'rainy') {
skyEmoji = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
} else if (skySelect === 'snowy') {
skyEmoji = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
}
return skyEmoji;
};

const displayCityName = () => {
const inputCity = document.getElementById('city-name-input').value;
const displayCityContainer = document.getElementById('city-display');

displayCityContainer.textContent = '✨ ' + inputCity + ' ✨';
};

const resetCityName = () => {
const inputCity = document.getElementById('city-name-input');
const cityNameDisplay = document.getElementById('city-display');
inputCity.value = 'Seattle';
cityNameDisplay.textContent = 'Seattle';
console.log(inputCity);
console.log(inputCity.value);
};

// const response = get_location();
// const long = response[0]['lat'];

const registerEventHandlers = () => {
const increaseButton = document.getElementById('increase-temp');
const decreaseButton = document.getElementById('decrease-temp');
const cityInputForm = document.getElementById('city-name-input');
const selectedSky = document.getElementById('sky-select');
const realtimeTempButton = document.getElementById('realtime-temp');
const resetButton = document.getElementById('reset-city-name-2');
// const cityNameDisplay = document.getElementById('city-display');

increaseButton.addEventListener('click', increaseTemp);
decreaseButton.addEventListener('click', decreaseTemp);
cityInputForm.addEventListener('input', displayCityName);
selectedSky.addEventListener('change', skyChangeOnSelect);
realtimeTempButton.addEventListener('click', getTempFromCoordinates);
resetButton.addEventListener('click', resetCityName);
// cityNameDisplay.addEventListener('change', resetCityName);
};

document.addEventListener('DOMContentLoaded', registerEventHandlers);

Choose a reason for hiding this comment

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

Nice job registering! Consider using the more robust form or registering that was at the bottom of the crab fan site example.

139 changes: 139 additions & 0 deletions styles/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
#temp {
color: #FFA500;
}

body {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
grid-template-rows: 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3%;
background-color: rgb(165, 212, 243);
}
Comment on lines +5 to +12

Choose a reason for hiding this comment

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

Nice grid! Consider using repeat to simplify the column and row definitions.


/* .box {
border-radius: 30px;
background-color: bisque;
} */

header {
grid-row: 2 / 2;
grid-column: 2 / 7;
display: grid;
justify-self: center;

}

#temp-input {
display: grid;
grid-row: 4 / 6;
grid-column: 2 / 4;
flex-direction: column;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 10px;
}

#decrease-temp {
display: flex;
grid-row: 5/5;
grid-column: 3/4;
justify-self: center;
align-self: center;
}

#increase-temp {
display: flex;
grid-row: 2/3;
grid-column: 3/4;
justify-self: center;
align-self: center;
}

#temperature-text {
display: grid;
grid-row: 1/1;
grid-column: 1/6;
justify-self: center;
align-self: center;
}

#temp {
display: flex;
grid-row: 3/3;
grid-column: 3/3;
justify-self: center;
}

#realtime-temp {
display: flex;
grid-row: 3/5;
grid-column: 5/6;
justify-self: center;
align-self: center;
}

#sky-input {
grid-row: 7 / 9;
grid-column: 2 / 4;
flex-direction: column;
/* display: flex;
column-gap: 10px; */
display: grid;
grid-template-rows: 50% 50% ;
border-radius: 20px;
justify-self: center;
align-self: center;
}

#sky-text {
grid-row: 1 / span 1;
}

#dropdown {
grid-row: 2 / span 1;
}

#city-input {
display: flex;
grid-row: 9 / 12;
grid-column: 2 / 4;
flex-direction: column;
column-gap: 10px;
justify-self: center;
align-self: center;
}

#city-container {
grid-row: 4 / 5;
grid-column: 5 / 8;
display: grid;
justify-self: center;
}

#weather-text {
display: grid;
grid-row: 6 / 7;
grid-column: 5 / 8;
justify-self: center;
}

#emoji-display {
grid-row: 7 / 9;
grid-column: 5 / 8;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 6.25% 87.5% 6.25%;
}

#sky-container {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
justify-self: center;
}

#landscape {
grid-row: 3 / span 1;
grid-column: 2 / span 1;
justify-self: center;
}