-
Notifications
You must be signed in to change notification settings - Fork 0
Examples
Patafix edited this page Jul 20, 2023
·
3 revisions
All examples are written for NodeJS. You can use them in a browser by following the installation steps listed in Installation Wiki section. ( don't forget to remove the NodeJS import statment - the first line )
This is a basic example of the dev-timer library that prints a message when the timer ends (after 15 seconds).
// Remove this line and refer to installation wiki page to use it in a browser
const { Timer } = require('dev-timer');
// Create a new timer instance with a 15 seconds duration
const timer = new Timer(15000);
timer.start(); // Start the timer
// Add a callback to be called when the timer ends
timer.onEnd = ()=>{
console.log('Timer ended');
}A simple example of the use of the dev-timer library that prints the time left to the timer every second.
const { Timer } = require('dev-timer');
// Create a new timer instance with a 15 seconds duration
const timer = new Timer(30000);
timer.start(); // Start the timer
// Execute the function every second (1000ms)
timer.addEventListener(1000, ()=>{
console.log(`Time left: ${timer.formatTime(timer.timeLeft, 'ss.mss')}`);
});A simple example of an integration of Dev Timer in a real situation. It's a functional timer that you can test here with CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="index.js"></script>
</head>
<body>
<div class="timerContainer">
<div class="timer">
<div id="seconds" class="timerSeconds">20:000</div>
</div>
<div class="timer__buttons">
<button id="start" class="timerStart">Start</button>
<button id="stop" class="timerStop">Stop</button>
<button id="reset" class="timerReset">Reset</button>
</div>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
body {
background: #1f1f1f;
margin: 0;padding: 0;
font-family: 'Source Code Pro', monospace;
}
.timerSeconds {
font-size: 2em;
margin: 1em;
color: #F5F5F5;
text-align: center;
}
.timer__buttons {
text-align: center;
}
.timer__buttons button {
font-size: 1em;
border: 1px solid #F5F5F5;
border-radius: 1em;
padding: 0.5em 1em 0.5em 1em;
background: transparent;
color: #F5F5F5;
}
.timer__buttons button:hover {
background: #F5F5F5;
color: #1F1F1F;
}import { Timer } from "../../../ES/Timer.js";
const duration = 20000;
const timer = new Timer(duration);
window.onload = () => {
// Get the display elements for the timer
let seconds = document.getElementById("seconds");
// Get the start, stop and reset buttons
let [start, stop, reset] = [document.getElementById("start"), document.getElementById("stop"), document.getElementById("reset")];
// Make the timer display his time left when calling this function
function updateTimer() {
// Update the display elements
let secondsLeft = timer.formatTime(timer.timeLeft, 'ss:ms');
seconds.innerText = secondsLeft;
}
timer.addEventListener(50, updateTimer);
start.addEventListener("click", () => {
timer.start();
updateTimer();
});
stop.addEventListener("click", () => {
timer.stop();
updateTimer();
});
reset.addEventListener("click", () => {
timer.setRunningTime(0);
updateTimer();
});
timer.start();
};