Merge pull request #69 from prplecake/add-counter

prplecake · Mar 22, 2024 · f91c968 · f91c968
2 parents 1457dd3 + 98649b4
commit f91c968
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 24 deletions.
diff --git a/countup.html b/countup.html
@@ -15,12 +15,13 @@
 		defer></script>
 </head>
 <body>
-	<div class="main">
-		<div id="countup"></div>
-	</div> 
+	<div class="main"></div>
 
 	<script>
-		const chosenDate = new Date("2023-05-16").getTime();
+		const counters = [
+				new Date("2023-05-16").getTime(),
+				new Date("2024-01-24").getTime(),
+		];
 	</script>
 	<script src="/static/lib/js/luxon.min.js"></script>
 	<script src="/static/js/countup.js"></script>

diff --git a/static/css/countup.css b/static/css/countup.css
@@ -29,7 +29,7 @@ h1 sup {
     color: #FF3E41;
 }
 
-#countup {
+.counter {
     color: #F6F4F3;
     text-align: center;
     text-transform: uppercase;

diff --git a/static/js/countup.js b/static/js/countup.js
@@ -1,24 +1,35 @@
 /*jshint multistr: true */
-setInterval(function () {
+const counterInnterHtmlBuilder = (diff) =>
+  "<div class=\"months\"> \
+  <div class=\"c-number\">" + diff.months + "</div>months</div> \
+  <div class=\"weeks\"> \
+  <div class=\"c-number\">" + diff.weeks + "</div>weeks</div> \
+	<div class=\"days\"> \
+  <div class=\"c-number\">" + diff.days + "</div>days</div> \
+  <div class=\"hours\"> \
+  <div class=\"c-number\">" + diff.hours + "</div>hours</div> \
+  <div class=\"minutes\"> \
+  <div class=\"c-number\">" + diff.minutes + "</div>minutes</div> \
+  <div class=\"seconds\"> \
+  <div class=\"c-number\">" + Math.floor(diff.seconds) + "</div>seconds</div> \
+  </div>";
 
-  const start = luxon.DateTime.fromMillis(chosenDate);
-  const end = luxon.DateTime.now();
 
-  const diff = end.diff(start, ["months", "weeks", "days", "hours", "minutes", "seconds"]).toObject();
 
-  document.getElementById("countup").innerHTML =
-    "<div class=\"months\"> \
-			<div class=\"c-number\">" + diff.months + "</div>months</div> \
-			<div class=\"weeks\"> \
-			<div class=\"c-number\">" + diff.weeks + "</div>weeks</div> \
-			<div class=\"days\"> \
-			<div class=\"c-number\">" + diff.days + "</div>days</div> \
-			<div class=\"hours\"> \
-			<div class=\"c-number\">" + diff.hours + "</div>hours</div> \
-			<div class=\"minutes\"> \
-			<div class=\"c-number\">" + diff.minutes + "</div>minutes</div> \
-			<div class=\"seconds\"> \
-			<div class=\"c-number\">" + Math.floor(diff.seconds) + "</div>seconds</div> \
-			</div>";
+counters.forEach((counterTime, i) => {
+  let divId = `counter-${i}`;
+  let div = document.createElement("div");
+  div.setAttribute("id", divId);
+  div.classList.add("counter");
+  document.getElementsByClassName("main")[0].append(div);
+  setInterval(() => {
+    const start = luxon.DateTime.fromMillis(counterTime);
+    const end = luxon.DateTime.now();
 
-}, 1000);
+    const diff = end.diff(start, ["months", "weeks", "days", "hours", "minutes", "seconds"]).toObject();
+
+    div.innerHTML = counterInnterHtmlBuilder(diff);
+
+
+  }, 1000);
+});