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

Jump to bottom

Cedar - Jessica Carnes - Weather Report #75

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

Cedar - Jessica Carnes - Weather Report #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
40fff39
Update wireframe
Jessicawyn Dec 8, 2021
ba0ae1f
Updated content
Jessicawyn Dec 9, 2021
c43ed81
Add temp control buttons
Jessicawyn Dec 9, 2021
20b6d41
Add sky dropdown and options
Jessicawyn Dec 10, 2021
6cedb0d
Add text input
Jessicawyn Dec 11, 2021
de86fdb
Add input button for location
Jessicawyn Dec 12, 2021
acd2181
Updated garden logic
Jessicawyn Dec 12, 2021
e8e8855
Add reset button
Jessicawyn 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
55 changes: 55 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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" />
Copy link

Choose a reason for hiding this comment

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

Your imports appear to be off by a folder:

Suggested change
<link href="../styles/index.css" rel="stylesheet" />
<link href="./styles/index.css" rel="stylesheet" />

</head>
<body>
<header>
<p>Weather Report for the city of <span id=cityName>Seattle</span></p>
</header>
<main>
<section id=temperature class="small_box tempBox">
<h2 id=tempTitle>TEMPERATURE</h2>
Copy link

Choose a reason for hiding this comment

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

You skipped directly to a <h2> without having an <h1>. Your heading tags should be able to be used to create a table of contents so it's important not to skip levels.

<div id=tempButtons>
<button id=upButton>hotter</button>
<button id=downButton>cooler</button>
</div>
<div id=tempValue>69</div>

</section>
<section id=sky class=small_box>
<form>
<select id=skyDrop name="sky">
<option value="sunny" selected>Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</form>
<h2>SKY</h2>
</section>
<section id=location class=small_box>
<h2>LOCATION</h2>
<input type="text" size="32" value="Seattle" name="locationBox" id="cityInput"/>
<button id=resetButton>reset</button>
</section>
<section id=garden class=large_box>
<div id=skyScape>☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️</div>
<h2>Weather Garden</h2>
<div id=gardenScape>🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲</div>
</section>

</main>
<footer class=footer-quote>
<blockquote>When life throws you a rainy day, jump in the puddles.</blockquote>
<cite>Winnie the Pooh</cite>
</footer>
<script
src="../scripts/index.js">
Comment on lines +51 to +52
Copy link

Choose a reason for hiding this comment

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

Suggested change
<script
src="../scripts/index.js">
<script
src="./scripts/index.js">

</script>
</body>
</html>
68 changes: 68 additions & 0 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
const state = {
temp: parseInt(document.getElementById("tempValue")),
defaultCity: "Seattle",
};

// Temperature Buttons --> Increase and Decrease
const increaseTempButton = document.getElementById("upButton");
const decreaseTempButton = document.getElementById("downButton");

const deltaTemp = function (delta) {
const temperature = document.getElementById("tempValue");
temperature.textContent = parseInt(temperature.textContent) + delta;
state.temp = temperature.textContent;
changeGarden();
};

increaseTempButton.addEventListener("click", () => deltaTemp(1));
decreaseTempButton.addEventListener("click", () => deltaTemp(-1));

// Garden Based on Temp Value
changeGarden = () => {
garden = document.getElementById("gardenScape");
if (state.temp >= 80) {
garden.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
} else if (state.temp >= 70 && state.temp < 80) {
garden.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷";
} else if (state.temp >= 60 && state.temp < 70) {
garden.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃";
} else {
garden.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
}
};

// Change sky based on input
const skyDrop = document.getElementById("skyDrop");
skyDrop.addEventListener("change", () => deltaSky());

const deltaSky = () => {
skyScape = document.getElementById("skyScape");
let selectedValue = skyDrop.options[[skyDrop.options["selectedIndex"]]].value;
if (selectedValue === "sunny") {
skyScape.textContent = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️";
} else if (selectedValue === "cloudy") {
skyScape.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
} else if (selectedValue === "rainy") {
skyScape.textContent = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧";
} else if (selectedValue === "snowy") {
skyScape.textContent = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
}
};

// Change city name based on user input
const cityInput = document.getElementById("cityInput");
cityInput.addEventListener("change", (event) => {
deltaCity(event.target.value);
});

const deltaCity = (newCity) => {
let cityName = document.getElementById("cityName");
cityName.textContent = newCity;
document.getElementById("cityInput").value = newCity;
};

// Reset city name
const resetButton2 = document.getElementById("resetButton");
resetButton2.addEventListener("click", () => {
deltaCity(state.defaultCity);
});
96 changes: 96 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
body {
background-image: linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);
font-family: sans-serif;
}

#temperature {
grid-area: temperature;
}
#sky {
grid-area: sky;
}
#location {
grid-area: location;
}
#garden {
grid-area: garden;
}

main {
display: grid;
row-gap: 10px;
grid-template-rows: 20%, 20%, 20%, 20%, 20%;
grid-template-columns: 15%, 20%, 5%, 45%, 15%;
grid-template-areas:
". . . . ."
". temperature . garden ."
". sky . garden ."
". location . garden ."
". . . . .";
}

main section {
border: solid;
border-radius: 15px
}

.small_box {
background-color: #00A383;
background-color: #004D7A;
}

header {
font-size: 40px;
font-weight: bolder;
text-align: center;
}

.footer-quote {
display: flex;
flex-direction: column;
}

.footer-quote cite {
margin: 0%;
align-self: center;
}

.footer-quote blockquote {
align-self: center
}

#tempTitle {
grid-area: tempTitle;
}

#tempButtons {
grid-area: tempButtons;
}

#tempValue {
grid-area: tempValue;
}

#temperature {
display: grid;
grid-template-rows: 50%, 50%;
grid-template-columns: 50%, 50%;
/* grid-template-areas:
". . . ."
"tempTitle tempTitle tempTitle tempTitle"
". tempButtons . tempValue ."
". tempButtons . tempValue ."; */
Comment on lines +78 to +82
Copy link

Choose a reason for hiding this comment

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

Style: It's a best practice to remove commented out code.

grid-template-areas:
"tempTitle tempTitle"
"tempButtons tempValue";
}

#tempButtons {
display: flex;
flex-direction: column;
}

/* .weatherGarden {
display: flex;
flex-direction: column;
} */