diff --git a/assets/wave1_wireframe.pdf b/assets/wave1_wireframe.pdf new file mode 100644 index 000000000..9a1f4cb9d Binary files /dev/null and b/assets/wave1_wireframe.pdf differ diff --git a/index.html b/index.html index e69de29bb..33f3efa66 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + Weather Report + + + + +
+

Weather Report

+ +
+ +
+

Temperature

+
+
+ ⬆️ + ⬇️ +
+ 63 +
+
+ + +
+

Sky

+ +
+ +
+

Weather Garden

+
+
☁️ ☁️ ☁️ ☀️ ☁️ ☁️
+
🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃
+
+
+ + + + + + + + diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..fbe94027f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,61 @@ +let tempValue = document.getElementById("tempValue"); +let temperature = 63; +let landscape = document.getElementById("landscape") +let skySelect = document.getElementById("skySelect") +let skyElement = document.getElementById("sky") + +let increaseTempControl = document.getElementById("increaseTempControl"); +increaseTempControl.addEventListener("click", function () { + temperature += 1; + tempValue.innerHTML = temperature; + if (temperature >= 80) { + tempValue.className = "red"; + landscape.innerHTML = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (temperature >= 70) { + tempValue.className = "orange"; + landscape.innerHTML = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" + } else if (temperature >= 60) { + tempValue.className = "yellow"; + landscape.innerHTML = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃" + } else if (temperature >= 50) { + tempValue.className = "green"; + landscape.innerHTML = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" + } else { + tempValue.className = "teal" + landscape.innerHTML = "🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶" + } +}); + +let decreaseTempControl = document.getElementById("decreaseTempControl"); +decreaseTempControl.addEventListener("click", function () { + temperature -= 1; + tempValue.innerHTML = temperature; + if (temperature >= 80) { + tempValue.className = "red"; + landscape.innerHTML = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (temperature >= 70) { + tempValue.className = "orange"; + landscape.innerHTML = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" + } else if (temperature >= 60) { + tempValue.className = "yellow"; + landscape.innerHTML = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃" + } else if (temperature >= 50) { + tempValue.className = "green"; + landscape.innerHTML = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" + } else { + tempValue.className = "teal" + landscape.innerHTML = "🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶🥶" + } +}); + +skySelect.addEventListener("change", function (event) { + if (event.target.value === "sunny") { + skyElement.innerHTML = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️" + } else if (event.target.value === "cloudy") { + skyElement.innerHTML = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️" + } else if (event.target.value === "rainy") { + skyElement.innerHTML = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧" + } else { + skyElement.innerHTML = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨" + } +}) diff --git a/styles/index.css b/styles/index.css index e69de29bb..c58d539f7 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,110 @@ + +.header_header { + color: white; + grid-column: span3; + grid-column-start: span 3; + grid-column-end: auto; + display: flex; + margin: 2rem auto 3rem 0; + margin-top: 2rem; + margin-right: auto; + margin-bottom: 3rem; + margin-left: 0px; + align-content: center; +} + +body { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto auto; + grid-gap: 1rem; + font-family: "Rubik", sans-serif; + font-size: 18px; + /* background-color: #1b69f9; */ + background-image: url(https://c4.wallpaperflare.com/wallpaper/134/37/127/seasons-spring-summer-winter-wallpaper-preview.jpg); + background-size: 100%; + margin: 2rem; +} + +.temperature_section { + grid-row: 2; +} + +.temperature_content { + display: flex; + flex-direction: row; +} + +.temperature_section, .sky_section, .city-name_section { + border-radius: 8px; + padding: 2rem; + background-color: white; +} + +section { + display: block; +} + +.temperature_controls { + display: flex; + flex-direction: column; + align-items: center; +} + +div { + display: block; +} + +#tempValue { + font-size: 3rem; + margin-left: 1.5rem; + /* padding-right: 1rem; */ + /* margin-right: 1.5rem; */ +} + +.red { + color: rgb(255, 4, 4); +} + +.orange { + color: rgb(255, 114, 6); +} + +.yellow { + color: gold; +} + +.green { + color: rgb(48, 255, 7); +} + +.teal{ + color: rgb(4, 255, 217); +} + +.sky__section { + grid-row: 3 + +} + +.snowy { + background-color: lightsteelblue; +} + +.garden_content { + min-height: 200px; + max-width: fit-content; + margin: auto; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: space-between; + border-radius: 8px; + font-size: 2em; +} +.garden_section { + grid-row: span 3; + grid-column: 2; + text-align: center; + align-self: center; +} \ No newline at end of file