003 · 101@92256cd

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>003.3n+1</title>
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="../assets/common.css">
+    <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
+    <script src="
+    https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js
+    "></script>
+</head>
+
+<body>
+    <!-- Modal Section -->
+    <input class="modal-state" id="modal" type="checkbox" />
+    <div class="modal">
+        <label class="modal__bg" for="modal"></label>
+        <div class="modal__inner" style="width: 30%;">
+            <label class="modal__close" for="modal"></label>
+            <h2>003.3n+1</h2>
+            <p class="modal__p">
+            <ul>
+                <li style="margin-bottom:10px">The <span style="color:#d4af37">Collatz Conjecture</span>, also known as
+                    the 3n+1 problem or the hailstone sequence.</li>
+                <li style="margin-bottom:10px">It is a mathematical conjecture that concerns a sequence of numbers.</li>
+                <li style="margin-bottom:10px">The conjecture states that if you take any positive integer, and <span
+                        style="color:#d4af37">divide it by 2 </span>if it is even.</li>
+                <li style="margin-bottom:10px">
+                    <span style="color:#d4af37">Multiply it by 3 and add 1 </span> if it is odd.
+                <li>Repeat this process with the resulting number, and
+                    <span style="color:#d4af37">eventually you reach the number 1</span>.
+                </li>
+            </ul>
+            </p>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <h1>3n+1</h1>
+    <label for="number">
+        Enter a positive integer
+    </label>
+    <input type="number" id="n" value="50">
+    <p>Number of steps: <span id="steps" style="color:#d4af37">0</span></p>
+    <div class="chart-container">
+        <canvas id="chart"></canvas>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        <label for="modal">(i)</label>
+        <a class="arrow" href="../"></a>
+    </div>
+</body>
+<script src="./script.js"></script>
+
+</html>
\ No newline at end of file

@@ -0,0 +1,91 @@
+const input = document.getElementById("n");
+const steps = document.getElementById("steps");
+let graph;
+function CollatzConjecture(n) {
+    let numberofSteps = 0
+    let result = [];
+    result.push({ step: numberofSteps, value: n })
+    while (n != 1) {
+        if (n % 2 == 0) {
+            n = n / 2
+        } else {
+            n = (n * 3) + 1
+        }
+        numberofSteps += 1
+        result.push({ step: numberofSteps, value: n })
+    }
+    return result;
+}
+
+function ConstructGraph(n) {
+    const data = CollatzConjecture(n);
+    if (graph) {
+        graph.destroy();
+    }
+    graph = new Chart("chart", {
+        type: "line",
+        data: {
+            labels: data.map(row => row.step),
+            datasets: [
+                {
+                    label: "Value",
+                    data: data.map(row => row.value),
+                    fill: false,
+                    borderColor: '#d4af37',
+                    backgroundColor: '#d4af37',
+                    color: 'white',
+                }
+            ]
+        },
+        options: {
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        title: function(context) {
+                            const Step = context[0].label == "0" ? "Initial Step" : "Step: " + context[0].label;
+                            const Value = `Value: ${context[0].parsed.y}`;
+                            return `${Step}\n${Value}`;
+                        },
+                        label: function(context) {
+                            return "";
+                        },
+                    }
+                },
+                legend: {
+                    display: false,
+                },
+            },
+            scales: {
+                y: {
+                  grid: {
+                    color: 'rgba(200, 200, 200, 0.1)',
+                  }
+                },
+                x: {
+                  grid: {
+                    color: 'rgba(200, 200, 200, 0.1)',
+                  }
+                }
+              }
+        },
+    });
+    steps.innerHTML = `${data.length}`;
+}
+
+input.addEventListener("input", function (e) {
+    if(e.target.value == '' || e.target.value == 0) {
+        graph.destroy();
+        steps.innerHTML = '0';
+    }
+    if (e.target.value == 1) {
+        return;
+    }
+    if (e.target.value < 1) {
+        e.target.value = '';
+        return;
+    }
+    const n = parseInt(e.target.value);
+    ConstructGraph(n);
+});
+
+ConstructGraph(50);
\ No newline at end of file

@@ -0,0 +1,8 @@
+body{
+    gap:10px;
+}
+
+.chart-container{
+    margin-top: 10px;
+    width: 500px;
+}

@@ -15,6 +15,7 @@
     <div class="flex flex-col text-white gap-x-[200px] gap-y-2 p-10">
         <a href="./001.Vision/" class="opacity-75 hover:opacity-100 hover:text-yellow-400">001.Vision</a>
         <a href="./002.TOTP/" class="opacity-75 hover:opacity-100 hover:text-yellow-400" >002.TOTP</a>
+        <a href="./003.3n+1/" class="opacity-75 hover:opacity-100 hover:text-yellow-400" >003.3n+1</a>
     </div>
 </body>
 </html>
\ No newline at end of file

Commit 92256cd

Commit `92256cd`