Added

TunanshV · Jun 11, 2024 · 6e4a518 · 6e4a518
1 parent 452aad9
commit 6e4a518
Show file tree

Hide file tree

Showing 8 changed files with 4,022 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="main.css">
+    <title>Increment and Decrement Project</title>
+</head>
+<body>
+    <!-- wrapper -->
+     <div class="w-[100vw] h-[100vh] flex flex-col items-center justify-center bg-[#390000] gap-10">
+        <!-- heading -->
+        <div class="text-[#0398d4] font-medium text-[20px]">Increment And Decrement</div>
+        <!-- secondary wrapper -->
+
+        <div class="bg-white flex text-[25px] text-[#344151] rounded-sm gap-12 p-3 px-5">
+            <!-- negative button -->
+            <button onclick="decrement()" class="border-r-2 border-[#bfbfbf] pr-5">
+                <i class="fa-solid fa-minus"></i>
+            </button>
+            <div id="counter" class="font-bold">
+                0
+            </div>
+            <!-- positive button -->
+            <button onclick="increment()" class="border-l-2 border-[#bfbfbf] pl-5">
+                <i class="fa-solid fa-plus"></i>
+            </button>
+        </div>
+     </div>
+
+     <script src="https://kit.fontawesome.com/58a810656e.js"> crossorigin="anonymous"</script>
+     <script src="index.js"></script>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,19 @@
+let countValue= document.querySelector('#counter');
+
+let increment=()=>{
+    // get the value from UI
+    let value= parseInt(countValue.innerText);
+    // Update the value
+    value=value+1;
+    // set the value onto UI
+    countValue.innerText= value;
+};
+
+let decrement=()=>{
+    // get the value from UI
+    let value= parseInt(countValue.innerText);
+    // Update the value
+    value=value-1;
+    // set the value onto UI
+    countValue.innerText= value;
+};
diff --git a/main.css b/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;