diff --git a/index.html b/index.html
index e69de29bb..da26c2594 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Weather Report
+
+
+
+
+
+
+ TEMPERATURE
+
+
+
+
+ 69
+
+
+
+
+
+ ☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️
+ Weather Garden
+ 🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index e69de29bb..ffe2ea244 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,68 @@
+const state = {
+ temp: parseInt(document.getElementById("tempValue")),
+ defaultCity: "Seattle",
+};
+
+// Temperature Buttons --> Increase and Decrease
+const increaseTempButton = document.getElementById("upButton");
+const decreaseTempButton = document.getElementById("downButton");
+
+const deltaTemp = function (delta) {
+ const temperature = document.getElementById("tempValue");
+ temperature.textContent = parseInt(temperature.textContent) + delta;
+ state.temp = temperature.textContent;
+ changeGarden();
+};
+
+increaseTempButton.addEventListener("click", () => deltaTemp(1));
+decreaseTempButton.addEventListener("click", () => deltaTemp(-1));
+
+// Garden Based on Temp Value
+changeGarden = () => {
+ garden = document.getElementById("gardenScape");
+ if (state.temp >= 80) {
+ garden.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
+ } else if (state.temp >= 70 && state.temp < 80) {
+ garden.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷";
+ } else if (state.temp >= 60 && state.temp < 70) {
+ garden.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃";
+ } else {
+ garden.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+ }
+};
+
+// Change sky based on input
+const skyDrop = document.getElementById("skyDrop");
+skyDrop.addEventListener("change", () => deltaSky());
+
+const deltaSky = () => {
+ skyScape = document.getElementById("skyScape");
+ let selectedValue = skyDrop.options[[skyDrop.options["selectedIndex"]]].value;
+ if (selectedValue === "sunny") {
+ skyScape.textContent = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️";
+ } else if (selectedValue === "cloudy") {
+ skyScape.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
+ } else if (selectedValue === "rainy") {
+ skyScape.textContent = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧";
+ } else if (selectedValue === "snowy") {
+ skyScape.textContent = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
+ }
+};
+
+// Change city name based on user input
+const cityInput = document.getElementById("cityInput");
+cityInput.addEventListener("change", (event) => {
+ deltaCity(event.target.value);
+});
+
+const deltaCity = (newCity) => {
+ let cityName = document.getElementById("cityName");
+ cityName.textContent = newCity;
+ document.getElementById("cityInput").value = newCity;
+};
+
+// Reset city name
+const resetButton2 = document.getElementById("resetButton");
+resetButton2.addEventListener("click", () => {
+ deltaCity(state.defaultCity);
+});
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..3837b984a 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,96 @@
+body {
+ background-image: linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+ font-family: sans-serif;
+}
+
+#temperature {
+ grid-area: temperature;
+}
+#sky {
+ grid-area: sky;
+}
+#location {
+ grid-area: location;
+}
+#garden {
+ grid-area: garden;
+}
+
+main {
+ display: grid;
+ row-gap: 10px;
+ grid-template-rows: 20%, 20%, 20%, 20%, 20%;
+ grid-template-columns: 15%, 20%, 5%, 45%, 15%;
+ grid-template-areas:
+ ". . . . ."
+ ". temperature . garden ."
+ ". sky . garden ."
+ ". location . garden ."
+ ". . . . .";
+}
+
+main section {
+ border: solid;
+ border-radius: 15px
+}
+
+.small_box {
+ background-color: #00A383;
+ background-color: #004D7A;
+}
+
+header {
+ font-size: 40px;
+ font-weight: bolder;
+ text-align: center;
+}
+
+.footer-quote {
+ display: flex;
+ flex-direction: column;
+}
+
+.footer-quote cite {
+ margin: 0%;
+ align-self: center;
+}
+
+.footer-quote blockquote {
+ align-self: center
+}
+
+#tempTitle {
+ grid-area: tempTitle;
+}
+
+#tempButtons {
+ grid-area: tempButtons;
+}
+
+#tempValue {
+ grid-area: tempValue;
+}
+
+#temperature {
+ display: grid;
+ grid-template-rows: 50%, 50%;
+ grid-template-columns: 50%, 50%;
+ /* grid-template-areas:
+ ". . . ."
+ "tempTitle tempTitle tempTitle tempTitle"
+ ". tempButtons . tempValue ."
+ ". tempButtons . tempValue ."; */
+ grid-template-areas:
+ "tempTitle tempTitle"
+ "tempButtons tempValue";
+}
+
+#tempButtons {
+ display: flex;
+ flex-direction: column;
+}
+
+/* .weatherGarden {
+ display: flex;
+ flex-direction: column;
+} */
\ No newline at end of file