Vanilla JavaScrip stop watch.
A Pen by Cathy Dutton on CodePen.
Created
July 25, 2018 13:13
-
-
Save tupham81/7494dbbeb9787fb7d54e36c4f2e604ca to your computer and use it in GitHub Desktop.
JavaScript Stopwatch
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
| <div class="wrapper"> | |
| <h1>Stopwatch</h1> | |
| <h2>Vanilla JavaScript Stopwatch</h2> | |
| <p><span id="seconds">00</span>:<span id="tens">00</span></p> | |
| <button id="button-start">Start</button> | |
| <button id="button-stop">Stop</button> | |
| <button id="button-reset">Reset</button> | |
| </div> | |
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
| window.onload = function () { | |
| var seconds = 00; | |
| var tens = 00; | |
| var appendTens = document.getElementById("tens") | |
| var appendSeconds = document.getElementById("seconds") | |
| var buttonStart = document.getElementById('button-start'); | |
| var buttonStop = document.getElementById('button-stop'); | |
| var buttonReset = document.getElementById('button-reset'); | |
| var Interval ; | |
| buttonStart.onclick = function() { | |
| clearInterval(Interval); | |
| Interval = setInterval(startTimer, 10); | |
| } | |
| buttonStop.onclick = function() { | |
| clearInterval(Interval); | |
| } | |
| buttonReset.onclick = function() { | |
| clearInterval(Interval); | |
| tens = "00"; | |
| seconds = "00"; | |
| appendTens.innerHTML = tens; | |
| appendSeconds.innerHTML = seconds; | |
| } | |
| function startTimer () { | |
| tens++; | |
| if(tens < 9){ | |
| appendTens.innerHTML = "0" + tens; | |
| } | |
| if (tens > 9){ | |
| appendTens.innerHTML = tens; | |
| } | |
| if (tens > 99) { | |
| console.log("seconds"); | |
| seconds++; | |
| appendSeconds.innerHTML = "0" + seconds; | |
| tens = 0; | |
| appendTens.innerHTML = "0" + 0; | |
| } | |
| if (seconds > 9){ | |
| appendSeconds.innerHTML = seconds; | |
| } | |
| } | |
| } |
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
| /* Variabes */ | |
| $orange: #ffa600; | |
| $grey:#f3f3f3; | |
| $white: #fff; | |
| $base-color:$orange ; | |
| /* Mixin's */ | |
| @mixin transition { | |
| -webkit-transition: all 0.5s ease-in-out; | |
| -moz-transition: all 0.5s ease-in-out; | |
| transition: all 0.5s ease-in-out; | |
| } | |
| @mixin corners ($radius) { | |
| -moz-border-radius: $radius; | |
| -webkit-border-radius: $radius; | |
| border-radius: $radius; | |
| -khtml-border-radius: $radius; | |
| } | |
| body { | |
| background:$base-color; | |
| font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
| height:100%; | |
| } | |
| .wrapper { | |
| width: 800px; | |
| margin: 30px auto; | |
| color:$white; | |
| text-align:center; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 100; | |
| font-size: 2.6em; | |
| text-transform: uppercase; | |
| } | |
| #seconds, #tens{ | |
| font-size:2em; | |
| } | |
| button{ | |
| @include corners (5px); | |
| background:$base-color; | |
| color:$white; | |
| border: solid 1px $white; | |
| text-decoration:none; | |
| cursor:pointer; | |
| font-size:1.2em; | |
| padding:18px 10px; | |
| width:180px; | |
| margin: 10px; | |
| outline: none; | |
| &:hover{ | |
| @include transition; | |
| background:$white; | |
| border: solid 1px $white; | |
| color:$base-color; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment