Skip to content

Commit

Permalink
Merge pull request #5 from ChinazoOnwukaike/wave-05
Browse files Browse the repository at this point in the history 
completes wave 05
  • Loading branch information
@ChinazoOnwukaike
ChinazoOnwukaike authored Jun 10, 2022
2 parents ed1ba21 + 4f33a80 commit cec6b7b
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 32 deletions.
14 changes: 9 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
<link rel="stylesheet" href="styles/index.css">
<!------------- Font Awesome ------------>
<script src="https://kit.fontawesome.com/dff1440c2f.js" crossorigin="anonymous"></script>

<!------------- Fonts ------------------->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<!------------- Header/ Search Box ------------>
Expand Down Expand Up @@ -36,7 +41,7 @@ <h1 id="temp">70°</h1>
<i class="fa-solid fa-arrow-up fa-xl" id="arrow-up" ></i>
<i class="fa-solid fa-arrow-down fa-xl" id="arrow-down"></i>
</div>
<div class="fc">F<span id='tempToggle'><i id="toggle" class="fa-solid fa-xl fa-toggle-off"></i></span>C</div>
<div class="fc">°F<span id='tempToggle'><i id="toggle" class="fa-solid fa-xl fa-toggle-off"></i></span>°C</div>
</div>
<!-- </div> -->
</section>
Expand All @@ -46,17 +51,16 @@ <h1 id="temp">70°</h1>
<script src="src/index.js"></script>
</body>
<!------------- Sky Section ------------>
<footer class="sky-container">
<section >
<footer id="sky-container">
<section>
<label for="sky">Sky:</label>

<select name="sky" id="cars">
<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>
<button id="sky-reset-btn">Reset</button>
</section>
</footer>
</html>
Binary file added src/images/cloudySky.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/rainSky.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/snowySky.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/sunnySky.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
108 changes: 84 additions & 24 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ const state = {
lat: 32.7762719,
lon: -96.7968559,
isF: true,
skyBackground: 'url(../src/images/sunnySky.jpeg)',
};

// Default Values
//Default Values
const temp = document.getElementById('temp');
temp.textContent = state.temp + '°';
temp.style.color = state.tempColor;
Expand All @@ -21,39 +22,60 @@ backColor.style.backgroundImage = state.tempBackground;

// Change the color of the temp
const changetempColor = () => {
if (state.temp >= 80) {
if ((state.isF && state.temp >= 80) || (!state.isF && state.temp >= 27)) {
state.tempColor = 'red';
temp.style.color = state.tempColor;
} else if (state.temp > 69 && state.temp < 80) {
} else if (
(state.isF && state.temp < 80 && state.temp > 69) ||
(!state.isF && state.temp < 27 && state.temp > 20)
) {
state.tempColor = 'orange';
temp.style.color = state.tempColor;
} else if (state.temp < 70 && state.temp > 59) {
} else if (
(state.isF && state.temp < 70 && state.temp > 59) ||
(!state.isF && state.temp < 20 && state.temp > 15)
) {
state.tempColor = 'yellow';
temp.style.color = state.tempColor;
} else if (state.temp < 60 && state.temp > 49) {
} else if (
(state.isF && state.temp < 60 && state.temp > 49) ||
(!state.isF && state.temp < 15 && state.temp > 10)
) {
state.tempColor = 'green';
temp.style.color = state.tempColor;
} else if (state.temp < 50) {
} else if (
(state.isF && state.temp < 50) ||
(!state.isF && state.temp < 10)
) {
state.tempColor = 'teal';
temp.style.color = state.tempColor;
}
};

// Change the background image by temp
const changeBackImg = () => {
if (state.temp >= 80) {
if ((state.isF && state.temp >= 80) || (!state.isF && state.temp >= 27)) {
state.tempBackground = 'url(../src/images/sunny.png)';
backColor.style.backgroundImage = state.tempBackground;
backColor.style.color = 'black';
} else if (state.temp < 80 && state.temp > 69) {
} else if (
(state.isF && state.temp < 80 && state.temp > 69) ||
(!state.isF && state.temp < 27 && state.temp > 20)
) {
state.tempBackground = 'url(../src/images/spring.png)';
backColor.style.backgroundImage = state.tempBackground;
backColor.style.color = 'white';
} else if (state.temp < 70 && state.temp > 59) {
} else if (
(state.isF && state.temp < 70 && state.temp > 59) ||
(!state.isF && state.temp < 20 && state.temp > 15)
) {
state.tempBackground = 'url(../src/images/cool.png)';
backColor.style.backgroundImage = state.tempBackground;
backColor.style.color = 'white';
} else if (state.temp < 60) {
} else if (
(state.isF && state.temp < 60) ||
(!state.isF && state.temp < 15)
) {
state.tempBackground = 'url(../src/images/snow.png)';
backColor.style.color = 'white';
backColor.style.backgroundImage = state.tempBackground;
Expand Down Expand Up @@ -83,9 +105,6 @@ const changeCity = (e) => {
cityState.textContent = state.cityName;
};

// Reset city name by button
const resetCity = () => {};

// Get lat lon of city.
const getLatLon = () => {
const url = 'http://127.0.0.1:5000/';
Expand All @@ -99,6 +118,7 @@ const getLatLon = () => {
const data = response.data[0];
state.lat = data.lat;
state.lon = data.lon;
getWeather();
})
.catch((error) => {
console.log('error!', error.response.data);
Expand All @@ -107,8 +127,6 @@ const getLatLon = () => {

// get weather data and update colors and background image
const getWeather = () => {
getLatLon();

const url = 'http://127.0.0.1:5000/';
axios
.get(url + 'weather', {
Expand All @@ -129,7 +147,7 @@ const getWeather = () => {
});
};

// kelvin to F
// kelvin to F or C
const kToF = (k) => {
if (state.isF) {
const conversion = (k - 273.15) * (9 / 5) + 32;
Expand All @@ -140,6 +158,7 @@ const kToF = (k) => {
}
};

// Toggle between F and C and change the button
const setTempToggle = () => {
state.isF = !state.isF;
if (state.isF === false) {
Expand All @@ -151,30 +170,71 @@ const setTempToggle = () => {
toggle.classList.remove('fa-toggle-on');
toggle.classList.add('fa-toggle-off');
}
getWeather();
getLatLon();
};

//change sky
const changeSky = (e) => {
const skyImg = document.getElementById('sky-container');
const skyValue = document.getElementById('sky-select').value;

if (skyValue === 'sunny') {
state.skyBackground = 'url(../src/images/sunnySky.jpeg)';
skyImg.style.backgroundImage = state.skyBackground;
} else if (skyValue === 'rainy') {
console.log(skyValue);
state.skyBackground = 'url(../src/images/rainSky.jpg)';
skyImg.style.backgroundImage = state.skyBackground;
} else if (skyValue === 'snowy') {
state.skyBackground = 'url(../src/images/snowySky.jpeg)';
skyImg.style.backgroundImage = state.skyBackground;
} else if (skyValue === 'cloudy') {
state.skyBackground = 'url(../src/images/cloudySky.jpeg)';
skyImg.style.backgroundImage = state.skyBackground;
}
};

// Reset search button
const resetSearchBtn = () => {
const searchBox = document.getElementById('search-box');
const cityState = document.getElementById('city-state');
searchBox.value = '';
state.cityName = 'Dallas';
cityState.textContent = state.cityName;
getLatLon();
};

// Event Handlers
const registerEventHandlers = () => {
// Increse Decrease Arrows
const upArrow = document.getElementById('arrow-up');
upArrow.addEventListener('click', increaseTemp);

const downArrow = document.getElementById('arrow-down');
downArrow.addEventListener('click', decreaseTemp);

//Search for city and reset city button
const searchCity = document.getElementById('search-box');
searchCity.addEventListener('input', changeCity);

const searchResetBtn = document.getElementById('search-reset-btn');
searchResetBtn.addEventListener('click', resetCity);
const resetBtn = document.getElementById('search-reset-btn');
resetBtn.addEventListener('click', resetSearchBtn);

const cityResetBtn = document.getElementById('currentTempBtn');
cityResetBtn.addEventListener('click', getWeather);
//Get current temp
const cityTempBtn = document.getElementById('currentTempBtn');
cityTempBtn.addEventListener('click', getLatLon);

//Toggle btwn F/C
const toggleFC = document.getElementById('tempToggle');
if (toggleFC) {
toggleFC.addEventListener('click', setTempToggle);
}
toggleFC.addEventListener('click', setTempToggle);

//Change sky
const skySelect = document.getElementById('sky-select');
skySelect.addEventListener('change', changeSky);

// Default Values that need DOM content loading
const skyContainer = document.getElementById('sky-container');
skyContainer.style.backgroundImage = state.skyBackground;
};

document.addEventListener('DOMContentLoaded', registerEventHandlers);
11 changes: 8 additions & 3 deletions styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ body{
grid-template: 20% 1fr 1fr 10%/ 1fr 1fr 1fr;
margin: 0;
padding: 0;
font-family: 'Monserrat', sans-serif;
}

header{
Expand Down Expand Up @@ -90,8 +91,6 @@ footer{
padding: 15px 10px;
}



.fc {
font-size: 1.5rem;
}
Expand Down Expand Up @@ -124,12 +123,14 @@ footer{
}

/*----- sky ------*/
.sky-container{
#sky-container{
background-color: palevioletred;
padding-top: 5%;
display: flex;
justify-content: center;
font-size: 1.5rem;
background-repeat: no-repeat;
background-size:cover;
}

.sky{
Expand All @@ -139,4 +140,8 @@ footer{

.red{
color: red;
}

.logo {
color: white;
}

0 comments on commit cec6b7b

Please sign in to comment.