Dryusdan
/
donation-module
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finish module

This commit is contained in:
root 2018-08-05 16:46:30 +02:00
parent 13779dd745
commit 134d5fe377
3 changed files with 88 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
assets/js/donation.js
View File

@ -1,20 +1,63 @@
document.addEventListener('DOMContentLoaded', function() {
// code here
function readTextFile(file)
{
getData("donation.json");
})
function getData(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "https://www.drycat.fr/donation.json", false);
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
//var allText = rawFile.responseText;
displayDataInDocument(rawFile.responseText);
}
}
}
rawFile.send(null);
}
})
function displayDataInDocument(data){
var donation = JSON.parse(data);
var donation_array = Object.keys(donation);
var donation_count = donation_array.length-1;
var donation_period = '';
var percent = 0;
for(var i = 0; i <= donation_count; i++){
if(donation[donation_array[i]]["duration"] == "month"){
dateOfDay = new Date();
numberOfDay = dateOfDay.getDate();
numberOfMonth = dateOfDay.getMonth()+1;
numberOfYear = dateOfDay.getFullYear();
var day_count = daysInMonth(numberOfMonth,numberOfYear) - numberOfDay;
}
else if(donation[donation_array[i]]["duration"] == "year"){
var oneDay = 24*60*60*1000;
dateOfDay = new Date();
nextYear = dateOfDay.getFullYear()+1;
nextDate = new Date(nextYear, 0, 1);
var day_count = Math.round(Math.abs((dateOfDay.getTime() - nextDate.getTime())/(oneDay)));
}
percent = donation[donation_array[i]]["amount"] / donation[donation_array[i]]["amount_required"] * 100;
donation_period = document.getElementsByClassName(donation_array[i])[0];
donation_period.getElementsByClassName("title")[0].innerHTML = donation.monthly.title;
donation_period.getElementsByClassName("amount")[0].getElementsByTagName("span")[0].innerHTML = donation.monthly.amount;
donation_period.getElementsByClassName("amount_required")[0].getElementsByTagName("span")[0].innerHTML = donation.monthly.amount_required;
donation_period.getElementsByClassName("donator")[0].innerHTML = donation.monthly.donator;
donation_period.getElementsByClassName("day_count")[0].innerHTML = day_count;
donation_period.getElementsByClassName("status_bar")[0].style.width=percent+"%";
}
}
function daysInMonth (month, year) {
return new Date(year, month, 0).getDate();
}

17
donation.json
View File

@ -1,14 +1,17 @@
{
"montly": {
"monthly": {
"title": "Compteur mensuel",
"amount": "0",
"amount_required": "15",
"donator" : "0"
"donator" : "0",
"duration": "month"
},
"annualy": {
"title": "Compteur annuel",
"amount": "0",
"amount_required": "180",
"donator" : "0"
}
"title": "Compteur annuel",
"amount": "0",
"amount_required": "180",
"donator" : "0",
"duration": "year"
}
}

32
index.html
View File

@ -6,11 +6,11 @@
<link rel="stylesheet" href="assets/css/screen.css">
</head>
<body>
<div class="donation montly">
<div class="donation monthly">
<div class="container">
<div class="title">Compteur mensuel</div>
<div class="amount">
<span id="amount">0</span> € collectés
<span>0</span> € collectés
</div>
</div>
<div class="count_bar">
@ -22,14 +22,38 @@
</div>
<div class="row">
<div class="col-2">
<span id="donator">0</span> donateur
<span class="donator">0</span> donateur
</div>
<div class="col-2">
<span id="day_count">20</span> jours restant
<span class="day_count">20</span> jours restant
</div>
</div>
</div>
</div>
<div class="donation annualy">
<div class="container">
<div class="title">Compteur mensuel</div>
<div class="amount">
<span>0</span> € collectés
</div>
</div>
<div class="count_bar">
<div class="status_bar"></div>
</div>
<div class="container">
<div class="amount_required">
sur <span id="amount_required">120</span> € d'objectif
</div>
<div class="row">
<div class="col-2">
<span class="donator">0</span> donateur
</div>
<div class="col-2">
<span class="day_count">20</span> jours restant
</div>
</div>
</div>
</div>
<script src="assets/js/donation.js"></script>
</body>
</html>