1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>003.3n+1</title>
8 <link rel="stylesheet" href="./style.css">
9 <link rel="stylesheet" href="../assets/common.css">
10 <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
11 <script src="
12 https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js
13 "></script>
14 <script src="../assets/common.js"></script>
15</head>
16
17<body>
18 <!-- Modal Section -->
19 <input class="modal-state" id="modal" type="checkbox" />
20 <div class="modal">
21 <label class="modal__bg" for="modal"></label>
22 <div class="modal__inner" style="width: 30%;">
23 <label class="modal__close" for="modal"></label>
24 <h2>003.3n+1</h2>
25 <p class="modal__p">
26 <ul>
27 <li>The <span style="color:var(--lightGold)">Collatz Conjecture</span>, also known as
28 the 3n+1 problem or the hailstone sequence.</li>
29 <li>It is a mathematical conjecture that concerns a sequence of numbers.</li>
30 <li>The conjecture states that if you take any positive integer, and <span
31 style="color:var(--lightGold)">divide it by 2 </span>if it is even.</li>
32 <li>
33 <span style="color:var(--lightGold)">Multiply it by 3 and add 1 </span> if it is odd.
34 <li>Repeat this process with the resulting number, and
35 <span style="color:var(--lightGold)">eventually you reach the number 1</span>.
36 </li>
37 </ul>
38 </p>
39 </div>
40 </div>
41
42 <!-- Main Content -->
43 <h1>3n+1</h1>
44 <label for="number">
45 Enter a positive integer
46 </label>
47 <input type="number" id="n" value="50">
48 <p>Number of steps: <span id="steps" style="color:var(--gold)">0</span></p>
49 <div class="chart-container">
50 <canvas id="chart"></canvas>
51 </div>
52
53 <!-- Footer -->
54 <div class="footer">
55 <label for="modal">(i)</label>
56 <a class="arrow" href="../"></a>
57 </div>
58</body>
59<script src="./script.js"></script>
60
61</html>