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.

Sign up for GitHub

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

Panther - Ryan Thomas #95

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

Panther - Ryan Thomas #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f76e275
Added API for location and weather
ryanrt9 Dec 11, 2022
0c7a2f2
added elements to drop down
ryanrt9 Dec 15, 2022
a7be14a
Added buttons, event listeners and city input
ryanrt9 Dec 18, 2022
c1e980c
Lon and Lat responses add.
ryanrt9 Dec 18, 2022
d3c9dea
All waves complete
ryanrt9 Dec 20, 2022
60a8661
Reset button added and working
ryanrt9 Dec 20, 2022
2aeb18a
Refactored code
ryanrt9 Dec 20, 2022
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
68 changes: 66 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,72 @@
<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" type="text/css" />
</head>
<body>
<body id="backgroundColor">
<header class="header__header">
<h1>Today's Weather</h1>
<span>Today in the city of
<span id="headerCityName" class="header__city-name">
"insert city"
</span>
</span>
</span>
</header>
<section class="temperature__section">
<h2>Actual Temperature</h2>
<div class="temperature__content">
</div>
<span id="actualValue" class="orange">65°</span>
</div>
</section>
<section class="sky__section">
<h2>Desired Sky</h2>
<select id="skySelect">
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</section>
<section class="garden__section">
Comment on lines +12 to +36
Copy link

Choose a reason for hiding this comment

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

Markup looks great!

<h1> Sky & Garden </h1>
<div id="gardenContent" class="garden__content sunny">
<span id="desiredSky">☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞</span>
<span id="landscape">🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼</span>
</div>
</h2>
Comment on lines +37 to +42
Copy link

Choose a reason for hiding this comment

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

Rather than hard-coding a value for UI elements (which just happens to match the initial value backing the control), I like to leave the initial markup blank, and update the UI on first load from the initial backing values in the JS code. So like here, leave off the emojis, then when the document loads, update the UI in the JS to show the initial sky and landscape value. This would protect us from changing the default starting JS value, but having it be out of sync with what the UI is showing.

I would tend to do this for any of the configurable elements (temperature, ground, sky, city).

</section>
</section>

<main id="container">
<section class="temperature__section">
<h2>Desired Temperature</h2>
<div class="temperature__content">
<div class="temperature__controls">
<span id="increaseTempControl">⬆️</span>
<span id="decreaseTempControl">⬇️</span>
</div>
<span id="tempValue">70°</span>
Copy link

Choose a reason for hiding this comment

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

Rather than hard-coding a value for UI elements (which just happens to match the initial value backing the control), I like to leave the initial markup blank, and update the UI on first load from the initial backing values in the JS code. So like here, leave off the 70, then when the document loads, update the UI in the JS to show the initial temperature value. This would protect us from changing the default starting JS value, but having it be out of sync with what the UI is showing.

I would tend to do this for any of the configurable elements (temperature, ground, sky, city).

</div>
</main>
</section>

</section>

<section class="city-name__section">
<h2>Please Select a City </h2>
<button id="cityNameReset" class="city-name__reset-btn" type="reset">Reset</button>
<input type="text" id="cityNameInput" placeholder="Indianapolis" />
<button id="cityNameSubmit" class="city-name__submit-btn" type="submit">Submit</button>

</section>



<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="./src/index.js"></script>

</body>
</html>

</html>
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"dependencies": {
"axios": "^0.27.2"
"axios": "^1.2.1",
"dotenv": "^16.0.3"
}
}
42 changes: 42 additions & 0 deletions src/Extras
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
// API Calls

const locationToWeather = (cityName) =>{
const getLocation = () => {
axios
.get ('http://127.0.0.1:5000/locations'), {
params:{
q: loc_query,
key: 'pk.54a2fbb7573000245e547f11b670d167',
format: 'json'
}
}
.then (function(response) {
let lat = response.data[0]['lat']
let lon = response.data[0]['lon']
getWeather(lat, lon);
})
.catch (function(error) {
console.error(error);
})
}
const getWeather = (lat, lon) => {
axios
.get ('http://127.0.0.1:5000/weather'), {
params: {
appid: '4f0138081ad5bd26b6a03604fa3b5b15',
lat: lat,
lon: lon
}
}
.then (function(response){
let kelvinTemp = response.data["main"]["temp"];
let farhTemp = Math.floor((kelvinTemp - 273.15) * 1.8) + 32;
// conversion from Kelvin to Fahrenheit
// variable.innerText = farhTemp
})
.catch (function(error) {
console.error(error);
})
}
}

193 changes: 193 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
"use strict";


const state = {
temp : 70,
sky : document.getElementById('skySelect'),
Copy link

Choose a reason for hiding this comment

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

Instead of having a hard coded default sky state, how might you refactor this so the logic is more data driven? The sky should really be displayed based on the call to the api

location : '',
Copy link

Choose a reason for hiding this comment

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

The few values in your default state could be the lat, long, temp and city name

lon : 0,
lat : 0
}

// Elements Selectors
const tempValue = document.getElementById('tempValue');

const actualTempValue = document.getElementById('actualValue')

const increaseTempControl = document.getElementById('increaseTempControl');

const decreaseTempControl = document.getElementById('decreaseTempControl');

const skySelect = document.getElementById('skySelect');

const desiredSky = document.getElementById('desiredSky')

const desiredLandscape = document.getElementById('landscape')

const bgColor = document.getElementById('backgroundColor')

const headerCityName = document.getElementById('headerCityName')

const cityNameInput = document.getElementById('cityNameInput')

const submitButton = document.getElementById('cityNameSubmit')

const resetButton = document.getElementById('cityNameReset')



// Functions
// TEMP CHANGES
const increaseTemp = () => {
state.temp ++;
tempValue.innerHTML = state.temp + "°" ;
Copy link

Choose a reason for hiding this comment

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

Instead of using the + symbol here you could use concatenation ${state.temp}°

}

const decreaseTemp = () => {
state.temp --;
tempValue.innerHTML = state.temp + "°" ;
}

// CITY HEADER
const changeCityName = () => {
headerCityName.innerHTML = cityNameInput.value

}
Comment on lines +52 to +55
Copy link

Choose a reason for hiding this comment

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

There's an issue with wave 03 (naming the city), the requirements specify that there should be an element that displays a city name & a text input element that allows the user to change the city name. The city name must also be updated every time there's a change to the text input element. Currently your code is not displaying the city name when you reset the city.


// State.Location Update
const locationUpdate = () => {
state.location = cityNameInput.value;
getLocation();
}

const resetLocation = () => {
state.location = '';
cityNameInput.value = state.location;
changeCityName();
}
Comment on lines +63 to +67
Copy link

Choose a reason for hiding this comment

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

When you reset the city it should be updated to a selected city instead of an empty string like so:

  cityNameInput.value = 'Seattle';


//SKY CHANGES
const skySelector = () => {
if (state.sky.value == "sunny") {
desiredSky.textContent = "☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞"
}
else if (state.sky.value == "cloudy") {
desiredSky.textContent = "🌥🌥🌥🌥🌥🌥🌥🌥🌥🌥🌥"
}
else if (state.sky.value == "rainy") {
desiredSky.textContent = "🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧"
}
else if (state.sky.value == "snowy") {
desiredSky.textContent = "🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨"
}
}

const validateSkyCondition = (skyCondition) => {
if (skyCondition == "Thunderstorm" || skyCondition == "Drizzle" || skyCondition == "Rain" ) {
state.sky.value = "rainy";
}
else if (skyCondition == "Clouds") {
state.sky.value = "cloudy";
}
else if (skyCondition == "Snow") {
state.sky.value = "snowy";
}
else {
state.sky.value = "sunny";
}
}

// LANDSCAPE CHANGES
const landscapeChange = () =>{
if (state.temp >= 80){
desiredLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"
bgColor.style.backgroundColor = '#E24E1B'
}
else if (state.temp >= 70 ){
desiredLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_🌱_🌻🌷"
bgColor.style.backgroundColor = '#E5B25D'
}
else if (state.temp >= 60 ){
desiredLandscape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"
bgColor.style.backgroundColor = '#D0CFEC'
}
else if (state.temp >= 50 ){
desiredLandscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
bgColor.style.backgroundColor = "#875C74"
}
else if (state.temp <= 40 ){
bgColor.style.backgroundColor = "#1B4079"
}
}
Comment on lines +101 to +121
Copy link

@ameerrah9 ameerrah9 Jan 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

There’s an issue with wave 02 (temperature), the requirements specify that the temperature ranges should change the text color or the background of the temperature & the landscape depending on what temperature it is. Currently your code is updating the background color of the entire page.


// API Calls
// Location
const getLocation = () => {
axios
.get('http://127.0.0.1:5000/location', {
params: {
q: state.location
}
})
.then((response) => {
state.lon = response.data[0].lon
state.lat = response.data[0].lat
})
.then(()=> {
getWeather();
Comment on lines +132 to +137
Copy link

Choose a reason for hiding this comment

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

You can combine these two .thens into one like so:

    .then((response) => {
      state.lat = response.data[0].lat;
      state.long = response.data[0].lon;
      getWeather();
    })

})
.catch((error) => {
console.log(error)
});
}
// Weather
const getWeather = () => {
axios
.get('http://127.0.0.1:5000/weather', {
params: {
lat: state.lat,
lon: state.lon
}
})
.then((response) => {
const kelvinTemp = response.data.main.temp
const skyCondition = response.data.weather[0].main
// // k to f
state.temp = Math.floor(1.8*(kelvinTemp-273) + 32)
tempValue.innerHTML = state.temp + "°" ;
actualTempValue.innerHTML = state.temp + "°" ;
Comment on lines +157 to +158
Copy link

Choose a reason for hiding this comment

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

We should separate our concerns here by having another function handle updating our UI

validateSkyCondition(skyCondition)

})
.then(() => {
landscapeChange()

})
.catch((error) => {
console.log(error)
});
}


//


// Listeners

increaseTempControl.addEventListener("click", increaseTemp);
increaseTempControl.addEventListener("click", landscapeChange);

decreaseTempControl.addEventListener("click", decreaseTemp);
decreaseTempControl.addEventListener("click", landscapeChange);

skySelect.addEventListener("change", skySelector);

cityNameInput.addEventListener("keyup", changeCityName);

submitButton.addEventListener("click", locationUpdate);

submitButton.addEventListener("click", locationUpdate);

resetButton.addEventListener("click", resetLocation)


Loading