23
moon-phase-widget - A sleek moon phase widget in Javascript
source link: https://github.com/g00dv1n/moon-phase-widget
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Moon phase widget for Website
Super tiny (only 3kb minified) javascript library to add awesome moon phase widget to your website.
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
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/[email protected]/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
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK