Ada-C15 · ktiktok96 · Jun 18, 2021 · Jun 21, 2021 · Jun 21, 2021 · Jun 21, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Weather App</title>
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+
+        <link rel="stylesheet" href="./styles/index.css">
+    </head>
+
+    <body>
+
+        <div class="card">
+            <div class="weather" id="weather_id">
+                <form action="/action_page.php">
+                    <div class="citytextbox" id="citytext_id">
+                            <label for="city"> Enter your city Here:</label>
+                            <input type="text" id="citytext_id" name="city">
+                        </div>
+                    <input type="reset" value="Reset">
+                </form>
+                <h2><label for="sky-select">Choose a sky:</label></h2>
+                    <select name="sky" id="sky-select">
+                    <option value="">--Please choose an option--</option>
+                    <option value="Sunny" id=sunny_id>Sunny</option>
+                    <option value="Cloudy" id=cloudy_id>Cloudy</option>
+                    <option value="Rainy" id=rainy_id>Rainy</option>
+                    <option value="Snowy"id=snowy_id >Snowy </option>
+                </select>
+
+                <p id="sky-landscape"></p>
+
+                <h2 class="city" id="city_id">Temp in my City</h2>
+                <button id="add">
+                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10"></circle> <polyline points="16 12 12 8 8 12"></polyline> <line x1="12" y1="16" x2="12" y2="8"></line> </svg>
+                </button>
+                <input type="number" id=temp_id value="0">
+                <button id="subtract">
+                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12,1.993C6.486,1.994,2,6.48,2,11.994c0,5.513,4.486,9.999,10,10c5.514,0,10-4.486,10-10S17.515,1.994,12,1.993z M12,19.994c-4.411-0.001-8-3.59-8-8c0-4.411,3.589-8,8-8.001c4.411,0.001,8,3.59,8,8.001S16.411,19.994,12,19.994z"></path><path d="M13 8L11 8 11 12 7.991 12 11.996 16.005 16 12 13 12z"></path></svg>
+                </button>
+            </div>
+
+            <p id="landscape"></p>
+
+        </div> 
+        <script src="./scripts/index.js"> </script>
+    </body>
+
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,73 @@
+// Variables that are representing Elements
+let btnAdd = document.getElementById('add');
+let btnSubtract = document.getElementById('subtract');
+let tempInput = document.getElementById('temp_id');
+let landscape = document.getElementById('landscape');
+let skiesInput = document.getElementById('sky-select');
+let skiesLandscape = document.getElementById('sky-landscape');
+
+
+
+
+
+function countUp(element) {
+    element.value = parseInt(element.value) + 1;
+}
+
+function countDown(element) {
+    element.value = parseInt(element.value) - 1;
+}
+
+function determineColor() {
+    if (tempInput.value >= 80) {
+        tempInput.style.color = 'red';
+    } else if (tempInput.value >= 70 && tempInput.value <= 79) {
+        tempInput.style.color = 'orange';
+    } else if (tempInput.value >= 60 && tempInput.value <= 69) {
+        tempInput.style.color = 'yellow';
+    } else if (tempInput.value >= 50 && tempInput.value <= 59) {
+        tempInput.style.color = 'green';
+    } else if (tempInput.value <= 49) {
+        tempInput.style.color = 'teal';
+    }
+}
+
+function determineLandscape() {
+    if (tempInput.value >= 80) {
+        landscape.innerHTML = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+    } else if (tempInput.value >= 70 && tempInput.value <= 79) {
+        landscape.innerHTML = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+    } else if (tempInput.value >= 60 && tempInput.value <= 69) {
+        landscape.innerHTML = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+    } else if (tempInput.value <= 59) {
+        landscape.innerHTML = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+    }
+}
+
+function determineSky() {
+    if (skiesInput.value === 'Sunny') {
+        skiesLandscape.innerHTML = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
+    } else if (skiesInput.value === 'Cloudy') {
+        skiesLandscape.innerHTML = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
+    } else if (skiesInput.value === 'Rainy') {
+        skiesLandscape.innerHTML = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧";
+    } else if (skiesInput.value === 'Snowy') {
+        skiesLandscape.innerHTML = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
+    }
+}
+
+btnAdd.addEventListener('click', () => {
+    countUp(tempInput);
+    determineColor();
+    determineLandscape();
+});
+
+btnSubtract.addEventListener('click', () =>{
+    countDown(tempInput);
+    determineColor();
+    determineLandscape();
+});
+
+skiesInput.addEventListener('change', () =>{
+    determineSky();
+});
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,79 @@
+body {
+    display: flex;
+    justify-content:  center;
+    align-items: center;
+    height: 100vh;
+    margin:  0;
+    font-family: 'Open Sans', sans-serif;
+    background:  #222;
+    background-image: url('https://source.unsplash.com/1600x900/?landscape,water');
+    font-size: 120%;
+}
+
+.card {
+    background: #000000d0;
+    color: white;
+    padding: 2em;
+    border-radius: 30px;
+    width:  100%;
+    max-width: 420px;
+    margin: 1em;
+}
+
+.search{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+button {
+    margin: 0.5em;
+    border-radius:  50%;
+    border:  none;
+    height: 44px;
+    width: 44px;
+    outline:  none;
+    background: #7c7c7c2b;
+    color: white;
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+}
+
+input.search-bar {
+    border:  none;
+    outline:  none;
+    padding: 0.4em 1em;
+    border-radius: 24px;
+    background: #7c7c7c2b;
+    color: white;
+    font-family: inherit;
+    font-size: 105%;
+    width: calc(100% - 100px);
+}
+
+button:hover {
+    background: #7c7c7c6b;
+}
+
+h1.temp {
+    margin: 0;
+}
+
+input, button {
+    display: inline-block;
+
+}
+
+/* From https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}