Global-Clock

What is this?

An Easy and lightweight package for getting time and date for any location!

Installation

For npm:

npm install global-clock --save

For yarn:

yarn add global-clock

Then...

For commonjs:

const { Clock } = require('global-clock');

Clock.getTime();

For module:

import { Clock } from 'global-clock';

Clock.getTime();

Clock

Clock supports 5 options:

• Clock.getTime(<parameters: withSeconds, location>) - Returns time in the AM/PM format

EX:

Clock.getTime(); // 5:00:00 PM

• Clock.getFullTime(<parameters: withSeconds, location>) - Returns time in military time

EX:

Clock.getFullTime(); // 17:00:00

• Clock.getDate(<parameters: type, location>) - Returns the date

EX:

Clock.getDate(); // 1/8/2021

• Clock.getDateTime(<parameters: type, withSeconds, location>) - Returns the date and the time in the AM/PM format

EX:

Clock.getDateTime(); // 1/8/2021 5:00:00 PM

• Clock.getDateFullTime(<parameters: type, withSeconds, location>) - Returns the date and the time in military time

EX:

Clock.getDateFullTime(); // 1/8/2021 17:00:00

Clock Parameters

• withSeconds not required, not case sensitive - Seconds included?

  There are 2 different possible values for withSeconds:

• true - It would return the time in this format: 5:00:00 PM

EX:

Clock.getDate(true); // 5:00:00 PM

• false - It would return the time in this format: 5:00 PM

EX:

Clock.getDate(false); // 5:00 PM

If the withSeconds is undefined time would automaticly output in this format 5:00:00 PM

• location not required, not case sensitive - Location is the location where you want the time from.

You CANNOT put a random location, this only works with official timezones, you can get more information about this at: https://www.iana.org/time-zones

If the location is undefined the location would automaticly output to your current location

EX:

Clock.getTime(location);

Clock.getTime('california'); // 5:00:00 PM

• type not required, not case sensitive - Type is used for dates, this is responsible for the order that the date is in.

  There are 3 different possible values for type:

• mm/dd/yy or mm/dd/yyyy

  Output:

Clock.getDate('mm/dd/yy'); // 1/8/2021
Clock.getDate('mm/dd/yyyy'); // 1/8/2021

• dd/mm/yy or dd/mm/yyyy

  Output:

Clock.getDate('dd/mm/yy'); // 8/1/2021
Clock.getDate('dd/mm/yyyy'); // 8/1/2021

• yy/mm/dd or yyyy/mm/dd

  Output:

Clock.getDate('yy/mm/dd'); // 2021/1/8
Clock.getDate('yyyy/mm/dd'); // 2021/1/8

You can use both dd/mm/yy or dd/mm/yyyy

EX:

Clock.getDate(type);

Clock.getDate('dd/mm/yy'); // 8/1/2021
Clock.getDate('dd/mm/yyyy'); // 8/1/2021

If the type is undefined the date would automaticly output in this format mm/dd/yyyy An Example of global-clock being used:

https://codesandbox.io/s/global-clock-example-qx4fc?file=/src/App.js

HTMLClock

! This does not work with pure HTML and JS

You would need to use something like Parcel or Webpack Parcel: https://parceljs.org/

Webpack: https://webpack.js.org/ HTMLClock supports 1 option:

• HTMLClock.createClock(<object>) - This creates a clock element

EX:

// JS

import { HTMLClock } from 'global-clock';

const options = {
    class: 'clock',
    type: 'text',
    time: 'normal',
};

HTMLClock.createClock(options);

// HTML

<div class="clock"></div>
<!-- the object that turns into the clock -->

<div class="not-clock"></div>
<!-- NOT the object that turns into the clock -->

// RESULT

<div
    class="clock"
    style="display:flex;alignItems:center;justifyContent:center;"
>
    <p
        class="clock-time"
        style="color:#fff;font-family:arial;font-size:1.5em;font-weight:200;"
    >
        The Time
    </p>
</div>

<div class="not-clock"></div>

The <p></p> tag's class would always be the main class name and-time(in this case clock-time)

To overwrite the inline CSS you can use !important

EX:

.clock {
    background: #eeffff !important;
}

.clock-time {
    color: #000 !important;
    font-size: 20px !important;
}

HTMLClock Object

• class required, case sensitive - This would be the class that would become the clock element

• type not required, case sensitive - This is the type of clock element you want

  • text - An invisible <div></div> element with a <p></p> element that says the time inside of it

  • box - A box with a <p></p> element that says the time inside of it

  If you leave blank or undefined it will default to text

• withSecods not required, not case sensitive - Seconds included?

• location not required, not case sensitive - The location that you want the time from

  If you leave blank or undefined it will default to your current location

• time not required, case sensitive - Which type of time do you want

  • normal - Returns time in the AM/PM format

  • full - Returns time in military time

  If you leave blank or undefined it will default to normal