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

Cedar - Kristin L #57

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

Cedar - Kristin L #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bd2d955
Set up index.html
Kbhlee2121 Dec 6, 2021
3783f53
Update so temp and landscape change accordingly
Kbhlee2121 Dec 9, 2021
d5c1954
Add city input and sky dropdown functionality
Kbhlee2121 Dec 9, 2021
2289eb4
Add reset button
Kbhlee2121 Dec 9, 2021
94659de
Made final updates to style and cleaned notes
Kbhlee2121 Dec 13, 2021
a94ddef
Fix link to stylesheet and made final touch up
Kbhlee2121 Dec 13, 2021
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
51 changes: 50 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,57 @@
<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 rel="stylesheet" type="text/css" href="./styles/index.css"/>
</head>
<body>
<header>
<section class="header-cover" id="top">
<h1 class="title"> Kristin's Weather Report</h1>
<h3 id="subtitle">For the lovely city of ✨<span id="cityNameDisplay">Seattle</span>✨</h3>
</section>
</header>
<main>
<section class ="content-wrapper">
<div class="items-wrapper">
<div class="item-wrapper" id="temperatureContainer">
Copy link

Choose a reason for hiding this comment

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

You might consider making the temperatureContainer, cityNameContainer, skyContainer, and weatherGardenContainer section elements

<h2 class="item-titles">Temperature</h2>
<div class="temp-wrapper">
<h2 id="temperatureDegree"></h2>
<div class="button-wrapper">
<button id="tempButtonUp"><i class="arrow up"></i></button></br>
<button id="tempButtonDown"><i class="arrow down"></i></button>
</div>
</div>
</div>
<div class="item-wrapper" id="cityNameContainer">
<h2 class="item-titles">City Name</h2>
<input type="text" id="inputCity" name="inputCity" placeholder="Enter City Name" />
<button id="resetCity">Reset</button>
</div>
<div class="item-wrapper" id="skyContainer">
<h2 class="item-titles">Sky</h2>
<label for="sky-select">Select a sky:</label>
<select class="sky" 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>
</div>
<div class="item-wrapper" id="weatherGardenContainer">
<h2 class="item-titles">Weather Garden</h2>
<div id="skyEmojis"></div>
<span id="landscape"></span>
</div>
</div>
</section>
</main>

<footer>
<div class="footer">
<p>Copyright 2021 Kristin Lee. All rights reserved.</p>
</div>
</footer>
<script src="src/index.js"></script>
</body>
</html>
</html>
104 changes: 104 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
const tempDegree = document.querySelector('#temperatureDegree');
const landscape = document.querySelector('#landscape');
const selectedSky = document.querySelector('#skyEmojis');
const gardenBackground = document.querySelector('#weatherGardenContainer');
const inputCity = document.querySelector('#inputCity');
const displayCity = document.getElementById('cityNameDisplay');
const resetButton = document.getElementById('resetCity');

const state = {
Copy link

Choose a reason for hiding this comment

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

Nice use of the state object!

tempNumber: 80,
skyState: ' ☁️ ☁️ ☀️ ☁️ ☁️ ☀️ ☀️ ☀️ ☁️ ☀️☀️ ☀️ ☁️ ☀️',
gardenColor: '#D6FFFF',
};

// Temperature up and down buttons
const increaseTemperature = () => {
state.tempNumber += 1;
tempDegree.textContent = `${state.tempNumber}`;
changeTheme();
};

const decreaseTemperature = () => {
state.tempNumber -= 1;
tempDegree.textContent = `${state.tempNumber}`;
changeTheme();
};

//Landscape and weather garden background color
const changeTheme = () => {
// if different ranges, change color
if (state.tempNumber >= 80) {
tempDegree.style.color = '#EA0009';
landscape.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂🌵__🐍_🏜_🦂';
} else if (state.tempNumber >= 70 && state.tempNumber <= 79) {
tempDegree.style.color = '#F0940A';
landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷🌿_☘️🌱_🌻🌷';
} else if (state.tempNumber >= 60 && state.tempNumber <= 69) {
tempDegree.style.color = '#F4D10A';
landscape.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃__🛤_🌾🌾🌾_🍃';
} else if (state.tempNumber >= 50 && state.tempNumber <= 59) {
tempDegree.style.color = '#1F7001';
landscape.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲🍂🌲🍁🌲🌲⛄️🍂';
} else {
tempDegree.style.color = '#256D6C';
landscape.textContent =
'⛄️⛄️🌲⛄️⛄️🌲⛄️⛄️🌲⛄️🌲⛄️🌲⛄️🌲⛄️⛄️🌲⛄️🌲⛄️';
}
};

//City name reset button
const updateCity = (event) => {
displayCity.textContent = event.target.value;
};

//reset City
const resetCity = (event) => {
event.target.value = 'Seattle';
Copy link

Choose a reason for hiding this comment

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

Rather than setting the event.target.value to 'Seattle', we want to selected the input box itself, and set the value of that element to "Seattle". This will put 'Seattle' into the input box.

displayCity.textContent = event.target.value;
};

//register event handlers
const registerEventHandlers = () => {
//up button
const tempUpButton = document.querySelector('#tempButtonUp');
tempUpButton.addEventListener('click', increaseTemperature);
//down button
const tempDownButton = document.querySelector('#tempButtonDown');
tempDownButton.addEventListener('click', decreaseTemperature);

//City input
inputCity.addEventListener('change', updateCity);

//reset city
resetButton.addEventListener('click', resetCity);

//wave 3: onchangehandler
const skyDropdown = document.querySelector('.sky');
skyDropdown.addEventListener('change', (event) => {
if (event.target.value === 'sunny') {
selectedSky.textContent = ' ☁️ ☁️ ☀️ ☁️ ☁️ ☀️ ☀️ ☀️ ☁️ ☀️☀️ ☀️ ☁️ ☀️';
gardenBackground.style.backgroundColor = '#D6FFFF';
} else if (event.target.value === 'cloudy') {
selectedSky.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️🌤 ☁️ ☁️☁️';
gardenBackground.style.backgroundColor = '#C9C9C9';
} else if (event.target.value === 'rainy') {
selectedSky.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧🌧🌈⛈🌧';
gardenBackground.style.backgroundColor = '#9FCFE0';
} else if (event.target.value === 'snowy') {
selectedSky.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨🌨❄️❄️🌨🌨';
gardenBackground.style.backgroundColor = '#A1B6D6';
Copy link

Choose a reason for hiding this comment

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

Directly applying styles works and is a valid approach. You may also consider applying a class name to keep the styles in the stylesheet.

}
Comment on lines +78 to +91
Copy link

Choose a reason for hiding this comment

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

To enhance readability, you might consider refactoring and moving the sky/color change functionality into a named function that's passed here as a callback function (rather than an anonymous function)

});
};

const defaultSetup = () => {
Copy link

Choose a reason for hiding this comment

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

Nice work encapsulating this default set-up here!

tempDegree.textContent = `${state.tempNumber}`;
selectedSky.textContent = `${state.skyState}`;
gardenBackground.style.backgroundColor = `${state.gardenColor}`;
registerEventHandlers();
changeTheme();
};
//execute registerEventHandlers
//runs code once DOM is ready. DOM isn't fully loaded, eventhandlers might not exist yet. Ex: buttoon on line 35
document.addEventListener('DOMContentLoaded', defaultSetup);
123 changes: 123 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Cinzel+Decorative:wght@700&family=Knewave&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Cinzel+Decorative:wght@700&family=Goudy+Bookletter+1911&family=Knewave&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Bungee+Shade&family=Cinzel+Decorative:wght@700&family=Galada&family=Goudy+Bookletter+1911&family=Knewave&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Bungee+Shade&family=Cinzel+Decorative:wght@700&family=Galada&family=Goudy+Bookletter+1911&family=Knewave&family=Pompiere&display=swap');

/* Arrows */
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}

.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

/* Text Styles */

#cityNameDisplay {
color:mediumvioletred;
font-weight: 900;
}

.title {
font-family: 'Cinzel Decorative', cursive;
color: white;
font-size: 2.1em;
}

#subtitle {
font-family: 'Goudy Bookletter 1911', serif;
color: rgb(55, 46, 46);
font-size: 1.5em;
}

.item-titles {
font-family: 'Galada', cursive;
color:rgb(85, 71, 71);
font-size: 1.7em;
}

header {
text-align: center;
}

.footer {
text-align: center;
font-family: 'Pompiere', cursive;
font-weight: bold;
}

body {
background-color: #f6f0c4;
background-image: linear-gradient(315deg, #f6f0c4 0%, #d99ec9 74%);
}

/* Layout */

.content-wrapper {
margin: 5px;
}

.temp-wrapper {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

.button-wrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
}

.items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-content: center;
padding: 20px;
margin: 5px;
}

.item-wrapper {
position: relative;
text-align: center;
outline: .5px solid grey;
padding: 5px;
margin: 5px 15px;
border-radius: 10%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

#weatherGardenContainer {
grid-column-start: 1;
grid-column-end: 4;
width: 60%;
border-radius: 10%;
margin: 5px auto;
}

#skyEmojis {
margin-bottom: 40px;
font-size: 1.5em;
}

#landscape {
margin-top: 10px;
font-size: 1.5em;
}

#temperatureDegree {
font-size: 2em;
margin-bottom: 0 auto;
}