moon-phase-widget

Moon phase widget for Website

Super tiny (only 3kb minified) javascript library to add awesome moon phase widget to your website.

(This is a screenshot as an example)

Features

• Auto Geo detection
• Moon phase name and image
• Moon set and moon rise time
• Moon zodiac sign
• Super small size (This will not affect the speed of your site)
• Ability to change the background color
• 3 different styles (normal, small, horizontal)

How To Install (Easy way)

The easiest way to install the widget is by using CDN

Just copy the code below and paste it where you want to see the widget.

<div id="moon-phase-widget" data-color="white"></div>
<script async src="https://cdn.jsdelivr.net/npm/moon-phase-widget@1.5.0/build/automount.min.js">
</script>

Thats all.

If you want you can change the background color by adding your value to data-color attribute.

Text white or hex value #FFFFFF

Also, you can choose from different styles of the widget (By adding specific value to data-style).

Normal (default style)

Small:

<div id="moon-phase-widget" data-color="white" data-style="small"></div>
<script async src="https://cdn.jsdelivr.net/npm/moon-phase-widget@1.5.0/build/automount.min.js">
</script>

Horizontal orientation:

<div id="moon-phase-widget" data-color="white" data-style="horizontal"></div>
<script async src="https://cdn.jsdelivr.net/npm/moon-phase-widget@1.5.0/build/automount.min.js">
</script>

Usage via npm

Install package:

npm install moon-phase-widget

Import code and styles (if you want):

import { MoonPhaseWidget } from 'moon-phase-widget'
 
import 'moon-phase-widget/src/index.css'
 
new MoonPhaseWidget('some-element-id')

Contacts

More information about moon phase you can find here

Fill free to contact me if you need help with customization or installation.