controlledTimer is a forward / reverse time management application. You can set the start and end times and you can access different functions in both cases. Values you can enter: day: hour: minute: second
Documentation
| Name |
Type |
Default |
Description |
| container |
string |
"#controlledtimer-container" |
This is a container field selector. The presence of the section where the study will be performed is controlled by this selector. |
| selector |
string |
"#controlledtimer-selector" |
The created template is inserted into this selector. |
| start |
string |
"00:58" |
Start time |
| end |
string |
"00:00" |
End time |
| direction |
string |
"down" |
How to count from start time to end time is determined by this feature. Only the "up" and "down" options can be written. |
| startCallback |
function |
function |
It is a function that runs once when the time starts. You can run a function in your application. |
| endCallback |
function |
function |
It is a function that runs once when the time expires. You can run a function in your application. |
Usage
Install with terminal
npm install controlledtimer
Import your Js file
import controlledTimer from './controlledTimer'
Init
const timerEl = new controlledTimer({
container: '#controlledtimer-container',
selector: '#controlledtimer-selector',
start: '00:58',
end: '00:00',
direction: 'down', /* up, down */
startCallback: () => {
console.log("start");
},
endCallback: () => {
console.log("end");
},
});
const killButton = document.querySelector("#controlledtimer-kill");
const restartButton = document.querySelector("#controlledtimer-restart");
const playPauseButton = document.querySelector("#controlledtimer-playpause");
killButton.addEventListener("click", () => {
timerEl.kill();
});
restartButton.addEventListener("click", () => {
timerEl.restart();
});
playPauseButton.addEventListener("click", () => {
timerEl.playPause();
});