-
Notifications
You must be signed in to change notification settings - Fork 78
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.
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
Al Leonard: Weather Report #58
base: main
Are you sure you want to change the base?
Changes from all commits
980d025
dec64d2
7a8fd61
14c88e2
cf3c61d
0b81457
1530615
506261e
777d7a9
ddb8c5f
63926fd
0c0208a
6a0972c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
.vscode | ||
.DS_Store | ||
.DS_Store | ||
venv/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<meta charset="utf-8"> | ||
<link rel="stylesheet" type="text/css" href="./styles/index.css" media="screen"/> | ||
<script src="./scripts/script.js"></script> | ||
<script src="./scripts/index.js"></script> | ||
<title>Weather World</title> | ||
</head> | ||
|
||
<body> | ||
|
||
<div class="live"> | ||
<div class="container">🌞 Weather World. Where Weather Lives.🌞<a target="_blank" href="https://weather.com/">OR go to a Site that Works!</a> | ||
</div> | ||
</div> | ||
|
||
<!-- SECTION 1 TOP-BANNER, PRIMARY AND INPUT OPTIONS--> | ||
<section class="top-banner"> | ||
<div class="container"> | ||
<h1 class="heading">Weather World</h1> | ||
<!-- INPUT FORM DISPLAY --> <!-- WAVE 5:--> <!--INPUT --> | ||
<form> | ||
<input type="text" placeholder="Search for a city" autofocus id="citySearch"> | ||
<button id="submitButton">RESET</button> | ||
</form> | ||
<h6 class="text">Weather World Cities: <br> Sunnyville, Cloudvile, Rainville, or Snowville</h6> | ||
<!-- FUN HEADER --> <!-- codecademy tutorial switch() --> | ||
<header onclick="newStyle();"> | ||
<h1 class="centered" id="colorwords">Weather Changes</h1> | ||
</header> | ||
<!-- DEFAULT CITY DISPLAY --> | ||
<nav class="city-default."> | ||
<h2 class="city-name" id="cityName">Weather World Forecast</h2> | ||
<span class="city-temp" id="cityTemp">degrees<sup>°F</sup></span> | ||
<figure> | ||
<img class="city-icon" id="cityPic" src="./assets/world.png" height="110" width="100" alt="World"/> | ||
<figcaption>There's a 100% chance of Weather!</figcaption> | ||
</figure> | ||
</nav> | ||
<!-- TEMPERATURE DISPLAY --> <!-- WAVE 2: --> <!--TEMPERATURE DISPLAY --> | ||
<h2 class="heading">Temperature</h2> | ||
<h2 id="givenTemp">70</h2> | ||
<!-- CLICKABLE TEMPERATURE BUTTONS --> <!-- WAVE 2: --> <!-- CLICK UP/DOWN TEMP --> | ||
<article> | ||
<button id="addDownButton">DOWN</button> | ||
<button id="addUpButton">UP</button> | ||
</article> | ||
|
||
</div> | ||
</section> | ||
<!-- changed the button from type to id to use the getElementById() --> | ||
|
||
<!-- SECTION 2 --> <!-- CITY SUMMARY DISPLAYS --> | ||
<!-- WAVE 4 --> <!-- Element(s) that displays the city name(s) --> | ||
<!-- Element that contains a <input type="text"> element, used to rename the city --> | ||
<section class="city-section"> | ||
<div class="container"> | ||
<ul class="cities"> | ||
|
||
<li class="city"> | ||
<h2 class="city-name">Sunnyville</h2> | ||
<span class="city-temp">80<sup>°F</sup></span> | ||
<figure> | ||
<img class="city-icon" src="./assets/sunny.png" height="100" width="100" alt="Sunny"/> | ||
<figcaption>Sunny with Temperatures between 70-120°F</figcaption> | ||
</figure> | ||
</li> | ||
|
||
<li class="city"> | ||
<h2 class="city-name">Rainville</h2> | ||
<span class="city-temp">55<sup>°F</sup></span> | ||
<figure> | ||
<img class="city-icon" src="./assets/rainy.png" height="100" width="100" alt="Rainy"/> | ||
<figcaption>Rainy with Temperatures between 40-65°F</figcaption> | ||
</figure> | ||
</li> | ||
|
||
<li class="city"> | ||
<h2 class="city-name">Cloudville</h2> | ||
<span class="city-temp">50<sup>°F</sup></span> | ||
<figure> | ||
<img class="city-icon" src="./assets/cloudy.png" height="100" width="100" alt="Cloudy"/> | ||
<figcaption>Cloudy with Temperatures between 40-65°F</figcaption> | ||
</figure> | ||
</li> | ||
|
||
<li class="city"> | ||
<h2 class="city-name">Snowville</h2> | ||
<span class="city-temp">30<sup>°F</sup></span> | ||
<figure> | ||
<img class="city-icon" src="./assets/snowy.png" height="100" width="100" alt="Snowy"/> | ||
<figcaption>Snowy with Temperatures between 0-40°F</figcaption> | ||
</figure> | ||
</li> | ||
|
||
</ul> | ||
|
||
</div> | ||
</section> | ||
|
||
|
||
<!-- SECTION 3 --> | ||
<!-- SKY DISPLAY SELECTOR --> <!-- WAVE 3 --> <!-- A <select> dropdown element to set the sky type --> <!-- An element that displays a sky --> | ||
<section class="sky"> | ||
<label for="skies">Choose a sky:</label> | ||
|
||
<select name="skies" id="skySelector"> | ||
<option value="./assets/world.png">World View</option> | ||
<option value="./assets/sunny_sky.png">Sunny</option> | ||
<option value="./assets/cloudy_sky.png">Cloudy</option> | ||
<option value="./assets/rainy_sky.png">Rainy</option> | ||
<option value="./assets/snowy_sky.png">Snowy</option> | ||
</select> | ||
|
||
|
||
<img id="displaySky" class="sky_display" src="./assets/world.png" height="320" width="300" alt="Sky View"/> | ||
|
||
</section> | ||
|
||
|
||
<!-- FOOTER --> | ||
<footer class="page-footer"> | ||
<div class="container"> | ||
<small>I <span>❤</span> Ada</small> | ||
</div> | ||
</footer> | ||
|
||
|
||
</body> | ||
</html> | ||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Wave 2 --> | ||
<!-- An element that displays the temperature --> | ||
<!-- A clickable element to increase temperature --> | ||
<!-- A clickable element to decrease temperature --> | ||
|
||
|
||
<!-- An element that displays a landscape --> | ||
|
||
|
||
<!-- Wave 3 --> | ||
<!-- A <select> dropdown element to set the sky type --> | ||
|
||
|
||
<!-- An element that displays a sky --> | ||
|
||
|
||
<!-- Wave 4: --> | ||
<!-- An element that displays the city name --> | ||
|
||
|
||
<!-- An element that contains a <input type="text"> element, used to rename the city --> | ||
|
||
|
||
<!-- Wave 5: --> | ||
|
||
<!-- A clickable element to reset the city name --> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,166 @@ | ||
|
||
// HELPER FUNCTION // | ||
function numsChangeColor() { | ||
let temp = document.querySelector('#givenTemp'); | ||
|
||
if (state.givenTemp >= 100) { | ||
temp.style.color = "black" | ||
} else if ((state.givenTemp < 100) && (state.givenTemp >= 70)) { | ||
temp.style.color = "red" | ||
} else if ((state.givenTemp < 70) && (state.givenTemp >= 60)) { | ||
temp.style.color = "orange" | ||
} else if ((state.givenTemp < 60) && (state.givenTemp >= 50)) { | ||
temp.style.color = "yellow" | ||
} else if ((state.givenTemp < 50) && (state.givenTemp >= 40)) { | ||
temp.style.color = "green" | ||
} else if ((state.givenTemp < 40) && (state.givenTemp >= 30)) { | ||
temp.style.color = "blue" | ||
} else { | ||
temp.style.color = "purple" | ||
} | ||
}; | ||
|
||
////////////////////////////// WAVE 2 ////////////////////////////////// | ||
////////////////// EVENT HANDLER (UP/DOWN TEMPERATURE)////////////////// | ||
// SELECT THE EVENT TARGET | ||
// document.getElementById('givenTemp') || document.querySelector("#givenTemp"); | ||
|
||
////////////////////////////// WAVE 2 ////////////////////////////////// | ||
/////////////// METHODS (UP/DOWN TEMPERATURE) BEHAVIORS //////////////// | ||
const state = { | ||
givenTemp: 70 | ||
}; | ||
const addTemp = (event) => { // Add temp UP Behavior | ||
state.givenTemp += 1; | ||
const tempUp = document.querySelector("#givenTemp"); | ||
tempUp.textContent = state.givenTemp; | ||
numsChangeColor(); | ||
} | ||
const subTemp = (event) => { // Add temp DOWN Behavior | ||
state.givenTemp -= 1; | ||
const tempDown = document.querySelector("#givenTemp"); | ||
tempDown.textContent = state.givenTemp; | ||
numsChangeColor(); | ||
}; | ||
Comment on lines
+33
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great helper functions! |
||
|
||
// REGISTER ALL EVENTS // use the .registerEventHandler | ||
const registerEventHandlers = (event) => { // EACH EVENT needs a .addEventListener - listens fot the event i.e. "click" then performs a function | ||
// WAVE 2 // reigster the upButton | ||
const upButton = document.querySelector("#addUpButton"); | ||
upButton.addEventListener("click", addTemp); | ||
// WAVE 2 // reigster the downButton | ||
const downButton = document.querySelector("#addDownButton"); | ||
downButton.addEventListener("click", subTemp); | ||
// WAVE 5 // register the reset / submit button | ||
const submitButton = document.querySelector("#submitButton"); | ||
submitButton.addEventListener("click", switchCity); | ||
Comment on lines
+55
to
+56
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This isn't quite the behavior the requirements were asking for. For this section we were looking for two different pieces of functionality:
|
||
// WAVE 3 // register the skySelector | ||
const skySelect = document.querySelector("#skySelector"); | ||
skySelect.addEventListener("change", changeDisplay); | ||
}; | ||
///////////////////////////// WAVE 5 ///////////////////////////////// | ||
//////////////////// METHOD (switchCity) BEHAVIOR //////////////////// | ||
|
||
// SELECT THE EVENT TARGET | ||
// NOPE document.getElementById('changeCity') || document.querySelector("#changeCity"); | ||
// Needs to be the "citySearch" id BUT specifically the VALUE of the user input that triggers the change/reset of the display | ||
const switchCity = (event) => { | ||
// change to different city Behavior // NOPE const rainville = document.getElementById('changeCity') // NOPE rainville.innerHTML = "<h2>Rainville</h2>\n<span>55<sup>°F</sup></span>\n<figure>\n<img class=\"city-icon\" src=\"./assets/rainy.png\" height=\"100\" width=\"100\" alt=\"Rainy\"/>\n<figcaption>Rainy with Temperatures between 40-65°F</figcaption></figure>" | ||
const city = document.getElementById("citySearch").value; // THE USER INPUT** | ||
let cityNameText = ""; | ||
let cityTempText = ""; | ||
let cityPicSrc = ""; | ||
|
||
switch (city){ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Excellent use of a switch statement! (And nice extension!) |
||
case "Sunnyville": | ||
cityNameText = "Sunnyville"; | ||
cityTempText = "80°F"; | ||
cityPicSrc = "./assets/sunny.png"; | ||
break; | ||
case "Rainville": | ||
cityNameText = "Rainville"; | ||
cityTempText = "55°F"; | ||
cityPicSrc = "./assets/rainy.png"; | ||
break; | ||
case "Cloudville": | ||
cityNameText = "Cloudville"; | ||
cityTempText = "55°F"; | ||
cityPicSrc = "./assets/cloudy.png"; | ||
break; | ||
case "Snowville": | ||
cityNameText = "Snowville"; | ||
cityTempText = "30°F"; | ||
cityPicSrc = "./assets/snowy.png"; | ||
break; | ||
default: | ||
cityNameText = city + "? Type in a Weather World City"; | ||
cityTempText = "98°F"; | ||
cityPicSrc = "./assets/98degrees.png"; | ||
break; | ||
} | ||
|
||
const cityName = document.getElementById("cityName"); //STATE? - the thing to change | ||
cityName.textContent = cityNameText; | ||
|
||
const cityTemp = document.getElementById("cityTemp"); //STATE? - the thing to change | ||
cityTemp.textContent = cityTempText; | ||
|
||
const cityPic = document.getElementById("cityPic"); //STATE? - the thing to change | ||
cityPic.src = cityPicSrc; | ||
// preventDefault() - makes it stick with the change | ||
event.preventDefault() | ||
} | ||
|
||
///////////////////////////// WAVE 4 ////////////////////////////////// | ||
///////////// A dropdown element to select the sky display //////////// | ||
// SELECT THE EVENT TARGET | ||
// document.getElementById('changeCity') || document.querySelector("#changeCity"); | ||
|
||
/////////////// METHOD (changeDisplay) BEHAVIOR //////////////// | ||
const changeDisplay = (event) => { | ||
const displaySky = document.getElementById("displaySky"); | ||
displaySky.src = document.getElementById("skySelector").value; // USER INPUT ?? does this grab the option value? | ||
|
||
event.preventDefault() | ||
} | ||
|
||
|
||
|
||
/* NOPE - need to import jQuery? | ||
$("#skySelector").on("change", function(){ | ||
let selection = $(this).val() | ||
let changeSky = document.getElementById("displaySky") | ||
changeSky.src = selection | ||
// $("#displaySky").text(selection) | ||
}); | ||
*/ | ||
|
||
/* | ||
const changeSky = (event) => { | ||
const sky = document.getElementById("skySelector").value; | ||
const display = document.getElementById("displaySky"); | ||
.src | ||
switch(sky) { | ||
case "sunny": | ||
} | ||
*/ | ||
// REGISTER ALL EVENTS and LISTENERS // | ||
document.addEventListener("DOMContentLoaded", registerEventHandlers); | ||
|
||
|
||
///////////////////////////// WAVE 4 ////////////////////////////////// | ||
///////////// A dropdown element to select the sky display //////////// | ||
// SELECT THE EVENT TARGET | ||
// document.getElementById('changeCity') || document.querySelector("#changeCity"); | ||
|
||
|
||
|
||
// const form = document.querySelector(".top-banner form"); | ||
// ^ this will return the form | ||
|
||
// form.addEventListener("submit", => { | ||
|
||
// .then(response?)s | ||
// .catch(() => { | ||
// msg.textContent = "Please search for a valid city 😩"; | ||
// }); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
// FUN BONUS color change on click!! FLARE from Codecademy tutorial | ||
|
||
function newStyle() { | ||
let newColor = ''; | ||
let newFont = ''; | ||
let x = Math.floor(Math.random()*7); | ||
switch (x){ | ||
|
||
case 0: | ||
newColor = 'red'; | ||
newFont = 'Times New Roman'; | ||
break; | ||
case 1: | ||
newColor = 'blue'; | ||
newFont = 'Florence, cursive'; | ||
break; | ||
case 2: | ||
newColor = 'yellow'; | ||
newFont = 'Verdana'; | ||
break; | ||
case 3: | ||
newColor= 'purple'; | ||
newFont = 'Courier New'; | ||
break | ||
case 4: | ||
newColor = 'cyan'; | ||
newFont = 'Georgia'; | ||
break; | ||
case 5: | ||
newColor = 'maroon'; | ||
newFont = 'Palatino'; | ||
break; | ||
case 6: | ||
newColor = 'lime'; | ||
newFont = 'Impact'; | ||
break; | ||
} | ||
|
||
let elem = document.getElementById('colorwords'); | ||
elem.style.color = newColor; | ||
elem.style.fontFamily = newFont; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wave 2 is missing the landscape change functionality.