From 04e8978b2544d978b5be4b7922825aaccc804931 Mon Sep 17 00:00:00 2001
From: Connor Frank <conjfrnk@gmail.com>
Date: Thu, 18 Apr 2024 23:49:49 -0400
Subject: more euler

---
 euler/euler.css  | 14 ++++++++++++--
 euler/stats.html | 21 +++++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

(limited to 'euler')

diff --git a/euler/euler.css b/euler/euler.css
index 9c209f3..e2b6da3 100644
--- a/euler/euler.css
+++ b/euler/euler.css
@@ -1,6 +1,16 @@
-.scrollable-table {
-    overflow-x: auto;
+.progress-container {
     width: 100%;
+    background-color: lightgrey;
+}
+
+.progress-bar {
+    width: 0%;
+    height: 30px;
+    background-color: green;
+    text-align: center;
+    line-height: 30px;
+    color: white;
+    font-weight: bold;
 }
 
 table.progress {
diff --git a/euler/stats.html b/euler/stats.html
index e46f364..ae4cf26 100644
--- a/euler/stats.html
+++ b/euler/stats.html
@@ -17,6 +17,23 @@
         <div class="darkgroup">
             <div class="container">
                 <div class="ctitle">Progress</div>
+                <div class="progress-container">
+                    <div class="progress-bar" id="progressBar">0%</div>
+                </div>
+                <script>
+                    function updateProgressBar() {
+                        var completedElements = document.querySelectorAll('td.completed').length;
+                        var totalElements = document.querySelectorAll('td').length;
+                        var progressBar = document.getElementById('progressBar');
+                        var percentage = (completedElements / totalElements) * 100;
+                        progressBar.style.width = percentage + '%';
+                        progressBar.textContent = percentage.toFixed(1) + '%';
+                    }
+                    window.onload = function() {
+                        updateProgressBar();
+                    };
+                </script>
+                <br>
                 <table class="progress">
                     <tr>
                         <td class="completed"><a href="https://projecteuler.net/problem=1" title="Multiples of 3 or 5">1</a></td>
@@ -99,7 +116,7 @@
                         <td class="open"><a href="https://projecteuler.net/problem=66" title="Diophantine Equation">66</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=67" title="Maximum Path Sum II">67</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=68" title="Magic 5-gon Ring">68</a></td>
-                        <td class="open"><a href="https://projecteuler.net/problem=69" title="Totient Maximum">69</a></td>
+                        <td class="completed"><a href="https://projecteuler.net/problem=69" title="Totient Maximum">69</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=70" title="Totient Permutation">70</a></td>
                     </tr>
                     <tr>
@@ -731,7 +748,7 @@
                         <td class="open"><a href="https://projecteuler.net/problem=584" title="Birthday Problem Revisited">584</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=585" title="Nested Square Roots">585</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=586" title="Binary Quadratic Form">586</a></td>
-                        <td class="open"><a href="https://projecteuler.net/problem=587" title="Concave Triangle">587</a></td>
+                        <td class="completed"><a href="https://projecteuler.net/problem=587" title="Concave Triangle">587</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=588" title="Quintinomial Coefficients">588</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=589" title="Poohsticks Marathon">589</a></td>
                         <td class="open"><a href="https://projecteuler.net/problem=590" title="Sets with a Given Least Common Multiple">590</a></td>
-- 
cgit v1.2.3