-
Notifications
You must be signed in to change notification settings - Fork 0
/
getStarted.html
96 lines (79 loc) · 3.4 KB
/
getStarted.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Mathematical Birthday calculator</title>
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/MathematicalBirthdays.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/tabulator_simple.min.css">
<script src="javascript/lib/jquery-3.2.1.min.js"></script>
<script src="javascript/lib/jquery-ui.min.js"></script>
<script src="javascript/lib/tabulator.min.js"></script>
<script src="javascript/lib/moment.js"></script>
<script src="javascript/ErathostenesSieve.js"></script>
<script src="javascript/MathematicalBirthdayCalculator.js"></script>
<script>
//var MathematicalBirthdayCalculator = require('javascript/MathematicalBirthdayCalculator.js');
$( function() {
//init date picker
$( "#datepicker" ).datepicker({
dateFormat: "dd-mm-yy",
onSelect:function() {
$(this).datepicker( "hide" ); //hide the calendar if enter is pressed
$(this).blur(); //remove focus from the input (so need to click again to select a new date)
updateTable($(this).val());
}});
// init the tabulator
$("#mathbirthday-table").tabulator({columns:[
{title:"Date",
field:"Date",
formatter:function(cell, formatterParams){
var tmpMoment = new moment(cell.getValue());
return tmpMoment.format("dddd, Do MMMM YYYY");
}
},
{title:"Number", field:"Number"},
{title:"Label", field:"Label"}
]});
function getBirthdays(myDate){
var MBC = new MathematicalBirthdayCalculator(myDate);
return MBC.generateAllBirthdaysDates();
}
function updateTable(myDate){
myMoment = new moment(myDate , "DD-MM-YYYY");
console.log("updateTable: "+ myMoment);
$("#mathbirthday-table").tabulator("setData", getBirthdays(myMoment.toDate()));
}
} );
</script>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Faq</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
</ul>
</div>
<div class="banner">
<div class="banner-head">
<h1>The mathematical birthday calculator</h1>
<h2>
Be a good geek and celebrate better birthdays.
</h2>
</div>
</div>
<div class="main-body" >
<div id="input" class="pure-form">
<label for="datepicker">
Date <input type="text" id="datepicker"/>
</label>
<button align="left" type="submit" class="pure-button pure-button-primary">Download as CSV</button>
</div>
<div id="mathbirthday-table"></div>
</div>
</body>
</html>