├── index.html ├── style.css ├── script.js └── README.md /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Stopwatch 7 | 8 | 9 | 10 | 11 | 12 |
00:00:00:00
13 |
14 | Hours 15 | Minutes 16 | Seconds 17 | Centiseconds 18 |
19 | 20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | #timer { 3 | width: 460px; 4 | font-size: 70px; 5 | background-color: black; 6 | color: limegreen; 7 | padding: 25px; 8 | border-radius: 10px; 9 | } 10 | #labels { 11 | margin-top: -25px; 12 | z-index: 2; 13 | color: limegreen; 14 | font-size: 12px; 15 | } 16 | #hh {margin-left: 45px;} 17 | #mm {margin-left: 80px;} 18 | #ss {margin-left: 70px;} 19 | #ms {margin-left: 45px;} 20 | 21 | #controls { 22 | margin-left:150px; 23 | margin-top: 30px; 24 | } 25 | 26 | button { 27 | width: 100px; 28 | height: 40px; 29 | float: left; 30 | margin-left: 50px; 31 | font-size: 25px; 32 | font-weight: bold; 33 | border-radius: 10px; 34 | box-shadow: 5px 5px 5px #888888; 35 | } 36 | #go { background-color: limegreen; } 37 | 38 | #stop { background-color: red; display: none; } 39 | 40 | #clear { background-color: yellow; display: none;} 41 | 42 | body, button { 43 | font-family: 'Courier'; 44 | } 45 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date 2 | 3 | // global object 4 | T = {} ; 5 | T.timerDiv = document.getElementById('timer'); 6 | 7 | function displayTimer() { 8 | // initilized all local variables: 9 | var hours='00', minutes='00', 10 | miliseconds=0, seconds='00', 11 | time = '', 12 | timeNow = new Date().getTime(); // timestamp (miliseconds) 13 | 14 | T.difference = timeNow - T.timerStarted; 15 | 16 | // milliseconds 17 | if(T.difference > 10) { 18 | miliseconds = Math.floor((T.difference % 1000) / 10); 19 | if(miliseconds < 10) { 20 | miliseconds = '0'+String(miliseconds); 21 | } 22 | } 23 | // seconds 24 | if(T.difference > 1000) { 25 | seconds = Math.floor(T.difference / 1000); 26 | if (seconds > 60) { 27 | seconds = seconds % 60; 28 | } 29 | if(seconds < 10) { 30 | seconds = '0'+String(seconds); 31 | } 32 | } 33 | 34 | // minutes 35 | if(T.difference > 60000) { 36 | minutes = Math.floor(T.difference/60000); 37 | if (minutes > 60) { 38 | minutes = minutes % 60; 39 | } 40 | if(minutes < 10) { 41 | minutes = '0'+String(minutes); 42 | } 43 | } 44 | 45 | // hours 46 | if(T.difference > 3600000) { 47 | hours = Math.floor(T.difference/3600000); 48 | // if (hours > 24) { 49 | // hours = hours % 24; 50 | // } 51 | if(hours < 10) { 52 | hours = '0'+String(hours); 53 | } 54 | } 55 | 56 | time = hours + ':' 57 | time += minutes + ':' 58 | time += seconds + ':' 59 | time += miliseconds; 60 | 61 | T.timerDiv.innerHTML = time; 62 | } 63 | 64 | function startTimer() { 65 | // save start time 66 | T.timerStarted = new Date().getTime() 67 | console.log('T.timerStarted: '+T.timerStarted) 68 | 69 | if (T.difference > 0) { 70 | T.timerStarted = T.timerStarted - T.difference 71 | } 72 | // update timer periodically 73 | T.timerInterval = setInterval(function() { 74 | displayTimer() 75 | }, 10); 76 | 77 | // show / hide the relevant buttons: 78 | document.getElementById('go').style.display="none"; 79 | document.getElementById('stop').style.display="inline"; 80 | document.getElementById('clear').style.display="none"; 81 | } 82 | 83 | function stopTimer() { 84 | clearInterval(T.timerInterval); // stop updating the timer 85 | 86 | document.getElementById('stop').style.display="none"; 87 | document.getElementById('go').style.display="inline"; 88 | document.getElementById('clear').style.display="inline"; 89 | } 90 | 91 | function clearTimer() { 92 | clearInterval(T.timerInterval); 93 | T.timerDiv.innerHTML = "00:00:00:00"; // reset timer to all zeros 94 | T.difference = 0; 95 | 96 | document.getElementById('stop').style.display="none"; 97 | document.getElementById('go').style.display="inline"; 98 | document.getElementById('clear').style.display="none"; 99 | } 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # stopwatch 4 | 5 | An ultra-simple `HTML` + `JavaScript` stopwatch. 6 | 7 | 8 | 9 | ## Try it: https://dwyl.github.io/stopwatch/ 10 | 11 | [![stopwatch-all-zeros](https://user-images.githubusercontent.com/194400/137154873-ed4db4ff-a906-48e4-9b0f-49b6210aa6c1.png)](https://dwyl.github.io/stopwatch/) 12 | 13 |
14 | 15 | ## Why? 16 | 17 | Helping people learn how to code requires a *simple* but *functional* example. 18 | 19 | **_Everyone_** has experience using a stopwatch. 20 | Whether to time an experiment in school (science class), 21 | cooking in the home or holding ones' breath under water, 22 | we can all *immediately* see the *use* of a stopwatch. 23 | 24 | Yes, I *hear* you, "most mobile phones have stopwatches, 25 | why would anyone want to *build* their own?" 26 | I agree, why "***re-invent the wheel***" if you already have a perfectly good one? 27 | 28 | Well, as you are about to discover we are not *re-inventing* anything (*yet*!) simply 29 | *discovering* a few computer/web programming basics by building something we already know. 30 | 31 | Once you have the basics mastered, you can unleash your imagination! :-) 32 | 33 | 34 |
35 | 36 | ## How? 37 | 38 | Open the **index.html** in your web browser and try the **_simple_ stopwatch**. 39 | Then read the code in the files to understand how it all works! 40 | 41 | 42 | ### Interface 43 | 44 | 45 | ![Stopwach Ready to Go](https://user-images.githubusercontent.com/194400/137154873-ed4db4ff-a906-48e4-9b0f-49b6210aa6c1.png "Simple Stopwatch Ready to Go!") 46 | 47 | I tried to simplify the UI as much as possible so there is a single button/control for the stopwatch: **Go** 48 | (If you chose to edit the file you can change this to *Start* or what ever you prefer) 49 | 50 |
51 | 52 | ![Stopwach Running](https://user-images.githubusercontent.com/194400/137156018-6eca686b-dd55-4248-9238-6be6efba25c7.png "Simple Stopwatch Running") 53 | 54 | While the stopwatch is running we only have one action: **Stop** 55 | (We can/will add the *Lap* function in a later tutorial bur for now *KISS*!) 56 | 57 |
58 | 59 | ![Stopwach stopped](https://user-images.githubusercontent.com/194400/137155814-26648d0d-ffeb-4b03-bfed-3af78d4b4ffa.png "Simple Stopwatch Stopped") 60 | 61 | When the "Stop" button is pressed/clicked it stops the timer. 62 | We then have two options: we can either **Go** again to keep counting *or* **Clear**. 63 | Clicking/Pressing the **Clear** button simply clears/resets the current count. 64 | 65 |
66 | 67 | ## Questions? 68 | 69 | If you get stuck while reading the code or have any questions, 70 | please open an 71 | [issue](https://github.com/dwyl/stopwatch/issues) 72 | 73 |
74 | 75 | ***Note*** on "*re-inventing the wheel*" - if *anyone* ever asks you why 76 | you are re-inventing the wheel, show them these links: 77 | 78 | 1. https://loopwheels.com 79 | 2. http://www.kickstarter.com/projects/1537100752/shark-wheel-the-square-skateboarding-wheel-that-sh 80 | 3. https://www.nasa.gov/specials/wheels/ 81 | How NASA Reinvented The Wheel - Shape Memory Alloys: https://youtu.be/2lv6Vs12jLc 82 | --------------------------------------------------------------------------------