https://github.com/g00dv1n/moon-phase-widget
Moon phase widget for website in javascript
https://github.com/g00dv1n/moon-phase-widget
astrology astronomy javascript widget
Last synced: 5 months ago
JSON representation
Moon phase widget for website in javascript
- Host: GitHub
- URL: https://github.com/g00dv1n/moon-phase-widget
- Owner: g00dv1n
- License: mit
- Created: 2019-12-17T12:48:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T03:11:55.000Z (over 3 years ago)
- Last Synced: 2025-10-24T03:41:37.544Z (8 months ago)
- Topics: astrology, astronomy, javascript, widget
- Language: HTML
- Homepage: https://moonorganizer.com/en/moon-phase-for-today/
- Size: 769 KB
- Stars: 51
- Watchers: 3
- Forks: 11
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://www.jsdelivr.com/package/npm/moon-phase-widget)
[](https://www.jsdelivr.com/package/npm/moon-phase-widget)
Just copy the code below and paste it where you want to see the widget.
```
```
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:**
```
```
**Horizontal orientation:**
```
```
## Usage via npm
Install package:
```
npm install moon-phase-widget
```
Import code and styles (if you want):
```javascript
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](https://moonorganizer.com/en/moon-phase-for-today/)
Fill free to contact me if you need help with customization or installation.