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 - Laurel #59

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

Cedar - Laurel #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
73f986e
Set up index.html and index.css files
paperbackwriter2 Dec 8, 2021
3d20e47
Adds displayTemp func with buttons to adjust temp
paperbackwriter2 Dec 8, 2021
aea2e20
tempStyle func changes color based on temp range
paperbackwriter2 Dec 8, 2021
51c0154
Changes landscapes dependent on temp
paperbackwriter2 Dec 8, 2021
b10767d
adds select tag as sky, responsive to user
paperbackwriter2 Dec 8, 2021
cb0a091
changes city name from text input. passes wave 4.
paperbackwriter2 Dec 8, 2021
97d309f
adds city reset button. passes wave 5.
paperbackwriter2 Dec 8, 2021
420ae4e
Reorganizes everything in a major way
paperbackwriter2 Dec 13, 2021
427899f
Moves comments to end of file
paperbackwriter2 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
29 changes: 28 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,35 @@
<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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Ruda' rel='stylesheet'>
<link href="styles/index.css" rel="stylesheet">

</head>
<body>

<h1 id='display-city'>Seattle</h1>
<div id=pretty-picture>
Copy link

Choose a reason for hiding this comment

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

Minor note: you might consider making the div for each of the sections a section element

<div id="sky"> ☁️ ☀️ ☁️ ☁️ ☁️</div>
<div id="landscape">🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨</div>
</div>
<div id="temp-box" ></div>
<div id='select-bar'>
<label for="sky-select">Set sky type:</label>
<select name='sky' id='sky-select'>
<option value='sunny' selected>Sunny</option>
<option value='cloudy'>Cloudy</option>
<option value='rainy'>Rainy</option>
<option value='snowy'>Snowy</option>
</select>
</div>
<div id="temp-buttons">
<button id="increase">Increase Temp</button>
<button id="decrease">Decrease Temp</button>
</div>
<div id="city-box">
<input type="text" id="city-name">
<button id='reset'>Reset City</button>
</div>
<script src='src/index.js'></script>
</body>
</html>
240 changes: 240 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
const state = {
Copy link

Choose a reason for hiding this comment

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

Great use of state object for temp and color class. You might consider making a separate object to hold the constants

temp: 48,
initTempColorClass: 'forty-degrees',
tempBox: document.getElementById('temp-box'), // NOT SURE IF THIS IS OK
landscapes_map: {
'80+': '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂',
'70+': '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷',
'60+': '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃',
'50+': '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲',
'40+': '🌬🌨 ️⛄🌬🌨 ️⛄🌬🌨 ️⛄🌬🌨 ️',
},
sky_map: {
sunny: ' ☁️ ☀️ ☁️ ☁️ ☁️',
cloudy: '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️',
rainy: '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧',
snowy: '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨',
}
}

// does it make sense to use state this way?
Copy link

Choose a reason for hiding this comment

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

state is generally used to hold the current state of the app, so data that might change


// set initial temp and display it
// should these be defined globally? in a function?

// let temp = 55;
// const tempBox = document.getElementById('temp-box');
// tempBox.textContent = temp;

// setting initial temp and color
state.tempBox.classList.add(state.initTempColorClass);
state.tempBox.textContent = `${state.temp} °F`;


// MAYBE THIS IS BAD BECAUSE I'M RESTYLING EVERY SINGLE TIME TEMP CHANGES

// HELPER FUNCTIONS

const styleColorAndLandscape = () => {
Copy link

Choose a reason for hiding this comment

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

Great work encapsulating this different functionality in their own functions.

results = determineTempRange();
setTempColor(results.tempColorClass);
setTempLandscape(results.tempLandscape);
}

const determineTempRange = () => {
temp = state.temp;
landscapes_map = state.landscapes_map;
if (temp >=80) {
tempColorClass = 'eighty-degrees';
tempLandscape = landscapes_map['80+']
} else if (temp >= 70) {
tempColorClass = 'seventy-degrees';
tempLandscape = landscapes_map['70+']
} else if (temp >= 60) {
tempColorClass = 'sixty-degrees';
tempLandscape = landscapes_map['60+']
} else if (temp >= 50) {
tempColorClass = 'fifty-degrees';
tempLandscape = landscapes_map['50+']
} else {
tempColorClass = 'forty-degrees';
tempLandscape = landscapes_map['40+']
}
return {
tempColorClass,
tempLandscape
}
}

const setTempColor = (className) => {
state.tempBox.removeAttribute('class');
state.tempBox.classList.add(className);
}

const setTempLandscape = (landscapeType) => {
const landscape = document.getElementById('landscape');
landscape.textContent = landscapeType;
}


// FUNCTIONS FOR EACH ELEMENT'S EVENT HANDLER

const registerIncreaseButton = () => {
const increaseButton = document.querySelector('#increase');
increaseButton.addEventListener('click', () => {
state.temp += 1
state.tempBox.textContent = `${state.temp} °F`;
styleColorAndLandscape();
});
}

const registerDecreaseButton = () => {
const decreaseButton = document.querySelector('#decrease');
decreaseButton.addEventListener('click', () => {
state.temp -= 1;
state.tempBox.textContent = `${state.temp} °F`;
styleColorAndLandscape();
})
}

const registerCityInput = () => {
const cityHeader = document.getElementById('display-city')
const cityInput= document.getElementById('city-name')
cityInput.addEventListener('input', () => {
cityHeader.innerHTML = cityInput.value
})
}

const registerCityResetButton = () => {
const resetButton = document.getElementById('reset');
const cityHeader = document.getElementById('display-city')
const cityInput= document.getElementById('city-name')
resetButton.addEventListener('click', () => {
cityHeader.innerHTML = 'Seattle';
cityInput.value = 'Seattle';
});
}

const registerSkySelect = () => {
const sky = document.getElementById('sky')
const skyMenu = document.getElementById('sky-select');
skyMenu.addEventListener('change', () => {
if (skyMenu.value == 'sunny') {
sky.textContent = state.sky_map.sunny;
} else if (skyMenu.value == 'cloudy') {
sky.textContent = state.sky_map.cloudy;
} else if (skyMenu.value == 'rainy') {
sky.textContent = state.sky_map.rainy;
} else {
sky.textContent = state.sky_map.snowy;
}
})
};

// REGISTER ALL EVENT HANDLERS
const registerEventHandlers = () => {
registerIncreaseButton();
registerDecreaseButton();
registerCityInput();
registerCityResetButton();
registerSkySelect();
}

// RUN ON LOAD
if (document.readyState !== 'loading') {
registerEventHandlers();
} else {
document.addEventListener('DOMContentLoaded', registerEventHandlers);
}









// this function is responsible for changing two things in one function...
Copy link

Choose a reason for hiding this comment

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

Nice work refactoring and DRYing up your code! Remember to remove commented code for the final code.


// const tempStyle = () => {
// // console.log('running tempStyle')
// temp = state.temp;
// tempBox = state.tempBox;
// const landscape = document.getElementById('landscape')

// tempBox.removeAttribute('class');

// if (temp >=80) {
// tempBox.classList.add('eighty-degrees');
// landscape.textContent = state.landscapes_map['80+']
// } else if (temp >= 70) {
// tempBox.classList.add('seventy-degrees');
// landscape.textContent = state.landscapes_map['70+']
// } else if (temp >= 60) {
// state.tempBox.classList.add('sixty-degrees');
// landscape.textContent = state.landscapes_map['60+']
// } else if (temp >= 50) {
// state.tempBox.classList.add('fifty-degrees');
// landscape.textContent = state.landscapes_map['50+']
// } else {
// tempBox.classList.add('forty-degrees');
// landscape.textContent = state.landscapes_map['40+']
// }
// }

// HELPER FUNCTIONS?


// HOW CAN I ELIMINATE THESE REPEATED CONDITIONALS
// const setTempColor = () => {

// state.tempBox.removeAttribute('class');

// if (state.temp >=80) {
// state.tempBox.classList.add('eighty-degrees');
// } else if (state.temp >= 70) {
// state.tempBox.classList.add('seventy-degrees');
// } else if (state.temp >= 60) {
// state.tempBox.classList.add('sixty-degrees');
// } else if (state.temp >= 50) {
// state.tempBox.classList.add('fifty-degrees');
// } else {
// state.tempBox.classList.add('forty-degrees');
// }
// }

// const setTempLandscape = () => {

// const landscape = document.getElementById('landscape')

// if (state.temp >=80) {
// landscape.textContent = state.landscapes_map['80+']
// } else if (state.temp >= 70) {
// landscape.textContent = state.landscapes_map['70+']
// } else if (state.temp >= 60) {
// landscape.textContent = state.landscapes_map['60+']
// } else if (state.temp >= 50) {
// landscape.textContent = state.landscapes_map['50+']
// } else {
// landscape.textContent = state.landscapes_map['40+']
// }
// }

// const setTempColor = () => {

// state.tempBox.removeAttribute('class');

// state.tempBox.classList.add();
// // if (state.temp >=80) {
// // state.tempBox.classList.add('eighty-degrees');
// // } else if (state.temp >= 70) {
// // state.tempBox.classList.add('seventy-degrees');
// // } else if (state.temp >= 60) {
// // state.tempBox.classList.add('sixty-degrees');
// // } else if (state.temp >= 50) {
// // state.tempBox.classList.add('fifty-degrees');
// // } else {
// // state.tempBox.classList.add('forty-degrees');
// // }
// }
83 changes: 83 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
body {
background-image: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Ruda';
}

h1 {
margin-top: 5%;
font-size: 100pt;
text-align: center;
}

div {
text-align: center;
}

#temp-box {
font-size: 80pt;
margin-top: 15mm;
}

#pretty-picture {
display: block;
width: 50%;
margin: 0 auto;
background-color:rgb(178, 185, 254);
font-size: 50pt;
border-radius: 25px;
border: 10px double #ffffffe2;
}

button {
border-radius: 15px;
font-size: 20pt;
background-color: cornsilk;
padding: 10pt;
}

#select-bar {
font-size: 20pt;
position: relative;
margin-bottom: 15pt;
}

input {
font-size: 20pt;
padding: 8pt;
}

#temp-buttons {
position: relative;
margin-bottom: 15pt;
}



/* Temperature range colors */

.eighty-degrees {
color: red;
}

.seventy-degrees {
color: rgb(255, 132, 0);
}

.sixty-degrees {
color: rgb(255, 247, 0);
}

.fifty-degrees {
color: green;
}

.forty-degrees {
color: teal;
}