RedT4nK.github.io/redBlackTree.html at main · RedT4nk/RedT4nK.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>Red-Black Tree Visualization</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
  <div class="nav-back">
    <a href="index.html">← Back to Index</a>
  </div>

  <div class="settingBox">
    Animation Speed (1-5):
    <input
      type="number"
      value="2"
      placeholder="1-5"
      max="5" min="1"
      id="speedBtn"
      onchange="speedChange()"
    />
  </div>

  <div class="layout d-flex">
    <div class="binaryBox">
      <h1>Red-Black Tree Visualization</h1>

      <div id="rbTreeContainer" style="border:1px solid #333; min-height:200px; padding:10px;">
        <!-- The JS will dynamically draw or list the Red-Black Tree. -->
      </div>

      <div class="d-flex mt-3">
        <p class="p-3">Insert Key:</p>
        <input type="number" id="rbKey"/>
        <button onclick="insertRBKey()" class="ml-3">Insert</button>
      </div>

      <div class="d-flex mt-3">
        <p class="p-3">Search Key:</p>
        <input type="number" id="rbSearchKey"/>
        <button onclick="searchRBKey()" class="ml-3">Search</button>
        <p class="p-3">Result:</p>
        <span class="p-3" id="rbSearchResult"></span>
      </div>

      <div class="mt-3">
        <button id="showBtnRB">Concept of Red-Black Tree</button>
      </div>
      <div class="mt-3" id="rbContent" style="display:none;">
        <p>
          <strong>Red-Black Tree</strong> is a self-balancing binary search tree,
          where every node has an extra bit that represents color (red or black).
          It ensures the tree remains balanced, enabling search, insert, and delete
          operations in O(log n) time.
        </p>
      </div>
    </div>

    <!-- Code snippet / pseudocode section -->
    <div>
      <div class="codeBox">
        <div class="code">// Red-Black Tree Insert (pseudocode)</div>
        <div class="code">function rbInsert(root, key) {</div>
        <div class="code tab-1">// 1. Perform BST insert</div>
        <div class="code tab-1">// 2. Color new node red</div>
        <div class="code tab-1">// 3. Fix any violations</div>
        <div class="code">}</div>

        <div class="code mt-3">// Red-Black Tree Search (pseudocode)</div>
        <div class="code">function rbSearch(root, key) {</div>
        <div class="code tab-1">// Standard BST search logic</div>
        <div class="code">}</div>
      </div>
    </div>
  </div>

  <script src="js/redBlackTree.js"></script>
</body>
</html>