Skip to content
A general object for ticking a set of values up or down
JavaScript HTML
Branch: master
Clone or download
ianchanning Fix, get Jest + ES6 modules without babel working
1. In chk.es6.js, change the export to ES6 module
2. In package.json, fix the actual bug by using the babel dependency
3. In tests/chk.test.js, change the import to ES6 module
4. In tests/index.html, change the import to ES6 module
Latest commit 18644b9 Dec 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
tests
.gitignore
LICENSE
README.md
chk.es6.js
chk.js
jquery.chk.js
jquery.chk.min.js
package.json
yarn.lock

README.md

chk - The JavaScript Chaining Tick

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

Syntax

Up

chk().up(element, count[, callback]);

Down

chk().down(element, count[, callback]);

Starter example

<div id="seconds">00</div>
<input id="go" type="button" value="Go">
<script src="chk.js"></script>
<script>
(function() {
  document.querySelector('#go').addEventListener('click', function() {
    setInterval(function() {
      chk().down(document.querySelector('#seconds'), 10);
    }, 1000);
  });
})();
</script>

Examples

Rubiks cube stopwatch (N.B. tickInterval = 10ms)

setInterval(function() {
    chk()
    .up(document.querySelector('#hundredths'), 100)
    .up(document.querySelector('#seconds'), 60);
}, 10);

Count down to an event

setInterval(function() {
    chk()
    .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() {
    chk()
    .down(document.querySelector('#sec'), 60)
    .down(document.querySelector('#min'), 25)
    .up(document.querySelector('#pomo'), 100, notification);
}, 1000);

Tests

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.

You can’t perform that action at this time.