diff --git a/index.html b/index.html index e69de29bb..0d5f78dc1 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,58 @@ + + + + + Weather + + + + + + +
+
+

your Weather Report

+
+
+
+
+
+

City

+ + +
+ +
+

Sky

+ +
+ +
+

Temperature

+ +
+

🔽

+

70

+

🔼

+
+
+
+ +
+

your Weather Garden

+
+

🌧️ ⛈️ 🌦️ 🌈 🌨️ 🌩️ ❄️ ☀️ ☀️

+

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

+
+
+
+ + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..538fbdbc3 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,70 @@ +console.log("hellooo!") + +//store current temp in a variable + +const state = { + //color: "red", + tempCount : 70, +}; + + +//increase temp +const increaseTemp= () => { + state.tempCount +=1 + const tempUp = document.querySelector("#temp") + tempUp.textContent = `${state.tempCount}` + //updateTempColor(); +}; + +const decreaseTemp= () => { + state.tempCount -=1 + const tempDown = document.querySelector("#temp") + tempDown.textContent = `${state.tempCount}` + //updateTempColor(); +}; + + +// const updateTempColor = () => { +// const temp = state.tempcount +// if (temp>= 80) { +// state.color = "red"; +// } else if (temp >= 70) { +// state.color = "orange"; +// } else if (temp >= 60) { +// state.color = "yellow"; +// } else if (temp >= 50) { +// state.color = "teal"; +// } +// }; + + + +const registerEventHandlers = () => { + //updateTempColor(tempCount); + + const upButton = document.querySelector("#increase-temp"); + upButton.addEventListener("click", increaseTemp); + + const downButton = document.querySelector("#decrease-temp"); + downButton.addEventListener("click", decreaseTemp); + + +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + + +//change city name/// + +//Select Html element the event will occur on// +//make function run when it occurs +// const changeCityName = () => { +// const cityInput = document.querySelector("#city-input"); +// const changedElement = document.querySelectorAll(".your-city"); +// changedElement.textContent = cityInput.value; +// }; +// //register the function as an event listener + + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..011a6a52c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,166 @@ + + +:root { + --ff-primary: 'Source Sans Pro', sans-serif; + --ff-secondary: 'Source Code Pro', monospace; + --ff-tertiary: 'Caveat', cursive; + + --fw-reg: 300; + --fw-bold: 1000; + + --clr-light: rgb(255, 255, 255); + --clr-accent: lightgray; + --clr-body:mediumturquoise; + + --fs-h1: 3rem; + --fs-h2: 2.5rem; + --fs-h3: 2rem; + --fs-body: 1rem; +} + +/***** General Styling *******/ + +h1{ + font-family: var(--ff-primary); + font-size: var(--fs-h1); +} + +h2{ + font-size: var(--fs-h3); +} + +h3{ + font-size: var(--fs-body); +} + +em{ + font-family: var(--ff-tertiary); +} + +body{ + margin: 0; + background-color: var(--clr-body); +} + +main{ + background-color: var(--clr-body); + margin:0; + display: flex; +} + +/***** header styles *****/ +.city-header{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + +} + +/***** user input styling ******/ + +.weather-boxes{ + display: flex; + flex-wrap: wrap; + /*max-width: min-content;*/ + flex-direction: column; + justify-content: center; + border-radius: 20%; + padding: 8%; + margin: 3%; + background-color: white; +} + +.weather-forms{ + display: flex; + flex-direction: column; + max-width: 50%; + padding:3%; + margin-left:7%; + justify-content: left; + min-width:min-content ; + } + +/******* city styles *****/ + +button{ + max-width: 75%; + margin: 3%; + justify-content: center; +} + +input{ + max-width: 80%; +} + +/******* temperature styles ******/ + +#temp{ + display: flex; + color:red; + font-weight:var(--fw-bold); + align-items: center; + font-size: 2rem; +} + +#tempbox{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +p{ + max-width: inherit; +} +/******* weather garden styles ****/ + +.weather-garden { + display: flex; + margin-left: 10%; + margin-top: 5%; + flex-direction: column; + align-items:center; + justify-content: flex-start; + + +} + +figure{ + display: flex; + flex-direction: column; + height: 50%; + width: 100%; + background-color:var(--clr-accent); + justify-content: space-between; + text-align: center; + border-radius: 8px; + font-size: 2em; +} + +footer{ + text-align: center; + color: var(--clr-light); +} + +/*colors*/ + +.orange { + color: darkorange; +} + +.red { + color: red; +} + +.yellow { + color: yellow; +} + +.green { + color: green; +} + +.blue{ + color: teal; +} \ No newline at end of file