diff --git a/assets/mostlysunny.png b/assets/mostlysunny.png
new file mode 100644
index 000000000..399292816
Binary files /dev/null and b/assets/mostlysunny.png differ
diff --git a/index.html b/index.html
index e69de29bb..43c4d2fa6 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,49 @@
+
+
+
+ Weather Report
+
+
+
+
+
+
+
+
+ Sky
+
+
+
+
+
☀️ Your Weather Forecast 🌧️
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index e69de29bb..a02c4a9d0 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,103 @@
+let currentTemp = 65;
+
+const updateTempColor = currentTemp => {
+ const tempContainer = document.getElementById("currentTemp");
+ let color = "green";
+ if (currentTemp >= 80) {
+ color = "red";
+ } else if (currentTemp >= 70) {
+ color = "orange";
+ } else if (currentTemp >= 60) {
+ color = "yellow";
+ } else if (currentTemp >= 50) {
+ color = "green";
+ } else if (currentTemp < 50) {
+ color = "teal";
+ }
+ tempContainer.classList = color;
+};
+
+const updateTemp = currentTemp => {
+ const tempContainer = document.getElementById("currentTemp");
+ tempContainer.textContent = currentTemp;
+ updateTempColor(currentTemp);
+ updateLandscape(currentTemp);
+};
+
+const increaseTemp = () => {
+ currentTemp += 1;
+ updateTemp(currentTemp);
+};
+
+const decreaseTemp = () => {
+ currentTemp -= 1;
+ updateTemp(currentTemp);
+};
+
+const updateSky = () => {
+ const skyOption = document.getElementById("sky-options").value;
+ const skyContainer = document.getElementById("sky");
+ let sky = "";
+ if (skyOption === "Sunny") {
+ sky = "☁️☁️☁️☁️☁️☀️☁️☁️☁️☁️☁️";
+ skyColor = "sunny";
+ } else if (skyOption === "Cloudy") {
+ sky = "☁️☁️☁️☁️☁️⛅☁️☁️☁️☁️☁️";
+ skyColor = "cloudy";
+ } else if (skyOption === "Rainy") {
+ sky = "🌧🌧🌧🌧🌧🌦🌧🌧🌧🌧🌧";
+ skyColor = "rainy";
+ } else if (skyOption === "Snowy") {
+ sky = "🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨";
+ skyColor = "snowy";
+ }
+ skyContainer.textContent = sky;
+};
+
+const updateLandscape = (currentTemp) => {
+ const groundContainer = document.getElementById("ground");
+ let ground = "";
+ if (currentTemp >= 80) {
+ ground = "🌵🐍🦂🌵🐍🦂🌵🐍🦂🌵🐍";
+ } else if (currentTemp >= 70) {
+ ground = "🌸🌿🌼🌿🌸🌿🌼🌿🌸🌿🌼";
+ } else if (currentTemp >= 60) {
+ ground = "🌾🍃🌾🍃🌾🍃🌾🍃🌾🍃🌾";
+ } else if (currentTemp >= 50){
+ ground = "🍂🍁🍂🍁🍂🍁🍂🍁🍂🍁🍂"
+ } else if (currentTemp < 50){
+ ground = "🌲🌲⛄️🌲🌲⛄️🌲🌲⛄️🌲🌲"
+ }
+ groundContainer.textContent = ground;
+};
+
+const updateCity = () => {
+ const inputCity = document.getElementById("cityInput").value;
+ const headerCity = document.getElementById("headerCity");
+ headerCity.textContent = inputCity;
+};
+
+const resetCity = () => {
+ const cityNameInput = document.getElementById("cityInput");
+ cityNameInput.value = "Neverland";
+ updateCity();
+};
+
+const registerEventHandlers = () => {
+ const increaseTempButton = document.getElementById("increase-temp");
+ increaseTempButton.addEventListener("click", increaseTemp);
+
+ const decreaseTempButton = document.getElementById("decrease-temp");
+ decreaseTempButton.addEventListener("click", decreaseTemp);
+
+ const skyOption = document.getElementById("sky-options");
+ skyOption.addEventListener("change", updateSky);
+
+ const inputCity = document.getElementById("cityInput");
+ inputCity.addEventListener("input", updateCity);
+
+ const resetCityButton = document.getElementById("reset-button");
+ 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..96cd601a1 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,160 @@
+body {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ background: #add8e6;
+ grid-gap: 15px;
+ margin-left: 50px;
+ margin-right: 50px;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ grid-column: span 3;
+ /* width: 100%; */
+ font-size: 80px;
+ justify-content: space-around;
+}
+
+.header img {
+ height: 100px;
+}
+
+h1, h3 {
+ color:whitesmoke;
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-size: 50px;
+ font-weight: 700;
+ line-height: 64px;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+h2 {
+ color: rgb(39, 39, 39);
+ font-family: 'Open Sans', sans-serif;
+ font-size: 30px;
+ font-weight:500;
+ text-align: center;
+ background-color: rgba(255, 238, 140, 0.041);
+}
+
+h3 {
+ font-size: 25px;
+ font-weight:lighter;
+}
+
+.sky-section,
+.city-section {
+ text-align: center;
+}
+
+button {
+ box-shadow:inset 0px 1px 0px 0px #ffffff;
+ background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
+ background-color:#ededed;
+ border-radius:6px;
+ border:1px solid #dcdcdc;
+ display:inline-block;
+ cursor:pointer;
+ color:#575757;
+ font-family:Arial;
+ font-size:13px;
+ padding:6px 10px;
+}
+
+button:hover {
+ background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
+ background-color:#dfdfdf;
+}
+
+button:active {
+ position:relative;
+ top:1px;
+}
+
+.temperature-section,
+.sky-section,
+.city-section {
+ border-radius: 10px;
+ padding: 10px;
+ background-color: #d6ecf3;
+}
+
+.weather-section {
+ border-radius: 10px;
+ padding: 10px;
+ background-color: #eff7fa;
+ text-align: center;
+}
+
+.weather-section h1 {
+ text-transform: uppercase;
+ font-weight: bolder;
+ color: rgb(71, 71, 71);
+ font-size: 40px;
+}
+
+.weather-section h1:before,
+.weather-section h1:after{
+ position: relative;
+ content: "";
+ width: 30%;
+ left: 35%;
+ display: block;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ border-bottom: 5px dotted rgb(255, 255, 255);
+}
+
+.temperature-section {
+ grid-row: 2;
+}
+.weather-section {
+ grid-row: 2 / span 3;
+}
+
+.sky-section {
+ grid-row: 3;
+}
+.city-section {
+ grid-row: 4;
+}
+
+#temperature-content {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+#currentTemp {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ font-size: 60px;
+ font-family: 'Baloo Bhai', 'Source Sans Pro', sans-serif;
+ font-weight: 900;
+}
+
+.red {
+ color: red;
+}
+.orange {
+ color: rgba(255, 68, 0, 0.794);
+}
+.yellow {
+ color: rgb(255, 196, 0);
+}
+.green {
+ color: green;
+}
+.teal {
+ color: rgba(70, 148, 194, 0.753);
+}
+
+#sky,
+#ground {
+ font-size: 50px;
+ line-height: 80px;
+}
+