diff --git a/index.html b/index.html
index 5540cc6ea..ffd4bd6ab 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
@@ -7,9 +8,51 @@
Weather Report
-
+
+
+
+
+ Temperature
+
+
+ ⬆️
+
+ ⬇️
+
+
+
Sky
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..514519b5f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "weather-report",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}
diff --git a/src/index.js b/src/index.js
index e69de29bb..0ca719067 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,134 @@
+"use strict";
+
+const state = {
+ curTemp: 60,
+}
+
+const increaseTemp = () => {
+ const temp = document.getElementById("tempValue");
+ state.curTemp += 1;
+ temp.textContent = state.curTemp;
+ changeColorAndLandscape(state.curTemp);
+};
+
+const decreaseTemp = () => {
+ const temp = document.getElementById("tempValue");
+ state.curTemp -= 1;
+ temp.textContent = state.curTemp;
+ changeColorAndLandscape(state.curTemp);
+};
+
+const changeColorAndLandscape = (temp) => {
+ const tempValue = document.getElementById("tempValue");
+ const landscape = document.getElementById("landscape");
+ if (temp >= 80) {
+ tempValue.style.color = "Red";
+ landscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
+ } else if (temp >= 70) {
+ tempValue.style.color = "Orange";
+ landscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷";
+ } else if (temp >= 60) {
+ tempValue.style.color = "Yellow";
+ landscape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃";
+ } else if (temp >= 50) {
+ tempValue.style.color = "Green";
+ landscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+ } else {
+ tempValue.style.color = "Teal";
+ landscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+ }
+};
+
+const updateSky = () => {
+ const skySelect = document.getElementById("skySelect").value;
+ const sky = document.getElementById("sky")
+ if (skySelect === "Sunny") {
+ sky.textContent = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️";
+ } else if (skySelect === "cloudy") {
+ sky.textContent = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
+ } else if (skySelect === "rainy") {
+ sky.textContent = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧";
+ } else if (skySelect === "snowy") {
+ sky.textContent = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
+ } else {
+ sky.textContent = "----------------------------- ";
+ }
+};
+
+const findLatitudeAndLongitude = () => {
+ let latitude, longitude;
+ const cityName = document.getElementById("headerCityName").textContent;
+ axios.get('http://127.0.0.1:5000/location',
+ {
+ params: {
+ q: cityName,
+ }
+ })
+ .then((response) => {
+ latitude = response.data[0].lat;
+ longitude = response.data[0].lon;
+ findWeather(latitude, longitude);
+ changeColorAndLandscape(state.curTemp)
+ })
+ .catch((error) => {
+ console.log('error in findLatitudeAndLongitude!');
+ });
+}
+
+const findWeather = (latitude, longitude) => {
+ axios.get('http://127.0.0.1:5000/weather', {
+ params: { lat: latitude, lon: longitude },
+ })
+ .then((response) => {
+ const kelvinTemp = response.data.main.temp;
+ const fahrenheitTemp = Math.round(kelvinTemp * 9 / 5 - 459.67);
+ state.curTemp = fahrenheitTemp;
+ const temp = document.getElementById("tempValue");
+ const weather = document.getElementById("skySelect");
+ temp.textContent = state.curTemp;
+ })
+
+ .catch((error) => {
+ console.log('error in Weather!');
+ });
+}
+
+const resetCityName = () => {
+ const defaultCity = 'Seattle';
+ const cityName = document.getElementById("cityNameInput");
+ const headerCityName = document.getElementById("headerCityName")
+ cityName.value = defaultCity;
+ headerCityName.textContent = defaultCity;
+ findLatitudeAndLongitude(defaultCity);
+};
+
+const changeCityName = () => {
+ const cityName = document.getElementById("cityNameInput").value;
+ const headerCityName = document.getElementById("headerCityName");
+ headerCityName.textContent = cityName;
+ // findLatitudeAndLongitude(cityName);
+};
+
+const registerEventHandlers = () => {
+ const increaseButton = document.getElementById("increaseTempControl");
+ increaseButton.addEventListener("click", increaseTemp);
+
+ const decreaseButton = document.getElementById("decreaseTempControl");
+ decreaseButton.addEventListener("click", decreaseTemp);
+
+ const cityResetButton = document.getElementById("cityNameReset");
+ cityResetButton.addEventListener("click", resetCityName);
+
+ const cityNameInput = document.getElementById("cityNameInput");
+ cityNameInput.addEventListener("input", changeCityName);
+
+ const updateTempButton = document.getElementById('currentTempButton');
+ updateTempButton.addEventListener('click', findLatitudeAndLongitude);
+
+ const skySelect = document.getElementById("skySelect");
+ skySelect.addEventListener("change", updateSky);
+};
+
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
+document.addEventListener("DOMContentLoaded", resetCityName);
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..206949164 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,167 @@
+h2 {
+ margin: 0 auto 2rem auto;
+}
+
+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;
+margin: 2rem;
+}
+
+.header__header {
+color: white;
+grid-column: span 3;
+display: flex;
+align-items: center;
+margin: 2rem auto 3rem 0;
+}
+
+.header__header > h1 {
+margin-right: 2rem;
+font-size: 3em;
+}
+
+.header__city-name {
+font-style: oblique;
+font-size: 2rem;
+}
+
+.header__city-name::before,
+.header__city-name::after {
+content: "✨";
+}
+
+.temperature__section,
+.sky__section,
+.city-name__section {
+border-radius: 8px;
+padding: 2rem;
+background-color: white;
+}
+
+.temperature__section {
+grid-row: 2;
+}
+
+.temperature__section button {
+ background-color: #1b69f9;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px
+}
+
+.sky__section {
+grid-row: 3;
+}
+
+.city-name__section {
+grid-row: 4;
+}
+
+.garden__section {
+grid-row: 2 / span 3;
+grid-column: 2;
+text-align: center;
+align-self: center;
+}
+
+.temperature__content {
+display: flex;
+flex-direction: row;
+justify-content: space-around;
+/* justify-content: center; */
+}
+
+#tempValue {
+font-size: 3rem;
+margin-left: 1.5rem;
+/* padding-right: 1rem; */
+/* margin-right: 1.5rem; */
+}
+
+.temperature__controls {
+display: flex;
+flex-direction: column;
+align-items: center;
+}
+
+.garden__section > h2 {
+color: white;
+}
+
+.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;
+height: 200px;
+width: 500px;
+background-color: lightblue;
+}
+
+.city-name__reset-btn {
+border: 0;
+background-color: #1655cc;
+color: white;
+border-radius: 8px;
+padding: 1rem;
+font-family: "Rubik", sans-serif;
+}
+
+.red {
+color: red;
+}
+
+.orange {
+color: orange;
+}
+
+.yellow {
+color: gold;
+}
+
+.yellow-green {
+color: yellowgreen;
+}
+
+.green {
+color: green;
+}
+
+.teal {
+color: teal;
+}
+
+.cloudy {
+background-color: lightgrey;
+}
+
+.sunny {
+background-color: rgb(221, 255, 255);
+}
+
+.rainy {
+background-color: lightblue;
+}
+
+.snowy {
+background-color: lightsteelblue;
+}
\ No newline at end of file