A general object for ticking a set of values up or down.
Each tick is done on a unit (e.g. hour / minute / second) and compared against all the fractions of the unit e.g. seconds are fractions of a minute.
You call the initial function repeatedly and when it ticks past a limit it ticks the next. Kinda like how seconds, minutes and hours work.
- Tick anything (time / health points / pomodoros / slides)
- Tick up or down
- Tick down and cause the next element to tick up (pomodoros)
- Set callbacks for each individual tick.
It's still very much a work in progress, but it is currently powering my pomodoro timer: http://pom.ianchanning.com
chuck().up(element, count[, callback]);
chuck().down(element, count[, callback]);
N.B. We've switched to ES6 modules, so you'll need to use script type="module"
syntax.
<div id="seconds">00</div>
<input id="go" type="button" value="Go">
<script type="module">
import { chuck } from "./chuck.js";
(function() {
document.querySelector("#go").addEventListener("click", function() {
setInterval(function() {
chuck().down(document.querySelector("#seconds"), 10);
}, 1000);
});
})();
</script>
Rubiks cube stopwatch (N.B. tickInterval
= 10ms)
setInterval(function () {
chuck()
.up(document.querySelector("#hundredths"), 100)
.up(document.querySelector("#seconds"), 60);
}, 10);
Count down to an event
setInterval(function () {
chuck()
.down(document.querySelector("#sec"), 60)
.down(document.querySelector("#min"), 60)
.down(document.querySelector("#hour"), 24)
.down(document.querySelector("#day"), 365);
}, 1000);
Pomodoros
var notification = function () {
alert("take a break");
};
setInterval(function () {
chuck()
.down(document.querySelector("#sec"), 60)
.down(document.querySelector("#min"), 25)
.up(document.querySelector("#pomo"), 100, notification);
}, 1000);
There is a basic implementation of Jest tests. First install yarn
and then:
yarn install
yarn test
Also there is a basic example page at tests/index.html
, a relatively simple way of doing this is via npx
. First install npm
globally which should give you npx
. You can then run:
npx http-server
in this directory and go to http://localhost:8080/tests to see the basic countdown working.