+ For the city of Lavander
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index e69de29bb..0e97efb91 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -0,0 +1,112 @@
+let currentTemp = 65;
+
+const updateTemperature = currentTemp => {
+ const tempContainer = document.getElementById("temp-integer");
+ tempContainer.textContent = currentTemp;
+ changeTempColor(currentTemp);
+ changeLandscape(currentTemp);
+};
+
+
+const increaseTemperature = () => {
+ currentTemp += 1;
+ updateTemperature(currentTemp);
+};
+
+const decreaseTemperature = () => {
+ currentTemp -= 1;
+ updateTemperature(currentTemp);
+};
+
+const changeTempColor = currentTemp => {
+ const tempContainer = document.getElementById("temp-content");
+ 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 changeLandscape = currentTemp => {
+ const landscapeContainer = document.getElementById("landscape");
+ let landscape = "";
+ if (currentTemp >= 80) {
+ landscape = "🌵🐍🦂🌵🌵🌵🐍🌵🏜🦂"
+ } else if (currentTemp >= 70) {
+ landscape = "🌸🌿🌼🌷🌻🌿☘️🌱🌻🌷"
+ } else if (currentTemp >= 60) {
+ landscape = "🌾🌾🍃🍃🪨🪨🪨🪨🍃"
+ } else if (currentTemp >= 50){
+ landscape = "🌲🌲⛄️🌲🍂🌲🌲🌲🍂🌲"
+ } else if (currentTemp < 50){
+ landscape = "⛄️❄️❄️⛄️❄️❄️⛄️⛄️❄️❄️"
+ }
+ landscapeContainer.textContent = landscape;
+};
+
+
+const updateSky = () => {
+ const skyDropdown = document.getElementById("sky-dropdown").value;
+ const skyForecast = document.getElementById("sky");
+ let sky = "";
+ if (skyDropdown === "Sunny") {
+ sky = "☀️☀️☀️☀️☀️☀️☀️☀️☀️"
+ } else if (skyDropdown === "Cloudy") {
+ sky = "🌤🌤🌤🌤🌤🌤🌤🌤🌤"
+ } else if (skyDropdown === "Rainy") {
+ sky = "🌧🌧🌧🌧🌧🌧🌧🌧🌧"
+ } else if (skyDropdown === "Snowy") {
+ sky = "❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️"
+ }
+ skyForecast.textContent = sky;
+};
+
+
+const updateCityName = () => {
+ const inputCityName = document.getElementById("city").value;
+ const cityNameHeader = document.getElementById("city-name");
+ cityNameHeader.textContent = inputCityName;
+};
+
+
+const resetCityName = () => {
+ const cityNameInput = document.getElementById("city");
+ cityNameInput.value = "Lavender";
+ updateCityName();
+};
+
+
+
+const registerEventHandlers = () => {
+ increaseTemperature();
+ const tempIncreaseBtn = document.getElementById("increase-temp");
+ tempIncreaseBtn.addEventListener("click", increaseTemperature);
+
+ decreaseTemperature();
+ const tempDecreaseBtn = document.getElementById("decrease-temp");
+ tempDecreaseBtn.addEventListener("click", decreaseTemperature);
+
+ updateSky();
+ const skyDropdown = document.getElementById("sky-dropdown");
+ skyDropdown.addEventListener("change", updateSky);
+
+
+ updateCityName();
+ const inputCityName = document.getElementById("city");
+ inputCityName.addEventListener("input", updateCityName);
+
+ resetCityName();
+ const cityNameResetBtn = document.getElementById("reset-button");
+ cityNameResetBtn.addEventListener("click", resetCityName);
+
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..a32f62836 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,120 @@
+ @import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
+
+
+body h2 {
+ text-align: center;
+}
+
+body {
+ background-color: #0f0513;
+ color: #6e20d5;
+ font-family: 'Tangerine', serif;
+ font-size: 30px;
+}
+
+button {
+ background-color: #5e23d4;
+ color: #441693;
+ border: none;
+ font-size: 20px;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ background-color: #6d6bf4;
+ width: 100%;
+ padding: 30px;
+ font-size: 30px;
+ margin-top: -40px;
+}
+
+header img {
+ max-height: 150px;
+ max-width: 150px;
+}
+
+p {
+ padding-right: 30px;
+ cursor: pointer;
+}
+
+select {
+ margin-top: 20px;
+ font-size: 20px;
+}
+
+/*class selectors*/
+
+.red {
+ color: rgb(235, 23, 23);
+}
+
+.teal {
+ color: rgb(17, 225, 225);
+}
+
+.orange {
+ color: rgb(133, 42, 10);
+}
+
+.green {
+ color: rgb(22, 233, 22);
+}
+
+.yellow {
+ color: rgb(219, 189, 14);
+}
+
+/* id selectors */
+
+ #sky p, #landscape p {
+ padding: 10px;
+ margin: 10px;
+ cursor: default;
+}
+
+ #grid-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: auto;
+ grid-gap: 20px;
+ margin: 20px;
+}
+
+#sky-section, #city-section, #weather-section {
+ text-align: center;
+ background-color: #6d6bf4;
+ border-radius: 10px;
+}
+#temperature-section {
+ text-align: center;
+ background-color: #6d6bf4;
+ border-radius: 20px;
+}
+
+#temp-content {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+#temp-integer {
+ font-size: 50px;
+}
+
+#up-down-arrows {
+ font-size: 15px;
+}
+
+#weather-dropdown, #city {
+ border: none;
+ font-size: 20px;
+ margin-top: 20px;
+}
+
Temperature
+
+
+
+
+ ⬆️
+⬇️
+
+
+
+ Sky
+
+
+
+ City
+
+
+
+
+ Weather Garden
+
+
+
+
+