From 6b121bc59f2aec17fe00f30f905acb040da9e8a9 Mon Sep 17 00:00:00 2001 From: Melinda Date: Wed, 8 Dec 2021 09:50:50 -0800 Subject: [PATCH 1/2] connected html css and js files --- index.html | 25 +++++++++++++++++++++++ scripts/index.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/index.css | 7 +++++++ 3 files changed, 85 insertions(+) diff --git a/index.html b/index.html index e69de29bb..6b0ae253c 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + Document + + +
+

Weather Report

+
+
+
+

Temperature

+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..f17fcc79f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,53 @@ +// connect the up arrow so id of up-arrow to an on click event +// when the id is clicked, then increase temp counter by 1 + +// temperature variable, every time the user clickes the button, the temperature count goes up by 1 + + +// const appearanceHeading = document.getElementById("facts__heading"); + +// appearanceHeading.textContent = "Qualities and Traits of a Crab"; +let temperature = 80 + + +const increaseTemp=()=> { +// When clicked the temperature will rise by 1 degree + ++temperature + console.log("i am clicking the up button") + console.log(temperature) + document.getElementById("temperature-number").innerHTML=temperature + console.log('I am the color', color) +} + +const decreaseTemp=()=> { + // When clicked the temperature will drop by 1 degree + --temperature + console.log("i am clicking the down button") + console.log(temperature) + document.getElementById("temperature-number").innerHTML=temperature + console.log(color) +} + + + +// document.getElementById('output').innerHTML = lengthOfName; +document.getElementById("temperature-number").innerHTML=temperature + +// range for color and landscape icons + +let color = ''; + +if (temperature >=80) { + color = 'red' +} else if (70<=temperature<=79) { + color = 'orange' +} else if (60<=temperature<=69) { + color = 'yellow' +}else if (50<=temperature<=59) { + color = 'green' +}else if (49<=temperature) { + color = 'teal' +} + +document.getElementsByClassName("color").innerHTML=color + diff --git a/styles/index.css b/styles/index.css index e69de29bb..4a0bd514a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,7 @@ +* { + background-color: rgb(132, 93, 126); +} + +.color { + background-color: red; +} \ No newline at end of file From aba5f65959fb2e479c13e8c6df30600854010381 Mon Sep 17 00:00:00 2001 From: Melinda Date: Sat, 11 Dec 2021 13:32:30 -0800 Subject: [PATCH 2/2] added clickable buttons and text input --- index.html | 38 ++++++++++++++++++++++++------ scripts/index.js | 60 ++++++++++++++++++++++++++++++++++++++++++++---- styles/index.css | 11 +++++---- 3 files changed, 94 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 6b0ae253c..5d658bc4b 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,49 @@ + - + Document +
-

Weather Report

+
Weather Report
+

For the lovely city of Honolulu

-
-

Temperature

- - +
+

Temperature

+ +
+
+ +
+

Sky

+ +
-
+
+

Weather Garden

+
+
+ + +
+

City Name

+ +
+ \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index f17fcc79f..defd3edb8 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -13,12 +13,13 @@ let temperature = 80 const increaseTemp=()=> { // When clicked the temperature will rise by 1 degree ++temperature - console.log("i am clicking the up button") - console.log(temperature) + // console.log("i am clicking the up button") + // console.log(temperature) document.getElementById("temperature-number").innerHTML=temperature - console.log('I am the color', color) + // console.log('I am the color', color) } + const decreaseTemp=()=> { // When clicked the temperature will drop by 1 degree --temperature @@ -28,6 +29,58 @@ const decreaseTemp=()=> { console.log(color) } +// New Function will change the sky in Weather Garden +// based on the selected sky in the drop down menu +const setTypeOfWeather=()=> { + let skyValue = document.getElementById("sky").value + let sky = document.getElementById("selected-weather") + + // if skyValue == "Sunny" + // set sky innerHtml to a sun + if (skyValue=="Sunny") { + sky.innerHTML="☁️ ☁️ ☁️ ☀️ ☁️ ☁️"; + } else if (skyValue=="Cloudy") { + sky.innerHTML="☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️"; + } else if (skyValue=="Rainy") { + sky.innerHTML="🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧"; + } else if (skyValue=="Snowy") { + sky.innerHTML="🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨"; + }; + console.log(skyValue) +} +setTypeOfWeather() + +const setCityName=()=> { + let cityValue= document.getElementById("city").value + let sky = document.getElementById("city-display") + sky.textContent = cityValue +} + + +const registerEventHandlers = () => { + // Get up arrow HTML element by ID + const upArrowButton = document.querySelector("#up-arrow"); + + // Add Click event listener to up arrow button + // "click" -> event type + // increaseTemp -> function that gets called + upArrowButton.addEventListener("click", increaseTemp); + + const downArrowButton = document.querySelector("#down-arrow"); + + downArrowButton.addEventListener("click", decreaseTemp); + + // when sky dropdown changes (onChange) + // call setTypeOfWeather() + const skyDropdown = document.querySelector("#sky"); + skyDropdown.addEventListener("change", setTypeOfWeather); + + const cityInputText = document.querySelector("#city"); + cityInputText.addEventListener("input", setCityName); +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + // document.getElementById('output').innerHTML = lengthOfName; @@ -50,4 +103,3 @@ if (temperature >=80) { } document.getElementsByClassName("color").innerHTML=color - diff --git a/styles/index.css b/styles/index.css index 4a0bd514a..1c5c28054 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,7 +1,10 @@ * { - background-color: rgb(132, 93, 126); + background-color: rgb(140, 137, 155); +} + + +.head-title { + background-color: rgb(150, 10, 10); + } -.color { - background-color: red; -} \ No newline at end of file