DS-Algo-Playground/scratch.html at main · wadekarg/DS-Algo-Playground · 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
<!DOCTYPE html>
<html>
<head>
<title>Renderer Test</title>
<link rel="stylesheet" href="css/topic-template.css">
</head>
<body>
<h1>Renderer test page</h1>
<div data-section="cheat-sheet"></div>
<div data-section="patterns-that-use-this"></div>
<div data-section="ask-before-coding"></div>
<div data-section="curated-problems"></div>
<div data-section="solution-walkthroughs"></div>
<div data-section="reasoned-next-steps"></div>
<script src="js/topic-renderer.js"></script>
<script>
  const arraysCheatSheet = {
    ops: [
      { name: "arr[i]", complexity: "O(1)", good: true },
      { name: "arr.append()", complexity: "O(1)*", good: true },
      { name: "insert middle", complexity: "O(n)", good: false },
      { name: "search", complexity: "O(n)", good: false }
    ],
    use: ["Need random access by index", "Size is known or bounded", "Iterate more than insert"],
    avoid: ["Frequent middle inserts → linked list", "Key-based lookup → hash map", "Min/max → heap"],
    pitfalls: ["Off-by-one on end index", "Mutating during iteration", "Integer overflow on sums"]
  };
  const arraysAsks = [
    "Is the array sorted? Can I sort it?",
    "Are there duplicates? Negative numbers?",
    "Can I modify the input in place?",
    "What's the constraint on N? (Determines acceptable Big-O)",
    "Empty array? Single element? Return what?"
  ];
  const arraysNextSteps = [
    { label: "Prereq", title: "Complexity Basics", url: "complexity.html", why: "Big-O notation underpins every Big-O claim on this page." },
    { label: "Next, learn", title: "Hash Tables", url: "topics/hash-table.html", why: "O(1) lookups complement arrays' O(1) index access — the two together unlock Two Sum." },
    { label: "Pattern to tackle", title: "Two Pointers", url: "topics/two-pointers.html", why: "Sorted arrays are where two-pointer techniques shine." }
  ];
  renderTopic('arrays', arraysCheatSheet, arraysAsks, arraysNextSteps).then(() => console.log('done'));
</script>
</body>
</html>