Created
August 30, 2020 05:31
-
-
Save salarcode/e5bbb822706658afdacb1294debd8fbd to your computer and use it in GitHub Desktop.
Click Counter. Has increase/decrease buttons as well as reset. Has history and vibrates phone.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Click Counter</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| body { | |
| font-family: "Segoe UI"; | |
| } | |
| span { | |
| background-color: grey; | |
| border-radius: 15px; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 30px 35px; | |
| font-size: 16px; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 2em; | |
| } | |
| a { | |
| color: #4CAF50; | |
| text-decoration: none; | |
| } | |
| #decrease { | |
| float: right; | |
| } | |
| button:hover { | |
| background-color: #3e8e41; | |
| } | |
| </style> | |
| <script> | |
| var i = 0 | |
| function vibrateShort() { | |
| if (window.navigator["vibrate"]) | |
| window.navigator.vibrate(50); | |
| } | |
| function vibrateLong() { | |
| if (window.navigator["vibrate"]) | |
| window.navigator.vibrate(200); | |
| } | |
| function Count() { | |
| var text = "Counter : " + (i++ + 1); | |
| document.getElementById("divHeader").innerHTML = text; | |
| vibrateShort(); | |
| } | |
| function Decrease() { | |
| var text = "Counter : " + (i-- - + 1); | |
| document.getElementById("divHeader").innerHTML = text; | |
| vibrateLong() | |
| } | |
| function Reset() { | |
| InsertElement("lstHistory", "li", "", "Count : " + i); | |
| document.getElementById("divHistory").style.display = ''; | |
| i = -1; | |
| Count(); | |
| vibrateLong(); | |
| } | |
| function ClearHistory() { | |
| document.getElementById("lstHistory").innerHTML = ''; | |
| document.getElementById("divHistory").style.display = 'none'; | |
| vibrateLong(); | |
| } | |
| function InsertElement(parentId, elementTag, elementId, html) { | |
| // Adds an element to the document | |
| var p = document.getElementById(parentId); | |
| var newElement = document.createElement(elementTag); | |
| newElement.setAttribute('id', elementId); | |
| newElement.innerHTML = html; | |
| p.prepend(newElement); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div align="center"> | |
| <h1 id=divHeader>Click Counter</h1> | |
| <button id=btn onclick="Count()">Click Me!</button> | |
| </div> | |
| <hr> | |
| <a href="#" onclick="Reset();return false;">Reset!</a> | |
| <a href="#" onclick="Decrease();return false;" id="decrease">(-1)</a> | |
| <hr> | |
| <div id="divHistory" style="display:none"> | |
| <ul id="lstHistory"></ul> | |
| <a href="#" onclick="ClearHistory();return false;">Clear History</a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment