hebcal-fixed
Version:
An easy to use, richly-featured, perpetual Jewish Calendar API
109 lines (103 loc) • 4.34 kB
HTML
<html>
<head>
<title>Hebcal examples</title>
<script type="text/javascript" src="client/hebcal.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Hebcal JavaScript</h1>
<p>This file contains a few examples for using JavaScript Hebcal. Take a look at the source, then open up your JavaScript console to try it yourself!</p>
<p>Note: this is <em>not</em> an extensive API reference. For that, please take a look at the <code>README.md</code> file.</p>
<select id="textstyle">
<option value="s">Sfardit</option>
<option value="a">Ashkenazis</option>
<option value="h">עברית</option>
</select>
<div id="today">
<h2>Today</h2>
<span></span>
<pre></pre>
<div></div>
</div>
<div id="barmitzvah">
<h2>Bar Mitzvah Calculator</h2>
<input type="date" id="barmitzvah-date" /><br/>
<label><input type="radio" name="barmitzvah-gender" id="barmitzvah-gender-m" value="m" checked="checked" /> Male</label>
<label><input type="radio" name="barmitzvah-gender" id="barmitzvah-gender-f" value="m" /> Female</label><br/>
<label><input type="radio" name="barmitzvah-location" id="barmitzvah-location-chul" value="chul" checked="checked" /> Diaspora</label>
<label><input type="radio" name="barmitzvah-location" id="barmitzvah-location-il" value="il" /> Israel</label><br/>
<label><input type="checkbox" name="barmitzvah-sunset" id="barmitzvah-sunset" value="sunset" /> After sunset?</label><br/>
<input type="submit" value="Calculate" id="barmitzvah-calc" />
<div id="barmitzvah-result"></div>
</div>
<div id="holidays">
<h2>Holidays</h2>
<select>
<option value="pesach">Pesach</option>
<option value="shavuot">Shavuot</option>
<option value="sukkot">Sukkot</option>
<option value="purim">Purim</option>
<option value="rosh">Rosh Hashanah</option>
<option value="chanukah">Chanukah</option>
</select>
<input type="submit" value="Calculate" id="holidays-calc" />
<div id="holidays-result"></div>
</div>
<script type="text/javascript">
var d = document, o, year, today;
Hebcal.events.on('ready', function() {
year = new Hebcal();
function load() {
o = d.querySelector('#textstyle').value;
today = year.find('today')[0];
d.querySelector('#today span').innerHTML = today.toString(o) + '<br/>' + Hebcal.defaultCity;
d.querySelector('#today pre').innerHTML = JSON.stringify(today.getZemanim(), null, '\t');
d.querySelector('#today div').innerHTML = today.getSedra(o) + '<br/>' + today.holidays().map(function(h){return h.getDesc(o)}).join('<br/>');
}
load();
d.querySelector('#textstyle').onchange = load;
d.querySelector('#holidays-calc').onclick = function(){
var h = d.querySelector('#holidays select').value, days;
switch (h) {
case 'pesach':
case 'shavuot':
case 'sukkot':
days = year.find(h);
break;
case 'purim':
days = year.find(14, year.months.length);
break;
case 'rosh':
days = year.find('Rosh Hashanah');
break;
case 'chanukah':
days = year.find(Hebcal.range(25,33),'kislev');
break;
default:
days = year.find('today');
}
d.querySelector('#holidays-result').innerHTML = days.map(function(d){
return d.toString(o) + ', ' + d.greg().toDateString();
}).join('<br/>');
};
d.querySelector('#barmitzvah-calc').onclick = function(){
var male = d.querySelector('#barmitzvah-gender-m').checked,
il = d.querySelector('#barmitzvah-location-il').checked,
sunset = d.querySelector('#barmitzvah-sunset').checked;
var birthday = new Hebcal.HDate(d.querySelector('#barmitzvah-date').valueAsDate);
if (sunset) {
birthday = birthday.next();
}
var bm = new Hebcal.HDate(birthday).setFullYear(birthday.getFullYear() + 12 + male);
bm.il = il;
d.querySelector('#barmitzvah-result').innerHTML = 'Actual: ' + bm.toString(o) + ', ' + bm.greg().toDateString() + '<br/>' +
'Shabbat: ' + bm.onOrAfter(6).toString(o) + ', ' + bm.onOrAfter(6).greg().toDateString() + '<br/>' +
'Parsha: ' + bm.getSedra(o);
};
}).on('almostZeman', function(zeman, time){
alert('It is ' + ~~(time / 1000 / 60) + ' minutes until ' + zeman + '.');
});
</script>
</body>
</html>