Created
May 10, 2017 19:42
-
-
Save stormsweeper/b2e400f0aae257ab4c4d9c63d83cb1fb to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=b2e400f0aae257ab4c4d9c63d83cb1fb
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>setTimeout and setInterval</title> | |
| </head> | |
| <body> | |
| <div class="timeout-block"> | |
| <div class="counter" id="timeout-counter">0</div> | |
| <button id="timeout-button">once</button> | |
| <p>This button increases the counter by 1 after a second each time you click it.</p> | |
| </div> | |
| <div class="interval-block"> | |
| <div class="counter" id="interval-counter">0</div> | |
| <button id="interval-button-start">start</button> | |
| <button id="interval-button-stop" disabled>stop</button> | |
| <p>The start button starts increasing the counter by 1 every second after you click it. You should add code to make the timer stop when you click the stop button</p> | |
| </div> | |
| </body> | |
| </html> |
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
| {"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css"]} |
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
| // this makes a button not clickable | |
| function disableButton(button) { | |
| $(button).attr('disabled', true); | |
| } | |
| // this makes a button clickable again | |
| function enableButton(button) { | |
| $(button).attr('disabled', null); | |
| } | |
| var timeoutCounter = 0; | |
| $("#timeout-button").click( | |
| function() { | |
| disableButton("#timeout-button"); | |
| setTimeout( | |
| function() { | |
| timeoutCounter = timeoutCounter + 1; | |
| $("#timeout-counter").text(timeoutCounter); | |
| enableButton("#timeout-button"); | |
| }, | |
| 1000 // 1 second | |
| ); | |
| } | |
| ); | |
| var intervalCounter = 0; | |
| var intervalId = null; | |
| $("#interval-button-start").click( | |
| function() { | |
| disableButton("#interval-button-start"); | |
| enableButton("#interval-button-stop"); | |
| intervalId = setInterval( | |
| function() { | |
| intervalCounter = intervalCounter + 1; | |
| $("#interval-counter").text(intervalCounter); | |
| }, | |
| 1000 // 1 second | |
| ); | |
| } | |
| ); | |
| $("#interval-button-stop").click( | |
| function() { | |
| disableButton("#interval-button-stop"); | |
| enableButton("#interval-button-start"); | |
| // PUT YOUR CODE HERE | |
| } | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment