Add incremental buttons with up/down functionality and styles

team1306 · Jan 25, 2025 · d2c7a47 · d2c7a47
1 parent 8ef58d0
commit d2c7a47
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/scout/index.html b/scout/index.html
@@ -23,6 +23,20 @@ <h3 class="logo">Badger Bets</h3>
     <!-- Main Section -->
     <section class="main-section">
         <div class="content">
+
+            <!-- <form> 
+                button
+                <input type="number" id="algae-input">
+            </form> -->
+            <div class="up-down-container">
+                <div class="up-down-buttons">
+                    <div class="up incremental-button"></div>
+                    <div class="up text ">+1</div>
+                    <div class="up-down-number">0</div>
+                    <div class="down incremental-button"></div>
+                    <div class="down text">-1</div>
+                </div>
+        </div>
     </section>
 
     <!-- Footer Section -->

diff --git a/scout/script.js b/scout/script.js
@@ -0,0 +1,12 @@
+window.onbeforeunload = function() {
+    return "NOOOOOOOO DONT GO!!!!";
+}
+let upDown = 0;
+$(".up.incremental-button").on("click", () => {
+    upDown++;
+    $(".up-down-number").text(upDown);
+});
+$(".down.incremental-button").on("click", () => {
+    upDown--;
+    $(".up-down-number").text(upDown);
+});
diff --git a/styles.css b/styles.css
@@ -147,6 +147,38 @@ input:focus {
     color: #B22222;
 }
 
+/* incremental button css */
+.incremental-button{
+    &.up {
+        border-bottom: 20px solid crimson;
+        border-left: 20px solid transparent;
+        border-right: 20px solid transparent;
+        &:hover {
+            border-bottom-color: rgb(255, 94, 94);
+        }
+    }
+
+    &.down {
+        border-top: 20px solid purple;
+        border-left: 20px solid transparent;
+        border-right: 20px solid transparent;
+        &:hover {
+            border-top-color: rgb(255, 94, 94);
+        }
+    }
+}
+up-down-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.up-down-number{
+    border: 1px solid red;
+    width: 40px;
+    text-align: center;
+    font-size: 15px;
+    height: 30px;
+}
 footer {
     background-color: #B22222;
     color: white;