# @rcostapr/analog-clock

> Javascript Analog Clock. The goal is to create a simple core library that can be customized and extended. Simple jQuery integration.

Latest version **2.0.6** (published 2021-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rcostapr/analog-clock
pnpm add @rcostapr/analog-clock
yarn add @rcostapr/analog-clock
bun add @rcostapr/analog-clock
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2021-10-07 |
| First published | 2021-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | rcostapr |
| Maintainers | rcostapr |
| Keywords | clock, javascript clock, analog clock, react clock, react analog clock, simple clock, easy clock, jQuery clock, jQuery analog clock |

## Links

- npm: https://www.npmjs.com/package/@rcostapr/analog-clock
- Repository: https://github.com/rcostapr/javascript-clock
- Homepage: https://github.com/rcostapr/javascript-clock#readme
- Issues: https://github.com/rcostapr/javascript-clock/issues
- npm.io page: https://npm.io/package/@rcostapr/analog-clock

## Dependencies (1)

- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 2.0.6 (latest) — 2021-10-07
- 2.0.5 — 2021-10-07
- 2.0.4 — 2021-10-07
- 2.0.3 — 2021-10-07
- 2.0.2 — 2021-10-07
- 2.0.1 — 2021-10-07
- 2.0.0 — 2021-10-07
- 1.7.4 — 2021-10-06
- 1.7.3 — 2021-10-06
- 1.7.2 — 2021-10-06
- 1.7.1 — 2021-10-06
- 1.7.0 — 2021-10-06
- 1.6.2 — 2021-10-06
- 1.6.1 — 2021-10-06
- 1.6.0 — 2021-10-06
- … 3 more at https://npm.io/package/@rcostapr/analog-clock/versions

## README

# Javascript Analog Clock
![Analog Clock](https://github.com/rcostapr/javascript-clock/blob/master/img/Clock_Component_1.png?raw=true)

![Javascript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Downloads](https://img.shields.io/github/downloads/rcostapr/javascript-clock/total.svg)
![Stars](https://img.shields.io/github/stars/rcostapr/javascript-clock.svg)
![Watchers](https://img.shields.io/github/watchers/rcostapr/javascript-clock.svg)
## Download

[![Analog Clock](https://github.com/rcostapr/javascript-clock/blob/master/img/release.png?raw=true)](https://github.com/rcostapr/javascript-clock/releases/latest)

 	
## 🔧 Install
```
npm i @rcostapr/analog-clock
```
## 💡 Javascript Usage
HTML
```html
<div id="clock4"></div>
<script src="analog-clock.min.js"></script>
```
SCRIPT PAGE - Show Clock with current time and default settings
``` javascript
AnalogClock("clock4");
```
OR show clock with custom time settings and custom time
``` javascript
const clock = new AnalogClock("clock");
  clock.setTime("2021-10-04T14:14:20.130Z");
  clock.borderStyle("1px solid rgb(1, 126, 59)");
  clock.backgroundColor("rgb(99 167 114)");
  clock.centerColor("red");
  clock.colors.secondPointer = "rgb(34, 116, 71)";
  clock.colors.hourPointer = "rgb(34, 116, 71)";
  clock.colors.minutePointer = "rgb(34, 116, 71)";
  clock.colors.numbers = "rgb(188, 232, 208)";
  clock.colors.borders = "rgb(1, 126, 59)";
  clock.colors.ticks = "rgb(188, 232, 208)";
  clock.colors.bigTicks = "rgb(188, 232, 208)";
```
OR show clock with +1 hour with title and digital clock
```javascript
var dt = new Date();
  dt.setHours(dt.getHours() + 1);
  const clock2 = new AnalogClock("clock2",
    {
      size: 160,
      title: "Spain",
      showDigital: true,
      date: dt.toISOString(),
    }
  );
```
## 💡 jQuery Usage
```javascript
$("#clock3").AnalogClock({ "title": "jQuery Element" });
```

## 💡 React Component
```javascript
import AnalogClock from '@rcostapr/analog-clock';
....
<AnalogClock id="clock" />
```

### Example index.js
```javascript
import React from 'react';
import ReactDom from 'react-dom';
import AnalogClock from '@rcostapr/analog-clock';

class App extends React.Component {
  render() {
    const colors = {
      center: "red",
      background: "rgb(99 167 114)",
      secondPointer: "rgb(34, 116, 71)",
      hourPointer: "rgb(34, 116, 71)",
      minutePointer: "rgb(34, 116, 71)",
      numbers: "rgb(188, 232, 208)",
      borders: "rgb(1, 126, 59)",
      ticks: "rgb(188, 232, 208)",
      bigTicks: "rgb(188, 232, 208)",
      borderStyle: "1px solid rgb(1, 126, 59)",
      fontStyle: "24px Arial",
    };

    var dt = new Date();
    dt.setHours(dt.getHours() + 1);
    const params = {
      size: 200,
      title: "Analog Clock",
      showDigital: true,
      date: dt.toISOString(),
    };

     return (
      <div>
        <h1 className="text-center">React Component Analog Clock</h1>
        <div className="row">
          <div className="col-sm-4 col-md-2">
            <AnalogClock id="clock" colors={colors} params={params} />
          </div>
        </div>
      </div>
    );
  }
}

ReactDom.render(<App />, document.getElementById('root'));
```
## ⚖️ License

The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/@rcostapr/analog-clock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._