Skip to content

Tigers - Mica and Misha #83

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

Open
mc-dev99 wants to merge 25 commits into
base: main
Choose a base branch
from
Open

Tigers - Mica and Misha #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
c3d459f
script axios & index.js in index.html
mc-dev99 Dec 6, 2022
d5a089d
linked style.css in index.html
mc-dev99 Dec 6, 2022
553b4a8
adds html base
misha-c Dec 7, 2022
f12f219
adds temperature buttons JS
misha-c Dec 7, 2022
9ecc9e4
fixed tempButtons index.js & script path
mc-dev99 Dec 7, 2022
ca90b0f
add wave 3 and 4
misha-c Dec 8, 2022
0b15b72
troubleshooting axios
mc-dev99 Dec 8, 2022
5495f9c
fixed axios location and weather api call
mc-dev99 Dec 8, 2022
b92cf28
nested weather call in location call to fix async
mc-dev99 Dec 8, 2022
63a6e77
added response.data console logs for axios calls
mc-dev99 Dec 8, 2022
12b4b1c
refactors tempRange and completes wave 4
misha-c Dec 9, 2022
1220c69
adds sky conditions
misha-c Dec 9, 2022
ea91fb4
working updateSky
mc-dev99 Dec 9, 2022
c466806
added resetCityName button
mc-dev99 Dec 9, 2022
9ae867d
adds css selectors
misha-c Dec 10, 2022
4f27a8d
trying out css
mc-dev99 Dec 12, 2022
4e1bf48
fixed css grids
mc-dev99 Dec 12, 2022
39d85ce
removed background colors
mc-dev99 Dec 12, 2022
a56b054
removed border for blocks
mc-dev99 Dec 12, 2022
8d49772
moved update temp
misha-c Dec 12, 2022
8fbe1e8
Merge branch 'main' of https://github.com/mc-dev99/weather-report
misha-c Dec 12, 2022
6901c88
misc
mc-dev99 Dec 12, 2022
d29fab1
Merge branch 'main'
mc-dev99 Dec 12, 2022
f5d24b1
merge
mc-dev99 Dec 12, 2022
465ddab
css tinkering
mc-dev99 Dec 12, 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
35 changes: 34 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,41 @@
<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 class="titleBlock">
<h1 id="siteTitle">The Weather Station</h1>
</header>
<span class="banner" id="skyBanner"></span>
<section class="cityNameBlock">
Comment on lines +11 to +15
Copy link
Copy Markdown

@spitsfire spitsfire Jan 20, 2023

Choose a reason for hiding this comment

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

Consider refactoring your class names so that they are lowercase and hyphenated between words

<h1 id="site-title">The Weather Station</h1>

<label id="cityName" for="inputCityName">Seattle</label>
<br />
<input type="text" id="inputCityName" placeholder="Berlin"/>
<button id="resetCityName">reset city name</button>
</section>
<section class="skyConditionBlock">
<label for="skySelect">Sky Condition</label>
<select name="skyCondition" id="skySelect">
<option value="default"></option>
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</section>
<!-- <div>Date & Time</div> -->
<section class="temperatureBlock">
<button id="increaseTempButton">Increase Temp</button>
<p id="Temperature">Temperature</p>
<button id="decreaseTempButton">Decrease Temp</button>
<br />
<button id="updateTempButton">Update Temperature</button>
</section>

<span class="banner" id="landscape"></span>
<footer></footer>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="src/index.js"></script>
</body>
</html>
</html>
121 changes: 121 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
const state = {
Temperature: 0,
city: 'Seattle',
sky: 'sunny',
latitude: 0,
longitude: 0,
};

const increaseTemp = (event) => {
const tempContainer = document.querySelector('#Temperature');
console.log('increaseTemp clicked');
state.Temperature = Math.round(state.Temperature + 1);
tempContainer.textContent = `${state.Temperature}`;
tempRange();
};
// hello this is a new branch!!

const decreaseTemp = (event) => {
const tempContainer = document.querySelector('#Temperature');
state.Temperature = Math.round(state.Temperature - 1);
tempContainer.textContent = `${state.Temperature}`;
tempRange();
};

const tempRange = () => {
const tempContainer = document.querySelector('#Temperature');
const landscapeContainer = document.querySelector('#landscape');
if (state.Temperature >= 80) {
tempContainer.style.color = 'red';
landscapeContainer.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
} else if (state.Temperature <= 79 && state.Temperature >= 70) {
tempContainer.style.color = 'orange';
landscapeContainer.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
} else if (state.Temperature <= 69 && state.Temperature >= 60) {
tempContainer.style.color = 'yellow';
landscapeContainer.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
} else if (state.Temperature <= 59 && state.Temperature >= 50) {
tempContainer.style.color = 'green';
landscapeContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
} else if (state.Temperature <= 49) {
tempContainer.style.color = 'teal';
landscapeContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
}
};
Comment on lines +28 to +44
Copy link
Copy Markdown

@spitsfire spitsfire Jan 20, 2023

Choose a reason for hiding this comment

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

How might you refactor this so the logic is more data driven? Here you have several if/else if statements. What if you had an object with the keys as the temperature and the values as the landscape and temperature corresponding display? Then you could iterate over the object to set state!

It could look something like this:

 const tempColors = [
   [49, 'blue'],
   [59, 'green'],
   [69, 'gold'],
   [79, 'orange'],
   [null, 'red'],
 ];
 
 const getColorForTemp = (temp) => {
   for (const [boundaryTemp, color] of tempColors) {
     if (boundaryTemp === null || temp <= boundaryTemp) {
       return color;
     }
   }
 };


const updateSky = (event) => {
const skyContainer = document.querySelector('#skySelect');
const skyBannerContainer = document.querySelector('#skyBanner');
state.sky = skyContainer.value;
if (state.sky === 'sunny') {
skyBannerContainer.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
} else if (state.sky === 'cloudy') {
skyBannerContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
} else if (state.sky === 'rainy') {
skyBannerContainer.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
} else if (state.sky === 'snowy') {
skyBannerContainer.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
}
};

const chooseCityName = (event) => {
const cityName = document.querySelector('#cityName');
const inputContainer = document.querySelector('#inputCityName');
state.city = inputContainer.value;
cityName.textContent = state.city;
};

const resetCityName = (event) => {
const cityName = document.querySelector('#cityName');
Comment on lines +62 to +69
Copy link
Copy Markdown

@spitsfire spitsfire Jan 20, 2023

Choose a reason for hiding this comment

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

Looks like we are repeating code on lines 62 and 69! Maybe we can create global variables that will hold elements like this that will be used more than once

const inputContainer = document.querySelector('#inputCityName');
state.city = 'Seattle';
inputContainer.value = '';
cityName.textContent = state.city;
};

const updateTemperature = (event) => {
const tempContainer = document.querySelector('#Temperature');
axios
.get(`http://localhost:5000/location?q=${state.city}`)
.then((response) => {
state.latitude = response.data[0].lat;
state.longitude = response.data[0].lon;
console.log(response.data);
axios
.get(
`http://localhost:5000/weather?lat=${state.latitude}&lon=${state.longitude}`
)
.then((response) => {
const temperatureKelvin = response.data.main.temp;
state.Temperature = ((temperatureKelvin - 273.15) * 9) / 5 + 32;
tempContainer.textContent = `${Math.round(state.Temperature)}`;
tempRange();
console.log(response.data);
})
.catch((error) => {
console.log('OpenWeather GET request error');
});
})
.catch((error) => {
console.log('LocationIQ GET request error');
});
};
Comment on lines +78 to +102
Copy link
Copy Markdown

@spitsfire spitsfire Jan 20, 2023

Choose a reason for hiding this comment

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

good indentation! makes the promises easier to read 👍


const registerEventHandlers = (event) => {
const increaseTempButton = document.querySelector('#increaseTempButton');
increaseTempButton.addEventListener('click', increaseTemp);
// increaseTempButton.addEventListener('click', tempRange);
const decreaseTempButton = document.querySelector('#decreaseTempButton');
decreaseTempButton.addEventListener('click', decreaseTemp);
// decreaseTempButton.addEventListener('click', tempRange);
const inputCityName = document.querySelector('#inputCityName');
inputCityName.addEventListener('input', chooseCityName);
const resetCityNameButton = document.querySelector('#resetCityName');
resetCityNameButton.addEventListener('click', resetCityName);
const updateTempButton = document.querySelector('#updateTempButton');
updateTempButton.addEventListener('click', updateTemperature);
const skySelect = document.querySelector('#skySelect');
skySelect.addEventListener('change', updateSky);
};

document.addEventListener('DOMContentLoaded', registerEventHandlers);
98 changes: 98 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
body {
display: grid;
Copy link
Copy Markdown

@spitsfire spitsfire Jan 20, 2023

Choose a reason for hiding this comment

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

Ooo nice job using css grid! 👍

grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto auto auto auto;
grid-gap: 1rem;
background-color: rgb(147, 227, 247);
margin: 1rem;
}

/* Flexbox Page Layout */
.titleBlock {
grid-row: 1;
grid-column: span 3;
display: grid;
align-self: center;
}

.cityNameBlock,
.skyConditionBlock,
.temperatureBlock {
border-radius: 8px;
padding: 2rem;
background-color: white;
}

.cityNameBlock {
grid-row: 3;
text-align: center;
}

.skyConditionBlock {
grid-row: 4;
text-align: center;
}

.temperatureBlock {
grid-row: 3 / span 3;
grid-column: 2;
text-align: center;
align-self: center;
}

/* Specific Elements */
.banner {
grid-column: span 3;
text-align: center;
}

#skyBanner {
grid-row: 2;
}

#siteTitle {
font-size: larger;
text-align: left;
}

#cityName {
text-align: left;
}

#resetCityName {
border-radius: 3em;
}

#skySelect {
background-color:rgb(230, 191, 243);
border-radius: 3em;
}

#cityName {
font-size: larger;
}

#increaseTempButton {
background-color: bisque;
border-radius: 3em;

}

#Temperature {
font-size: 30px;
}

#decreaseTempButton {
background-color: bisque;
border-radius: 3em;
}

#updateTempButton {
background-color: bisque;
border-radius: 3em;
}

#cityName {
font-size: larger;
}