diff --git a/assets/js/donation.js b/assets/js/donation.js index c9f6019..3c9bdee 100644 --- a/assets/js/donation.js +++ b/assets/js/donation.js @@ -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(); +} diff --git a/donation.json b/donation.json index c5abc30..587902e 100644 --- a/donation.json +++ b/donation.json @@ -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" + } + } diff --git a/index.html b/index.html index 6aea3a1..7192c19 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,11 @@ -
+
Compteur mensuel
- 0 € collectés + 0 € collectés
@@ -22,14 +22,38 @@
- 0 donateur + 0 donateur
- 20 jours restant + 20 jours restant
+
+
+
Compteur mensuel
+
+ 0 € collectés +
+
+
+
+
+
+
+ sur 120 € d'objectif +
+
+
+ 0 donateur +
+
+ 20 jours restant +
+
+
+