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

Rae Elwell Weather Report #69

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

Rae Elwell Weather Report #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f49ff6a
index html organized
raeelwell Dec 8, 2021
3436b84
javascript backend created
raeelwell Dec 9, 2021
39e37c3
completed project
raeelwell Dec 14, 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
87 changes: 85 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,91 @@
<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>

<div class ='header' id ='pageTitle'>
<h1>Weather Report</h1>
<div class ='header' id='lovelyCity'>
<p>for the lovely city of</p>
</div>
<div class ='header' id='mutableSubHeader'>
</div>
</div>
<main class ='websiteBody'>
<section class ='mutableComponents'>
<div class = 'widget' id ='temperatureChanger'>
<div class = 'widget text' id ='Temperature Title'>
<p>Temperature</p>
</div>
Comment on lines +22 to +24
Copy link

Choose a reason for hiding this comment

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

It's more appropriate to use a heading tag (<h2>, <h3> depending on how nested) for something like a <section> title:

Suggested change
<div class = 'widget text' id ='Temperature Title'>
<p>Temperature</p>
</div>
<h2 class = 'widget text' id ='Temperature Title'>
Temperature
</h2>

<div class ='arrowKeys'>
<div id ='Upper Arrow'>
<button id ='upArrow'>⬆️</button>
</div>
<div id ='Lower Arrow'>
<button id ='downArrow'>⬇️</button>
</div>
</div>
<div class ='widgetText' id = 'temperatureDisplay'>
</div>
</div>
<div class = 'widget' id ='skyChanger'>
<div class = 'widgetText' id='skyTitle'>
<p>Sky</p>
</div>
<div class ='dropdownMenu'>
<select name ="Select Weather" id ='dropdownButton'>
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</div>
</div>
<div class ='widget' id ='hometownChanger'>
<div class ='widget text' id = 'Hometown Title'>
<p>City Name</p>
</div>
<form id="hometownForm">
<label>City Input: <input type='text' id='cityInput'></label>
<button type='submit' id='submitInput'>Submit</button>
</form>
</div>
</section>
<div class ='visualComponent'>
<div class='Immutable Title'>
<p>Weather Garden</p>
</div>
<div id='gardenBackground'>
<div class='display' id='topDisplay'>
</div>
<div class='display' id='bottomDisplay'>
</div>
</div>
</div>
</main>
<script src ="src/index.js" type="text/javascript"></script>
</body>
</html>
</html>

<!-- Body
Header
immutable sub header
mutable sub header
Mutable Components
Temperature Changer
Arrow keys
Top Arrow
Bottom Arrow
Temperature Display
Sky Changer
Dropdown menu
Hometown Changer
Display text
Type field (links to mutable sub header)
Reset Button
Visual Component
Immutable Title
Image
Top line display (mutable, links to sky changer)
Bottom line display (mutable, links to temperature)-->
87 changes: 87 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
const tempDisplay = document.getElementById("temperatureDisplay");
const skyDisplay = document.getElementById("topDisplay");
const groundDisplay = document.getElementById("bottomDisplay");
const cityInput = document.getElementById("mutableSubHeader");
const bgDisplay = document.getElementById("gardenBackground");

//document.getElementById("myDiv").style.backgroundColor = "lightblue";

tempDisplay.textContent = 70;
skyDisplay.textContent = "☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️";
groundDisplay.textContent ="🌱 🌱 🌱 🌱 🌱 🌱 🌱 🌱";
cityInput.textContent = "My Hometown";
bgDisplay.style.backgroundColor = "orange";
Copy link

Choose a reason for hiding this comment

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

It's a best practice to avoid directly setting the style of an element in JS. (This is because then we only have one place we need to update styles when we change the theme of the site.)


let temperature = 70;

const registerEventHandlers = () => {
const upArrow = document.querySelector('#upArrow');
const downArrow = document.querySelector('#downArrow');
const selectWeather = document.querySelector('#dropdownButton');
const citySubmission = document.querySelector('#hometownForm');

upArrow.addEventListener("click", increaseTemp);
downArrow.addEventListener("click", decreaseTemp);
selectWeather.addEventListener("change", skyStateSelect);
citySubmission.addEventListener("submit", changeCityName);
}

const increaseTemp = () => {
temperature +=1;
tempDisplay.textContent = temperature;
mutableGround(temperature);
}

const decreaseTemp = () => {
temperature -=1;
tempDisplay.textContent = temperature;
mutableGround(temperature);
}

const mutableGround = (temperature) => {
groundDisplay.textContent = "🌱 🌱 🌱 🌱 🌱 🌱 🌱 🌱";
bgDisplay.style.backgroundColor = "orange";
if (temperature > 80) {
groundDisplay.textContent = "🌵 🌵 🌵 🌵 🌵 🌵 🌵";
bgDisplay.style.backgroundColor = "red";
}
if (temperature < 70) {
groundDisplay.textContent = "💧 💧 💧 💧 💧 💧 💧 💧 💧";
bgDisplay.style.backgroundColor = "yellow";
}
if (temperature < 60 ) {
bgDisplay.style.backgroundColor = "green";
}
if (temperature < 50) {
groundDisplay.textContent = "🏔️ 🏔️ 🏔️ 🏔️ 🏔️ 🏔️ 🏔️ 🏔️";
bgDisplay.style.backgroundColor = "teal"
}
}

const skyStateSelect = () => {
let select = document.getElementById('dropdownButton');
let skyState = select.options[select.selectedIndex].value;
let weatherDisplay = "Weather Display"
if (skyState == "sunny") {
weatherDisplay = "☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️"
};
if (skyState == "cloudy") {
weatherDisplay ="☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️"
};
if (skyState == "snowy") {
weatherDisplay = "❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️"
};
if (skyState =="rainy") {
weatherDisplay = "🌧 🌧 🌧 🌧 🌧 🌧 🌧"
}
skyDisplay.textContent = weatherDisplay;
}

const changeCityName = (submission) => {
cityInput.textContent = document.getElementById("cityInput").value;
submission.preventDefault();
}

document.addEventListener("DOMContentLoaded", registerEventHandlers);

//consider making sky/grass a dictionary to pull the key from
66 changes: 66 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
body {
background-color: rgb(62, 62, 177);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

h1 {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 3em;
}

p {
font-size:1.2em;
color: lightblue;
}

.widget * {
background-color: rgb(110, 107, 107);
width: 200px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

main {
display: flex;
justify-content: space-around;
}

#temperatureChanger {
padding: 15px;
}

.arrowKeys * {
display: inline;
}

#skyChanger {
padding: 15px;
}

#hometownChanger {
padding: 15px;
}

#gardenBackground {
background-color: green;
width: 500px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-around;
}

.display {
display: flex;
justify-content: space-around;
font-size: xx-large;
}

.header * {
display: inline-block;
}

.subHeader {
display: inline-block;
}