Ada-C16 · alieibarra · Dec 29, 2021 · Dec 29, 2021 · Dec 29, 2021 · Dec 29, 2021
diff --git a/index.html b/index.html
@@ -5,8 +5,46 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Report</title>
+    <link href="./styles/index.css" rel="stylesheet"/> <!--link html to .css file-->
 </head>
 <body>
+    <h1 class="header"> ☀️🌧 ❄️ Weather Report ❄️ 🌧☀️ </h1>   
+    <form>
+        <label><b>Enter City</b></label>
+        <input type="text" id="cityName">
+    </form>
+    <input type="submit" onclick="cityChange();">
+    <input type = "button" value = "Reset" onClick = "resetCity()">
 
+
+    <h2> The sky is...</h2>
+    <section>   
+        <select id="skyChoice" onChange="changeSky()">
+            <option value="❗️ PENDING SKY DATA ❗️"> Select A Sky </option>
+            <option value="🌨 ❄️ 🌨 ❄️ 🌨 ❄️ 🌨 ❄️ 🌨 ❄️ 🌨 ❄️ 🌨 "> Snowy </option>
+            <option value="🌧 💦 🌧 💦 🌧 💦 🌧 💦 🌧 💦 🌧 💦 🌧"> Rainy </option>
+            <option value="☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ⛅️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️"> Cloudy </option>
+            <option value="✈️ ☁️ 🌈 ☁️ 🦅 ☁️ ☀️ ☁️ 🦅 ☁️ 🌈 ☁️ ✈️"> Sunny </option>
+            <option value="☄️ 🐉 ☄️ 🐉 ☄️ ☀️ ☀️ ☀️ ☄️ 🐉 ☄️ 🐉 ☄️"> Too Sunny </option>  
+        </select>
+    </section>
+
+
+    <h2> The Weather is...</h2> 
+    <section >  
+        <button class="warmer" id="addTempButton"> It's Getting Warmer</button>
+        <button class="colder" id="subTempButton"> It's Getting Cooler</button>
+    </section> 
+
+    <label>Your City: </label>
+    <p><span class="result padded" id='display'></span></p>    
+
+    <div class="result padded" id="skyContainer"> ❗️ PENDING SKY DATA ❗️ </div>
+
+    <div class="result padded" id="tempCount"> ❗️ PENDING WEATHER DATA ❗️ </div>
+    <div class="result padded" id="tempContainer"></div>
+
+
+    <script src="src/index.js"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,80 @@
+//----------City ELEMENT
+const cityChange = () => {
+  document.getElementById('display').innerHTML = "Today in ... " +
+  document.getElementById("cityName").value;
+}
+
+// function resetData(){  
+//   document.getElementById("cityName").reset(); 
+// }
+const resetCity = () => {
+  document.getElementById('display').innerHTML = "Please Input City";
+}
+
+//----------Sky ELEMENT
+const changeSky = () => {
+  const skyImage = document.getElementById("skyChoice").value;
+  document.getElementById("skyContainer").innerHTML = skyImage;
+}
+
+//----------TEMPERATURE ELEMENTS
+//Temp Adjustment Features
+const tempState = {
+  tempCount: 0
+};
+
+const newTemp = document.createElement("span");
+
+//function to change the color & image based on tempState.tempCount
+const changeColorByTemp = () => {
+  if (tempState.tempCount >= 32) {
+    tempCount.style.color = "brown";
+    newTemp.textContent = "🏜 🏜 🏜 🌵 🌵 🦂 🌵 🌵 🦂 🌵 🌵 🏜 🏜 🏜"
+  } else if (tempState.tempCount >= 24){
+    tempCount.style.color = "orange";
+    newTemp.textContent = "🌋 🌋 🌋 🏝 🏝  🛫 🏝 🏝 🛬  🏝 🏝 🌋 🌋 🌋"
+  } else if (tempState.tempCount >= 18){
+    tempCount.style.color = "forestgreen";
+    newTemp.textContent = "⛰ ⛰ ⛰ 🌳 🌳 🏡 🌳 🌳 🏡 🌳 🌳 ⛰ ⛰ ⛰"
+  } else if (tempState.tempCount >= 8){
+    tempCount.style.color = "maroon";
+    newTemp.textContent = "🏔 🏔 🏔 🌲 🌲 🏠 🌲 🌲 🏠 🌲 🌲 🏔 🏔 🏔 "
+  } else if (tempState.tempCount >= 0) {
+    tempCount.style.color = "dodgerblue";
+    newTemp.textContent = "🗻 🗻 🗻 ☃️ ☃️ 🏘  ☃️ ☃️ 🏘  ☃️ ☃️ 🗻 🗻 🗻"  
+  }else {
+    tempCount.style.color = "rebeccapurple";
+    newTemp.textContent = "🐻‍❄️ TOO 🐧 COLD 🥶 FOR 🐧 PEOPLE 🐻‍❄️"
+  };
+}
+
+const updateTempCount = () => {
+  const tempCountElement = document.querySelector("#tempCount");
+  tempCountElement.textContent = `The Temperature is: ${tempState.tempCount} \xB0C`
+};
+
+//Tempt goes up
+const addTempButton = document.querySelector("#addTempButton");
+
+const addTemp = () => {
+  const tempContainer = document.querySelector("#tempContainer");  
+  tempState.tempCount +=1;
+  changeColorByTemp();
+  tempContainer.appendChild(newTemp);
+  updateTempCount();
+};
+
+//Tempt goes down
+const subTempButton = document.querySelector("#subTempButton");
+
+const subTemp = () => {
+  const newTemp = document.createElement("span");
+  const tempContainer = document.querySelector("#tempContainer");
+  tempState.tempCount-=1;
+  changeColorByTemp();
+  updateTempCount();
+};
+//Temp Event Listeners
+addTempButton.addEventListener('click', addTemp)
+subTempButton.addEventListener('click', subTemp)
+
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,52 @@
+body {
+    background: seashell;
+    text-align: center;
+    }
+h1 {
+    display: flexbox; 
+    text-align: center;   
+}
+
+button {
+    font-size: 16px;
+    margin: 10px;
+    display: flex;
+    flex-direction: row;
+    background-color: black;
+    font-weight: 500;
+    justify-content: center;
+
+}
+
+input {
+    margin: 10px;
+}
+section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.warmer {
+    color: brown;
+    ;
+}
+.colder {
+    color: dodgerblue;;
+}
+
+.sky {
+    color: whitesmoke
+}
+
+.result{
+    font-size: 40px;
+}
+.padded {
+    padding: 30px;
+}