technique overview
-- container with most water -
-Sometimes, the mathematical solution is the simplest.
-- The area of a container bounded by the ground and its columns at - positions \((l, r)\) is: \[ \text{area} = \text{width} \cdot - \text{length} = (r - l) \cdot \min\{height[l], height[r]\} \] -
-- At its core, this is a maximization problem: maximize the contained - area. \[ \max\{(r - l) \cdot \min\{height[l], height[r]\}\} \] -
-- Given a new column position \(l_0 < l\) or \(r_0 < r\), the - contained area can only increase if the height of the corresponding - column increases. -
- -- The following correct solution surveys all containers, initialized - with the widest columns positions, that are valid candidates for a - potentially new largest area. A running maximizum, the answer, is - maintained. -
-def maxArea(height: list[int]) -> int:
+
+
+ container with most water
+
+
+
+ Sometimes, the mathematical solution is the simplest.
+
+ The area of a container bounded by the ground and its columns at
+ positions \((l, r)\) is: \[ \text{area} = \text{width} \cdot
+ \text{length} = (r - l) \cdot \min\{height[l], height[r]\} \]
+
+
+ At its core, this is a maximization problem: maximize the
+ contained area. \[ \max\{(r - l) \cdot \min\{height[l],
+ height[r]\}\} \]
+
+
+ Given a new column position \(l_0 < l\) or \(r_0 < r\), the
+ contained area can only increase if the height of the
+ corresponding column increases.
+
+
+
+ The following correct solution surveys all containers, initialized
+ with the widest columns positions, that are valid candidates for a
+ potentially new largest area. A running maximizum, the answer, is
+ maintained.
+
+
+ `def maxArea(height: list[int]) -> int:
ans = 0
l, r = 0, len(height) - 1
@@ -85,41 +89,47 @@
while l < r and height[r] <= min_height:
r -= 1
- return ans
+ return ans`
+
-
- boats to save people
-
-
- Usually, the metaphorical problem description is a distraction.
- However, I find that thinking within the confines of "boats" and
- "people" yields an intuitive solution in this case.
-
-
-
- Since only two people can fit in a boat at a time, pairing up
- lightest and heaviest individuals will result in the least amount of
- boats being used.
-
-
- However, the weights are given in random order. Efficiently pairing
- up the lightest and heaviest individuals, then, requires the most
- common two-pointers prepreocessing step: sorting.
-
- Finally, flesh out any remaining aspects of the implementation:
-
- - If one person remains, give them a boat.
- -
- If both people don't fit, use the heavier person—the
- lighter could maybe fit with someone else.
-
-
-
- def minimum_rescue_boats(people: list[int], limit: int) -> int:
+
+
+ boats to save people
+
+
+
+
+ Usually, the metaphorical problem description is a distraction.
+ However, I find that thinking within the confines of "boats" and
+ "people" yields an intuitive solution in this case.
+
+
+
+ Since only two people can fit in a boat at a time, pairing up
+ lightest and heaviest individuals will result in the least amount
+ of boats being used.
+
+
+ However, the weights are given in random order. Efficiently
+ pairing up the lightest and heaviest individuals, then, requires
+ the most common two-pointers prepreocessing step: sorting.
+
+
+ Finally, flesh out any remaining aspects of the implementation:
+
+
+ - If one person remains, give them a boat.
+ -
+ If both people don't fit, use the heavier person—the
+ lighter could maybe fit with someone else.
+
+
+
+ def minimum_rescue_boats(people: list[int], limit: int) -> int:
ans = 0
l, r = 0, len(people) - 1
@@ -138,6 +148,7 @@
r -= 1
return ans
+
diff --git a/readme.md b/readme.md
index 838de16..df6e7cc 100644
--- a/readme.md
+++ b/readme.md
@@ -5,3 +5,4 @@ My portfolio website
## todo
- Mobile support
+- Problem toggler
diff --git a/scripts/post.js b/scripts/post.js
index 2be007e..9564f53 100644
--- a/scripts/post.js
+++ b/scripts/post.js
@@ -1,13 +1,26 @@
-document.querySelectorAll("article h2").forEach((h2) => {
- const mdHeading = document.createElement("span");
- mdHeading.textContent = "# ";
- mdHeading.style.color = "#0073e6";
- h2.prepend(mdHeading);
-});
+document.addEventListener("DOMContentLoaded", () => {
+ document.querySelectorAll("article h2").forEach((h2) => {
+ const mdHeading = document.createElement("span");
+ mdHeading.textContent = "# ";
+ mdHeading.style.color = "#0073e6";
+ h2.prepend(mdHeading);
+ });
-document.querySelectorAll("article h3").forEach((h3) => {
- const mdHeading = document.createElement("span");
- mdHeading.textContent = "## ";
- mdHeading.style.color = "#0073e6";
- h3.prepend(mdHeading);
+ document.querySelectorAll(".problem-header h3").forEach((h3) => {
+ const toggle = document.createElement("span");
+ toggle.textContent = "v";
+ toggle.classList.add("problem-toggle");
+ toggle.addEventListener("click", () => {
+ const content = h3.parentElement.nextElementSibling;
+ content.style.display = toggle.textContent === ">" ? "block" : "none";
+ toggle.textContent = toggle.textContent === ">" ? "v" : ">";
+ });
+
+ const mdHeading = document.createElement("span");
+ mdHeading.textContent = "## ";
+ mdHeading.style.color = "#0073e6";
+
+ h3.prepend(mdHeading);
+ h3.prepend(toggle);
+ });
});
diff --git a/styles/post.css b/styles/post.css
index 7f0841e..a4c9518 100644
--- a/styles/post.css
+++ b/styles/post.css
@@ -85,6 +85,19 @@ header {
display: flex;
justify-content: center;
}
+
.language-python {
- font-size: 0.9em !important;
+ /* override prism.js styles */
+ font-size: 0.85em !important;
+}
+
+.problem-header {
+ position: relative;
+}
+
+.problem-toggle {
+ font-family: "Courier New", monospace;
+ position: absolute;
+ cursor: pointer;
+ left: -25px;
}