Plug in for Moon Phase

[pagan65]

I would like a code or plug in that I can add to the header of one of my boards, that would show the Moon Phases. Can anyone help me with this please.

[Ben Goodman]

Hi pagan65 !

No plugin required. 
This is what you are looking for: link.
Just tested it on my board, and it seems to work. Grab the main script, and one of the rest from below. You can always customize them.

This is the required code:

<div id="ex1"></div>

<div id="ex2"></div>

<div id="ex3"></div>





<script type="text/javascript">



function load_moon_phases(obj){

var gets=[]

for (var i in obj){

gets.push(i+"="+encodeURIComponent(obj[i]))

}

var xmlhttp = new XMLHttpRequest()

var url = "http://www.icalendar37.net/lunar/api/?"+gets.join("&")

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var moon  = JSON.parse(xmlhttp.responseText)

example_1(moon)

example_2(moon)

example_3(moon)

}

}

xmlhttp.open("GET", url, true)

xmlhttp.send()

}

document.addEventListener("DOMContentLoaded", function() {

var configMoon = {

lang   :'en', // 'ca' 'de' 'en' 'es' 'fr' 'it' 'pt' 'ru' 'zh' (*)

month :new Date().getMonth() + 1, // 1  - 12

year   :new Date().getFullYear(),

size :50, //pixels

lightColor :"#FFFF88", //CSS color

shadeColor :"#111111", //CSS color

sizeQuarter :20, //pixels

texturize :false //true - false

}

configMoon.LDZ=new Date(configMoon.year,configMoon.month-1,1)/1000

load_moon_phases(configMoon)

})



</script>


 And this is the one I tested with:

<script type="text/javascript">

function example_1(moon){

var day = new Date().getDate()

var dayWeek=moon.phase[day].dayWeek

var html="<div class='moon'>"

html+="<div>"+moon.nameDay[dayWeek]+"</div>"

html+="<div>"+ day + " " + moon.monthName + " "+moon.year+"</div>"

html+=moon.phase[day].svg

html+="<div>"+moon.phase[day].phaseName + " "+ Math.round(moon.phase[day].lighting)+"%</div>"

html+="</div>"

document.getElementById("ex1").innerHTML=html

}

</script>
As the page says, you can apply some CSS aswell:

.moon{

background-color:#666666;

display:inline-block;

padding:10px 20px;

color:#FFFFFF;

margin:1px;

}


Here is a moon calendar so you can check if the data is accurate: link

Hope it helps.

[pagan65]

Thank you Ben, I did get one working, not sure if it's the same one or not but I appreciate your help. I'm new to all of this so I get stumped pretty easy. But I'll keep this here just incase I need to come back to it.

[Peter]

Be careful of what you embed on your forum, especially if you don't understand the code.

There are some useful libraries that could be used in a plugin that would likely be a much nicer approach. Make a post in the plugin request board if you are interested.

[pagan65]

Thank you Peter, I got the code from here off the board so hopefully it was a safe one to use.

[Peter]

I did look at the source posted. The API used does seem fine, but I don't know how trusted that site is, or how secure their site / server is (e.g, API could get hijacked and be used maliciously as it is manipulating the page that the code is run in).

Am not trying to scare you, chances are you will be fine. Just want you to be aware that copying and pasting code such as above is generally not a good idea, as it's making a request to a resource that you do not control.