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

Scissors - Marisa M #53

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

Scissors - Marisa M #53

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
9e72509
Build basic structure for index.html and creates buttons and JS for T…
Supermobarbie Jun 15, 2021
4766df1
Adds images to landscape area on selection of dropdown option.
Supermobarbie Jun 15, 2021
e49948d
Refactors changeLandscape to replace images
Supermobarbie Jun 15, 2021
16e3a25
Adds JavaScript skeletons for Location Name and Location Reset. Refac…
Supermobarbie Jun 16, 2021
9f84c4b
refactors code to add responsive background, place holder image, plac…
Supermobarbie Jun 16, 2021
e0af56a
Makes a small fix to change the font colors in connection with the temp
Supermobarbie Jun 16, 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
83 changes: 83 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!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" type="text/css">
</head>
<body>

<header class="title">
<ul>
<li>
<h1 class="main-text">Weather Report for
</h1> </li>
<li> <h4 id="locationDisplay">
Unceded Coast Salish Land</h4> </li>

<li> <h2 id= "sassy-subtitle"> *Whether or not this report matches the weather you are experiencing is completely coincidental* </h2> </li>
Copy link

Choose a reason for hiding this comment

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

I appreciate the sassy subtitle :)

</ul>
</div>
</figure>
</header>

<section class="weather-display">
<div class="left-column">

<div class="weather-item" id=temperature>
<h3 id="temperatureCount">Temperature 65℉</h3>
Copy link

Choose a reason for hiding this comment

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

Consider adding an initial color so that when the page is loaded the color matches the 65℉ temperature

<button class="button" id="addTemperatureButton">+<br>🔥</button>
<button class="button" id="subtractTemperatureButton">-<br>🧊</button>
</div>

<div class="weather-item" id="skyBox">
<!-- <h3>Sky</h3> -->
<label for="sky">Sky Options</label>
<br> <br>
<select class="button" id="sky">
<option value="0" selected>
Select a sky option:</option>
<option value="sunny">
Sunny</option>
<option value="cloudy">
Cloudy</option>
<option value="rainy">
Rainy</option>
<option value="snowy">
Snowy</option>
</select>
</div>

<div class="weather-item" id="location">
<h3>Enter the weather location below:</h3>
<form>
<input type="text" id="locationInput" name="location" value="Unceded Coast Salish Land">
<br> <br>
<input class="button" type="reset" id="locationReset" value="Reset">
</form>
</div>
</div>

<div class="right-column" id="landscape">
<div>
<h3 id=landscape-text>Choose a Sky option or change the temperature for a custom weather report!</h3>
<section id="skyImageContainer">
<img src="https://media.giphy.com/media/snr51Qmnalxok/giphy.gif" alt="A gif from Miss Congeniality of a contestant saying: I'd have to say April 25th. Becasue it's not too hot, not too cold. All you need is a light jacket!">
</section>
</div>
</div>
</section>


<footer>
<p>
Copy link

Choose a reason for hiding this comment

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

✊

Black Lives Matter | Created on unceded Coast Salish land |
All work, copy, and code on this site are created and owned
by Marisa Morales unless otherwise stated.
</p>
</footer>
<script src="scripts/index.js" ></script>
</body>
</html>
111 changes: 111 additions & 0 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
// Variable assignment
let currentTemp = 65;

const skyImages = {
sunny: ["https://media.giphy.com/media/lyVNcb1n5Ob0Q/giphy.gif", "The sun shines directly into the camera lens through tall evergreens. The camera angle moves slightly."],
cloudy: ["https://media.giphy.com/media/lOkbL3MJnEtHi/giphy.gif", "The sun shines through clouds racing across the sky."],
rainy: ["https://media.giphy.com/media/vLi3T5m3RH45y/giphy.gif", "A hyper realistic animation. of heavy rain bouncing off tiled patio"],
snowy: ["https://media.giphy.com/media/Fh3ezinVpi4yk/giphy.gif", "A hyper realiztic animation of heavy snow falling through evergreens against distant mountains."]
};

// temperature functions
// increase temp helper function
const addTemp = () => {
currentTemp += 1;
updateTemp(currentTemp);
};
// decrease temp helper function
const subtractTemp = () => {
currentTemp -= 1;
updateTemp(currentTemp);
};
// Font changes for temp
const changeTempColor = (currentTemp) => {
const temperatureCountContainer = document.getElementById("temperatureCount");
let color = ''
if (currentTemp >= 80) {
color = 'red';
} else if (currentTemp >= 70) {
color= 'orange';
} else if (currentTemp >= 60) {
color = 'yellow';
} else if (currentTemp >= 50) {
color = 'green';
} else if (currentTemp <= 49) {
color = 'blue'
};
document.getElementById("temperatureCount").style.color = color;
Copy link

Choose a reason for hiding this comment

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

Consider using classes and than adding this style to the css.

Suggested change
document.getElementById("temperatureCount").style.color = color;
document.getElementById("temperatureCount").className = color; 
#styles.css

.blue {
     color: blue
}

};

// function to run whenever the Temp button is hit. Takes in the current temp and runs the helper functions above as well as updating the landscape to match the temp
const updateTemp = currentTemp => {
const temperatureCountContainer = document.querySelector("#temperatureCount")
temperatureCountContainer.textContent = `Temperature ${currentTemp}℉`;
changeTempColor(currentTemp);
updateLandscape(currentTemp);
}

// Function that updates the sky image
const changeSky = () => {
let option = document.querySelector('#sky');
let optionValue = option.value;
var skyImage = document.createElement("IMG");
skyImage.setAttribute("src", skyImages[optionValue][0]);
skyImage.setAttribute("alt", skyImages[optionValue][1]);
skyImageContainer.replaceChild(skyImage, skyImageContainer.childNodes[1]);
};
// Function that updates the location to match user input
const updateLocation = () => {
const inputLocation = document.getElementById("locationInput").value;
const locationDisplay = document.getElementById("locationDisplay");
locationDisplay.textContent = inputLocation;
};
// Function to reset the location on button click
const resetLocation = () => {
const locationInput = document.getElementById("locationInput");
locationInput.value = "Unceded Coast Salish Land";
updateLocation();
};
// Function to update the background color and landscape text to match the current temp
const updateLandscape = (currentTemp) => {
const landscapeContainer = document.getElementById('landscape-text');
let landscape = '';
if (currentTemp >= 80) {
landscape = 'Too hot too function';
document.body.style.background = 'linear-gradient(to bottom, #ffff99 0%, #cc0000 100%)';
} else if (currentTemp >= 70) {
landscape= 'Good day to sit by the pool';
document.body.style.background = 'linear-gradient(to bottom, #ffffcc 0%, #ff6600 100%)';
Copy link

Choose a reason for hiding this comment

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

Just as with the temperature, consider how we could add a className to the element in the javascript, and use this class to select for the element and change the style in our style sheet.

Additionally, note that updateLandscape has similar code to changeTempColor. Is there a way to combine these function to DRY up your code?

} else if (currentTemp >= 60) {
landscape = 'The perfect temperature... it must be near April 25... ';
document.body.style.background = 'linear-gradient(to bottom, #ffffff 0%, #ff9999 100%)';
} else if (currentTemp >= 50) {
landscape = 'Bundle up!';
document.body.style.background = 'linear-gradient(to bottom, #99ffcc 0%, #009900 100%)';
} else if (currentTemp < 49) {
landscape = '❅❆❄ Even my icicles have icicles! ❅❆❄';
document.body.style.background = 'linear-gradient(to bottom, #ffffff 0%, #33ccff 100%)';
}
landscapeContainer.textContent = landscape;
};


const registerEventHandlers = () => {
Copy link

Choose a reason for hiding this comment

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

Good work organizing these all together to enhance readability and changeability.

const addTemperatureButton = document.querySelector("#addTemperatureButton");
addTemperatureButton.addEventListener("click", addTemp);

const subtractTemperatureButton = document.querySelector("#subtractTemperatureButton");
subtractTemperatureButton.addEventListener("click", subtractTemp);

const skyOptions = document.querySelector("#sky");
skyOptions.addEventListener("change", changeSky);

updateLocation();
const locationInput = document.getElementById("locationInput");
locationInput.addEventListener("input", updateLocation);

const locationResetBtn = document.getElementById("locationReset");
locationResetBtn.addEventListener("click", resetLocation);
};

document.addEventListener("DOMContentLoaded", registerEventHandlers);
129 changes: 129 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@

/* General styling */
body {
font-family: Verdana, Geneva,
Tahoma, sans-serif;
background: linear-gradient(to bottom, #ff66ff 0%, #ccffff 100%);
}
h3 {
text-align: left;
font-size: 1.3em;
font-weight: normal;
}
/* label */
label {
text-align: left;
font-size: 1.3em;
}
.button {
background-color: #ffe6e6;
color: navy;
padding: .3em 1em;
text-align: center;
display: inline-block;
font-size: 1em;
}
#locationInput {
width: 20vw;
height: 2em;
background-color: #ffe6e6;
color: navy;
font-size: 1em;
}

/* Header flex-box*/
header {
display: flex;
flex-direction: column;
overflow: visible;
position: relative;
align-items: flex-start;
justify-content: safe;
min-height: 350px;
margin-top: 3em;
}
/* Flex organizing */
ul {
list-style-type: none;
flex: 1 1 auto;
/* justify-content: space-evenly; */
}
h1 {
text-align: left;
font-size: 3em;
font-variant: small-caps;
font-weight: lighter;
font-style: italic;
}
#sassy-subtitle {
text-align: left;
font-size: 1em;
font-weight: lighter;
font-style: italic;
}
#locationDisplay {
font-size: 2em;
font-weight: lighter;
font-style: italic;
}

/* Layout for main display area */
.left-column {
float: inline-start;
position: relative;
text-align: left;
width: 40%;
padding-left: 1em;
margin-top: 0;
margin-left: 2em;
}
.weather-item {
padding-bottom: 1.5em;
}
.right-column {
display: flex;
flex-flow: row-wrap;
text-align: center;
justify-content: center;
align-content: center;
float: right;
width: 45%;
padding: .5em;
}
.weather-display:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:600px) {
.weather-item, .landscape {
width: 100%;
}
}

/* Landscape flexbox */
.landscape {
flex: 1 1 auto;
/* justify-self: center; */
max-height: 80vh;
width: 100%;
position: relative;
object-fit: scale-down;
padding: .2em;
overflow: scroll;
}
/* Temperature count colors */
#temperatureCount {
color: black;
}
/* Footer */
footer {
text-align: center;
font-size: .8em;
font-style: italic;
margin-top: 1em;
line-height: 150%;
}