Home Explore Help
Register Sign In
krithicktony
/
Counter
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

counter

krithicktony 6 days ago
parent
958ff685f3
commit
05dfc262dc
3 changed files with 58 additions and 0 deletions
Unified View Show Diff Stats
  1. 19 0
      index.html
  2. 18 0
      js/main.js
  3. 21 0
      style.css

+ 19 - 0
index.html
View File 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+<label id="label">0</label>
 
+<div id="btn">
 
+  <button id="inc" class="buttons">Increase</button>
 
+  <button id="res" class="buttons">Reset</button>
 
+  <button id="dec" class="buttons">Decrease</button>
 
+</div>
 
+
 
+  <script src="js/main.js"></script>
 
+</body>
 
+</html>

+ 18 - 0
js/main.js
View File 

@@ -0,0 +1,18 @@
 
+const decreasebtn = document.getElementById("dec");
 
+const resetbtn = document.getElementById("res")
 
+const increasebtn = document.getElementById("inc")
 
+const label = document.getElementById("label")
 
+let count=0;
 
+
 
+increasebtn.onclick = function (){
 
+    count++;
 
+    label.textContent=count;
 
+}
 
+decreasebtn.onclick = function (){
 
+    count--;
 
+    label.textContent=count;
 
+}
 
+resetbtn.onclick = function (){
 
+    count=0;
 
+    label.textContent=count;
 
+}

+ 21 - 0
style.css
View File 

@@ -0,0 +1,21 @@
 
+#label{
 
+    display: block;
 
+    font-size: 10em;
 
+    font-family: arial;
 
+    text-align: center;
 
+}
 
+#btn{
 
+    text-align: center; 
+}
 
+.buttons{
 
+    background-color: rgb(126, 126, 204);
 
+    color: white;
 
+    padding: 10px 20px;
 
+    font-size: 15px;
 
+    border-radius: 5px;
 
+    cursor: pointer;
 
+    transition: background-color .7s;
 
+}
 
+.buttons:hover{
 
+    background-color: rgb(115, 230, 230);
 
+}