1.5.1 • Published 4 years ago
moon-phase-widget v1.5.1
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.