diff --git a/assets/wireFrame.jpg b/assets/wireFrame.jpg
new file mode 100644
index 000000000..f130a5ed7
Binary files /dev/null and b/assets/wireFrame.jpg differ
diff --git a/index.html b/index.html
index e69de29bb..1329523f7 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+ TheWeather
+
+
+
+
+ And now for The Weather...
+ Currently in ✨Seattle✨
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index e69de29bb..fdfb75a21 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,88 @@
+const state = {
+ temp: 73,
+ cloudy: "☁️☁️☁️_☁️☁️☁️☁️☁️☁️",
+ partlyCloudy: "☁️☁️___☀️☁️_☁️☁️",
+ rainy: "🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧",
+ sunny: "___☀️☁️_____",
+ onFireSky: "☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️",
+ onFireGround: "🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥",
+ garden: "🌻__🌷🌷🌱_",
+}
+
+const emojiSelector = {
+ 0: "✨",
+ 1: "⚡️",
+ 2: "👾",
+ 3: "⭐️",
+ 4: "🌈",
+}
+
+const randEmoji = () => {
+ return emojiSelector[Math.floor(Math.random() * 5)];
+}
+
+const changeTemp = (delta) => {
+ state.temp += delta;
+ const tempDisplay = document.querySelector("#tempDisplay");
+ tempDisplay.textContent = `${state.temp}`;
+}
+
+const increaseTemp = () => {
+ changeTemp(1);
+}
+
+const decreaseTemp = () => {
+ changeTemp(-1);
+}
+
+const skyDisplayUpdate = () => {
+ const updatedWeather = document.getElementById("cloudStatus").value;
+ const skyDisplay = document.getElementById("sky");
+ skyDisplay.textContent = state[updatedWeather];
+ if (updatedWeather === "onFireSky") {
+ document.getElementById("landscape").textContent = state.onFireGround;
+ }
+ else {
+ document.getElementById("landscape").textContent = state.garden;
+ }
+}
+
+const cityReset = () => {
+ const cityDisplayCard = document.getElementById("cityDisplay");
+ const cityTitleDisplay = document.getElementById("currentCity");
+
+ let frameEmoji = randEmoji();
+
+ cityDisplayCard.textContent = "Seattle";
+ cityTitleDisplay.textContent = "Currently in " + frameEmoji + "Seattle" + frameEmoji;
+}
+
+const cityUpdate = () => {
+ const newCity = document.getElementById("cityPicker").value;
+ const cityDisplayCard = document.getElementById("cityDisplay");
+ const cityTitleDisplay = document.getElementById("currentCity");
+
+ let frameEmoji = randEmoji();
+
+ cityDisplayCard.textContent = newCity;
+ cityTitleDisplay.textContent = "Currently in " + frameEmoji + newCity + frameEmoji;
+}
+
+const registerEventHandlers = () => {
+ const increaseButton = document.querySelector("#tempIncreaseButton");
+ increaseButton.addEventListener("click", increaseTemp);
+
+ const decreaseButton = document.querySelector("#tempDecreaseButton");
+ decreaseButton.addEventListener("click", decreaseTemp);
+
+ const changeWeather = document.getElementById("cloudStatus");
+ changeWeather.addEventListener("change", skyDisplayUpdate);
+
+ const updateCity = document.getElementById("cityPicker");
+ updateCity.addEventListener("change", cityUpdate);
+
+ const resetCity = document.getElementById("resetCity");
+ resetCity.addEventListener("click", cityReset);
+}
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..4a017509c 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,44 @@
+html, body {
+ height: 95%;
+ background-color: skyblue;
+}
+
+* {
+ border-color: black;
+ border-width: 2px;
+ border-style: dashed;
+}
+
+main {
+ display: flex;
+ border: 1px solid hotpink;
+ flex-flow: column wrap;
+ justify-content: space-around;
+ align-items: flex-start;
+}
+section {
+ padding: 20px;
+ border-radius: 4px;
+}
+
+.adjuster {
+ flex: 1 1 33%;
+ text-align: center;
+}
+
+.break {
+ flex-basis: 100%;
+}
+
+#gardenDisplay {
+ /* height: auto;
+ width: auto; */
+}
+
+#tempDisplay {
+ font-size: 50px;
+}
+
+button:hover {
+ border: 2px solid yellow;
+}
\ No newline at end of file