init

assets/scripts/progress.js

@@ -11,8 +11,8 @@ function numberWithCommas(x) {
 
 (async function () {
   const { dollars, eth, ethUsdConversion } = await fetchData();
-  const fiveMillionUnits = dollars / 5_000_000
-  const targetUSD = Math.ceil(fiveMillionUnits) * 5_000_000
+  const fiveMillionUnits = Math.ceil(dollars / 5_000_000) + 3
+  const targetUSD = fiveMillionUnits * 5_000_000
 
   const percentage = (dollars / targetUSD) * 100;
 
@@ -29,4 +29,37 @@ function numberWithCommas(x) {
   );
 
   document.getElementById("percent").textContent = `${percentage.toFixed(0)}%`
+
+  const progressWrapper = document.getElementById("progressWrapper");
+
+  const pointLen = fiveMillionUnits + 1;
+  for (let i = 0; i < pointLen; i++) {
+    let remainderRender = ((window.innerWidth / 100) < 5) ? 2 : 1;
+    if (i % remainderRender === 0 && (i >= pointLen - 6 && i < pointLen - 1)) {
+      let pointDiv = document.createElement("div");
+      let pointLine = pointDiv.appendChild(document.createElement("div"));
+      let pointLabel = pointDiv.appendChild(document.createElement("p"));
+
+      let point = progressWrapper.appendChild(pointDiv);
+      point.style.position = "absolute";
+      point.style.top = 0;
+      point.style.left = `${i * 10}%`;
+
+      pointLine.style.position = "relative";
+      point.style.width = "5px";
+      point.style.height = "15px";
+      point.style.borderRadius = '0 0 2px 2px';
+      point.style.backgroundColor = 'white';
+
+      pointLabel.style.position = "absolute";
+      const pointUSD = i * 5;
+      pointLabel.style.top = "2px";
+      pointLabel.style.left = "calc(-0.5vw - 20px)";
+      pointLabel.style.padding = "4px 8px";
+      pointLabel.style.borderRadius = "100px";
+      pointLabel.style.backgroundColor = "rgba(0, 0, 0, 0.2)";
+      pointLabel.style.fontWeight = "bold";
+      pointLabel.textContent = `$${pointUSD}M`;
+    }
+  }
 })();

index.html

@@ -53,7 +53,7 @@
       <p class="scroll-scroll">(📜, 📜)</p>
 
       <h1 class="percent" id="percent">...%</h1>
-      <div class="progress">
+      <div class="progress" id="progressWrapper">
         <div class="bar" id="bar"></div>
       </div>
       <h1 class="dollars">

styles.css

@@ -263,9 +263,10 @@ video {
 }
 
 .progress {
+  position: relative;
   margin-top: 1rem;
-  width: 40%;
-  height: 3rem;
+  width: 100%;
+  height: 3.5rem;
   border-radius: 9px;
   box-shadow: inset 0 0 6px 0px #000000b8;
   background-color: #161616;
@@ -275,7 +276,7 @@ video {
 .bar {
   transition: width 1s;
   width: 0%;
-  height: 3rem;
+  height: 3.5rem;
   border-radius: 9px;
   background: #00d4ff;
   background: -webkit-linear-gradient(top left, #00d4ff, #00ff6f);
@@ -318,9 +319,6 @@ video {
     text-align: center;
   }
 
-  .progress {
-    width: 70%;
-  }
   .scroll-scroll {
     font-size: 6rem;
   }