Socket
Book a DemoInstallSign in
Socket

jschronometer

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jschronometer

A simple library to create custom chronometers.

1.0.0
latest
Source
npmnpm
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

ChronometerJS

A simple javascript library to create custom chronometers

Getting Started

To starts to use chronometerjs in your application, you'll need to follow the steps below:

Installation

Install with npm:
npm install --save chronometerjs

Usage

Let's use the following index.html in this example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ChronometerJS Example</title>

  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h1>Chronometer JS</h1>

  <ul>
    <li id="minutes"></li>
    <li id="seconds"></li>
  </ul>

  <button id="start">Start Chronometer<button>

  <script src="main.js"></script>
</body>
</html>

import ChronometerJS from 'chronometerjs';

const chronometer = new ChronometerJS({
  schema: [0, 20]
});

const updateHTML = data => {
  document.querySelector('#minutes').textContent = data.minutes;
  document.querySelector('#seconds').textContent = data.seconds;
};

chronometer.subscribe(updateHTML);

document.addEventListener('#start', () => {
  chronometer.start();
});

Explanation

  • Instantiate the class passing an object containing a property schema, that contains an array with the following structure:
[seconds, minutes, hours]
  • The library uses the Observer Pattern, so we can create a function to receive the data every time that the chronometer changes, in this case, we use updateHTML function
  • Use the subscribe() method , that receives a function, to listen to the changes on the chronometer
  • To start the chronometer, we use the method start()

Keywords

javascript

FAQs

Package last updated on 27 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.