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

Paper - Kaylyn C. #64

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

Paper - Kaylyn C. #64

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
c2c7788
passes waves 4/5
kecardel Jun 17, 2021
9663cb2
passes wave 5/full JS functionality
kecardel Jun 17, 2021
cb077f7
adds additional value to drop down box
kecardel Jun 17, 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
54 changes: 54 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<title>Weather Report</title>
<link rel="stylesheet" href="styles/index.css">
</head>

<body>
<!-- <div class="layout-container">
<section class="section-template"></section>
<section class="section-template"></section>
</div> -->
<header><h1>Weather Report</h1>
<span>Where you make up the weather for the city of
<span id="displayCity">
Ravaged By Climate Change
</span>
</span>
</header>
<main>
<section id="gardenSection">
<h2>Weather Garden</h2>
<div id="garden-sky">🌪️🔥☄️☀️☄️🔥🌪️</div>
<div id="garden-garden">🌲🍄🌿🌸🌿🍄🌲</div>
</section>
<section id="tempSection">
<h2>Temperature</h2>
<div id="tempButtons">
<button id="temp-decrease">ↆ</button>
<button id="temp-increase">⇧</button>
</div>
<div>
<span id="showTempValue" class="green">65</span>
</div>
</section>
<section id="skySection">
<h2>Sky</h2>
<select id="selectSky">
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
<option value="apocalypse">Apocalypse</option>
</select>
</section>
<section id="citySection">
<h2>City Name</h2>
<input id="cityUserInput" type="text" value="Enter City Name">
<button id="resetCity">Reset</button>
</section>
</main>
<script src="scripts/index.js"></script>
</body>
92 changes: 92 additions & 0 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@

const decreaseTemp = () => {
const tempContainer = document.getElementById('showTempValue');
let currentTemp = tempContainer.textContent -= 1;
changeByTemp(currentTemp);
};

const increaseTemp = () => {
const tempContainer = document.getElementById('showTempValue');
let currentTemp = tempContainer.textContent = parseInt(tempContainer.textContent, 10) + 1;
changeByTemp(currentTemp);
};

const changeByTemp = (currentTemp) => {
const gardenContainer = document.getElementById('garden-garden');
const tempContainer = document.querySelector('#showTempValue');

if (currentTemp <= 49) {
gardenContainer.textContent = '🌲❄️⛄️❄️⛄️❄️⛄️❄️🌲';
tempContainer.className = 'blue';
}
else if (currentTemp <= 59) {
gardenContainer.textContent = '🍁🌲🍁🍂🌲🍁🌲🍁🍂';
tempContainer.className = 'teal'
}
else if (currentTemp <= 69) {
gardenContainer.textContent = '🌲🍄🌿🌸🌿🍄🌲';
tempContainer.className = 'green'
}
else if (currentTemp <= 79) {
gardenContainer.textContent = '🌸🌱🌼__🌷🌻🌿🌱_🌻🌷';
tempContainer.className = 'yellow'
}
else if (currentTemp <= 89) {
gardenContainer.textContent = '🌴__🥵_🏜_🌴__🐊_🏜';
tempContainer.className = 'orange'
}
else if (currentTemp >= 90) {
gardenContainer.textContent = '🔥🌵🦀🌵🦀🌵🦀🌵🔥';
tempContainer.className = 'red'
}
};

const selectSky = (event) => {
const gardenContainer = document.getElementById('garden-sky');
let userInput = event.target;
if (userInput.value === 'sunny') {
gardenContainer.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️'
}
else if (userInput.value === 'cloudy') {
gardenContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️';
}
else if (userInput.value === 'rainy') {
gardenContainer.textContent = '🌧🌈⛈🌧🌧💧⛈🌧💧🌧🌈🌧';
}
else if (userInput.value === 'snowy') {
gardenContainer.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'
}
else if (userInput.value === 'apocalypse') {
gardenContainer.textContent = '🌪️🔥☄️☀️☄️🔥🌪️'
}

};

const updateCity = () => {
const userInput = document.getElementById('cityUserInput').value;
const cityContainer = document.getElementById('displayCity');
cityContainer.textContent = userInput
}

const resetCityInput = () => {
cityContainer = document.getElementById('displayCity');
cityContainer.textContent = 'Ravaged By Climate Change';
inputContainer = document.getElementById('cityUserInput')
inputContainer.value = '';
}



const addDecreaseButton = document.getElementById("temp-decrease");
const addIncreaseButton = document.getElementById("temp-increase");
const skySelector = document.getElementById('selectSky');
const cityHeader = document.getElementById('cityUserInput');
const resetButton = document.getElementById('resetCity');

addDecreaseButton.addEventListener('click', decreaseTemp);
addIncreaseButton.addEventListener('click', increaseTemp);
skySelector.addEventListener('change', selectSky);
cityHeader.addEventListener('input', updateCity);
resetButton.addEventListener('click', resetCityInput);


36 changes: 36 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*
.layout-container {
background-color: rgba(0,0,0,0.25);
min-height: 300px;
padding: 50px 0;
}

.section-template {
background-color: rgba(0,0,0,0.25);
min-height: 600px;
width: 600px;
border: 2px solid rgba(0,0,0,0.25);
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
} */


.red {
color: red;
}
.orange {
color: orange;
}
.yellow {
color: goldenrod;
}
.green {
color: green;
}
.teal {
color: aquamarine;
}
.blue {
color: blue;
}