diff --git a/assets/cloudy.jpg b/assets/cloudy.jpg
new file mode 100644
index 000000000..ea12555ab
Binary files /dev/null and b/assets/cloudy.jpg differ
diff --git a/assets/cold.jpg b/assets/cold.jpg
new file mode 100644
index 000000000..6a7cd51de
Binary files /dev/null and b/assets/cold.jpg differ
diff --git a/assets/cool.jpg b/assets/cool.jpg
new file mode 100644
index 000000000..3b4b22119
Binary files /dev/null and b/assets/cool.jpg differ
diff --git a/assets/extreme.jpg b/assets/extreme.jpg
new file mode 100644
index 000000000..5425e5856
Binary files /dev/null and b/assets/extreme.jpg differ
diff --git a/assets/freezing.jpg b/assets/freezing.jpg
new file mode 100644
index 000000000..98b79c303
Binary files /dev/null and b/assets/freezing.jpg differ
diff --git a/assets/hot.jpg b/assets/hot.jpg
new file mode 100644
index 000000000..a5a83d790
Binary files /dev/null and b/assets/hot.jpg differ
diff --git a/assets/mild.jpg b/assets/mild.jpg
new file mode 100644
index 000000000..d6bf68e14
Binary files /dev/null and b/assets/mild.jpg differ
diff --git a/assets/partlyCloudy.jpg b/assets/partlyCloudy.jpg
new file mode 100644
index 000000000..193d461fa
Binary files /dev/null and b/assets/partlyCloudy.jpg differ
diff --git a/assets/rainy.jpg b/assets/rainy.jpg
new file mode 100644
index 000000000..75c593aa7
Binary files /dev/null and b/assets/rainy.jpg differ
diff --git a/assets/snow.jpg b/assets/snow.jpg
new file mode 100644
index 000000000..3d1b24aa7
Binary files /dev/null and b/assets/snow.jpg differ
diff --git a/assets/sunny.jpg b/assets/sunny.jpg
new file mode 100644
index 000000000..e4bf8b038
Binary files /dev/null and b/assets/sunny.jpg differ
diff --git a/assets/thunder.jpg b/assets/thunder.jpg
new file mode 100644
index 000000000..f6ac6c25b
Binary files /dev/null and b/assets/thunder.jpg differ
diff --git a/assets/warm.jpg b/assets/warm.jpg
new file mode 100644
index 000000000..516ec3085
Binary files /dev/null and b/assets/warm.jpg differ
diff --git a/index.html b/index.html
index e69de29bb..3ab31dda8 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ Weather Time!
+
+
+
+
+
+ Weather Time!
+ City: Seattle
+
+
+
+ Sky
+
+
+
+
+ Temperature
+ 65
+
+
+
+
+
+
+
+ Landscape Display
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index e69de29bb..c9779d38a 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,96 @@
+const state = {
+ temp: 65,
+ tempRange: "mild",
+ sky: "sunny",
+ city: "Seattle"
+};
+
+// TEMPERATURE FUNCTIONALITY//
+const tempUp = (event) => {
+ state.temp += 1;
+ const count = document.querySelector("#tempDisplay");
+ count.textContent = `${state.temp}`;
+ checkTemp();
+};
+
+const tempDown = (event) => {
+ state.temp -= 1;
+ const count = document.querySelector("#tempDisplay");
+ count.textContent = `${state.temp}`;
+ checkTemp();
+};
+
+const checkTemp = (event) => {
+ if (state.temp === 105) {
+ state.tempRange = "extreme"
+ textColor("#tempDisplay", "black");
+ } else if (state.temp === 90 || state.temp === 104) {
+ state.tempRange = "hot"
+ textColor("#tempDisplay", "red");
+ } else if (state.temp === 75 || state.temp === 89) {
+ state.tempRange = "warm"
+ textColor("#tempDisplay", "rgb(255, 162, 0)");
+ } else if (state.temp === 60 || state.temp === 74) {
+ state.tempRange = "mild"
+ textColor("#tempDisplay", "rgb(255, 247, 0)");
+ } else if (state.temp === 45 || state.temp === 59) {
+ state.tempRange = "cool"
+ textColor("#tempDisplay", "rgb(73, 150, 26)");
+ } else if (state.temp === 30 || state.temp === 44) {
+ state.tempRange = "cold"
+ textColor("#tempDisplay", "rgb(0, 94, 255)");
+ } else if (state.temp === 29) {
+ state.tempRange = "freezing"
+ textColor("#tempDisplay", "rgb(0, 251, 255)");
+ }
+ const landscape = document.querySelector("#landscape");
+ landscape.className = state.tempRange;
+}
+
+const textColor = function(selector, color) {
+ document.querySelector(selector).style.color = color;
+}
+
+// const backgroundColor = function(selector, color) {
+// document.querySelector(selector).style.backgroundColor = color;
+// }
+
+const selectSky = (event) => {
+ state.sky = event.target.value;
+ const body = document.querySelector("body");
+ body.className = state.sky
+};
+
+
+// CITY FUNCTIONALITY //
+const selectCity = (event) => {
+ state.city = event.target.value;
+ const city = document.querySelector("#cityDisplay");
+ city.textContent = `City: ${state.city}`;
+};
+
+const resetCity = (event) => {
+ document.querySelector("#cityChoice").value = "Seattle";
+ const city = document.querySelector("#cityDisplay");
+ city.textContent = "For the city of: Seattle";
+};
+
+// REGISTER EVENT HANDLERS //
+const registerEventHandlers = (event) => {
+ const tempUpButton = document.querySelector("#tempUp");
+ tempUpButton.addEventListener("click", tempUp);
+
+ const tempDownButton = document.querySelector("#tempDown");
+ tempDownButton.addEventListener("click", tempDown);
+
+ const skyDisplay = document.querySelector("#skyChoices");
+ skyDisplay.addEventListener("change", selectSky)
+
+ const cityInput = document.querySelector("#cityChoice");
+ cityInput.addEventListener("change", selectCity)
+
+ const resetCityButton = document.querySelector("#reset");
+ resetCityButton.addEventListener("click", resetCity);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..a81494b49 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+body {
+ background-image: url(../assets/sunny.jpg);
+ background-size: 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ font-family: 'Noto Sans', sans-serif;
+}
+
+body.sunny {
+ background-image: url(../assets/sunny.jpg);
+}
+
+body.partlyCloudy {
+ background-image: url(../assets/partlyCloudy.jpg);
+}
+
+body.cloudy {
+ background-image: url(../assets/cloudy.jpg);
+}
+
+body.rainy {
+ background-image: url(../assets/rainy.jpg);
+}
+
+body.thunder {
+ background-image: url(../assets/thunder.jpg);
+}
+body.snowy {
+ background-image: url(../assets/snow.jpg);
+}
+
+header {
+ text-align: center;
+ padding: 1px;
+ background-color:rgb(255, 255, 255, 0.5);
+ font-family: 'Do Hyeon', sans-serif;
+ font-size: 1.5em;
+}
+
+main {
+ margin-top: 10px;
+ text-align: center;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+
+#temp {
+ border-radius: 25px;
+ background-color:rgb(255, 255, 255, 0.5);
+ margin: 5px;
+ grid-column: 1 / 2;
+ grid-row: 1 / 3;
+}
+
+#tempDisplay {
+ color: rgb(255, 247, 0);
+ font-size: 2em;
+}
+
+#sky {
+ border-radius: 25px;
+ background-color:rgb(255, 255, 255, 0.5);
+ margin: 5px;
+ grid-column: 1 / 2;
+ grid-row: 3 / 5;
+}
+
+#city {
+ border-radius: 25px;
+ background-color:rgb(255, 255, 255, 0.5);
+ margin: 5px;
+ grid-column: 1 / 2;
+ grid-row: 5 / 7;
+}
+
+#landscape {
+ background-color:rgb(255, 255, 255, 0.5);
+ background-size: 100%;
+ background-position: center;
+ background-size: cover;
+ border-radius: 25px;
+ margin: 5px;
+ grid-column: 2 / 4;
+ grid-row: 2 / 6;
+}
+
+#landscape h3 {
+ background-color:rgb(255, 255, 255, 0.5);
+ border-radius: 25px;
+}
+
+#landscape.extreme {
+ background-image: url(../assets/extreme.jpg);
+}
+
+#landscape.hot {
+ background-image: url(../assets/hot.jpg);
+}
+
+#landscape.warm {
+ background-image: url(../assets/warm.jpg);
+}
+
+#landscape.mild {
+ background-image: url(../assets/mild.jpg);
+}
+
+#landscape.cool {
+ background-image: url(../assets/cool.jpg);
+}
+
+#landscape.cold{
+ background-image: url(../assets/cold.jpg);
+}
+
+#landscape.freezing {
+ background-image: url(../assets/freezing.jpg);
+}
\ No newline at end of file