@rcostapr/analog-clock NPM

Javascript Analog Clock

Download

🔧 Install

npm i @rcostapr/analog-clock

💡 Javascript Usage

HTML

<div id="clock4"></div>
<script src="analog-clock.min.js"></script>

SCRIPT PAGE - Show Clock with current time and default settings

AnalogClock("clock4");

OR show clock with custom time settings and custom time

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

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

$("#clock3").AnalogClock({ "title": "jQuery Element" });

💡 React Component

import AnalogClock from '@rcostapr/analog-clock';
....
<AnalogClock id="clock" />

Example index.js

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'));