Basic interest calculator example.

Author: acchou

scratch.css

@@ -300,3 +300,49 @@ p {
 .matrixcontainer {
     margin: auto;
 }
+
+:focus {
+    outline: 1px dashed green;
+}
+
+.view {
+    border: 1px solid black;
+    width: 400px;
+    height: 200px;
+}
+
+form table td {
+    border: none;
+}
+
+form td {
+    width: 200px;
+    text-align: right;
+}
+
+#diagram td select,
+#diagram td input {
+    text-align: left;
+    width: 150px;
+}
+
+#diagram {
+    padding: 20px;
+    margin-top: 50px;
+    margin-left: 10%;
+}
+
+#diagram td {
+    vertical-align: bottom;
+    text-align: center;
+    padding: 10px;
+    border: none;
+}
+
+#diagram th {
+    border: none;
+}
+
+#diagram div {
+    margin: auto;
+}

scratch.html

@@ -597,6 +597,79 @@ <h1>Neptune</h1>
     </div>
 
     <div id="preload" class="scratch"></div>
+
+    <div class="scratch">
+        <p>Add an option "Jazz" using JS.</p>
+        <select id="genres">
+            <option value="rock">Rock</option>
+            <option value="blues" selected>Blues</option>
+          </select>
+    </div>
+
+    <div class="scratch">
+        <div class="codeblock">codeblock 1</div>
+        <div class="codeblock">codeblock 2</div>
+        <div class="codeblock">codeblock 3</div>
+        <div class="codeblock">codeblock 4</div>
+    </div>
+
+    <div class="scratch">
+        <div id="view" class="view">Text</div>
+    </div>
+
+    <div class="scratch">
+        Hotkey example: press '<b>q</b>' and '<b>w</b>' simultaneously.
+    </div>
+
+    <div class="scratch">
+        <form name="calculator">
+            <table>
+                <tr>
+                    <td>Initial deposit</td>
+                    <td>
+                        <input name="money" type="number" value="10000" required>
+                    </td>
+                </tr>
+                <tr>
+                    <td>How many months?</td>
+                    <td>
+                        <select name="months">
+                            <option value="3">3 (minimum)</option>
+                            <option value="6">6 (half-year)</option>
+                            <option value="12" selected>12 (one year)</option>
+                            <option value="18">18 (1.5 years)</option>
+                            <option value="24">24 (2 years)</option>
+                            <option value="30">30 (2.5 years)</option>
+                            <option value="36">36 (3 years)</option>
+                            <option value="60">60 (5   years)</option>
+                          </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Interest per year?</td>
+                    <td>
+                        <input name="interest" type="number" value="5" required>
+                    </td>
+                </tr>
+            </table>
+        </form>
+        <table id="diagram">
+            <tr>
+                <th>Was:</th>
+                <th>Becomes:</th>
+            </tr>
+            <tr>
+                <th id="money-before"></th>
+                <th id="money-after"></th>
+            </tr>
+            <td>
+                <div style="background: red;width:40px;height:100px" id="height-before"></div>
+            </td>
+            <td>
+                <div style="background: green;width:40px;height:0" id="height-after"></div>
+            </td>
+        </table>
+    </div>
 </body>
 
 </html>

script.ts

@@ -20,7 +20,7 @@ interface HTMLCollection {
 HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
 
 //
-// Functions for total document height and width
+// Utility functions
 //
 function documentScrollHeight(): number {
     return Math.max(
@@ -75,6 +75,25 @@ function preloadImages(sources: string[], callback: (images: HTMLImageElement[])
     }
 }
 
+function copyStyle(from: HTMLElement, to: HTMLElement) {
+    let style = getComputedStyle(from);
+    to.style.width = style.width;
+    to.style.height = style.height;
+    to.style.border = style.border;
+    to.style.padding = style.padding;
+    to.style.margin = style.margin;
+    to.style.font = style.font;
+}
+
+function isSubset<T>(subset: Set<T>, ofSet: Set<T>) {
+    for (let x of subset) {
+        if (!ofSet.has(x)) {
+            return false;
+        }
+    }
+    return true;
+}
+
 // This is where the example code starts. Only do this after the
 // load event to ensure image sizes are known, otherwise some code
 // fails to work.
@@ -834,6 +853,78 @@ window.addEventListener("load", () => {
             document.addEventListener("scroll", imageLoader);
         }
     }
+
+    //
+    // Add an option to select
+    //
+
+    let genres = document.getElementById("genres") as HTMLSelectElement;
+    genres.options.add(new Option("Jazz", "jazz", true, true), 0);
+
+    //
+    // Add a tabindex (to allow focusing) to all codeblocks
+    //
+    let codeblocks = document.querySelectorAll(".codeblock");
+    let tabIndex = 1;
+    for (let codeblock of codeblocks) {
+        codeblock.setAttribute("tabindex", String(tabIndex++));
+    }
+
+    //
+    // Turn a div into an editable textarea
+    //
+    let view = document.getElementById("view") as HTMLElement;
+    view.tabIndex = 1;
+    view.addEventListener("focus", () => {
+        let textArea = document.createElement("textarea");
+        textArea.textContent = view.innerHTML;
+        copyStyle(view, textArea);
+        textArea.addEventListener("blur", () => {
+            view.innerHTML = textArea.value;
+            textArea.after(view);
+            textArea.remove();
+        });
+        view.after(textArea);
+        view.remove();
+        textArea.focus();
+    });
+
+    //
+    // Interest calculator that updates immediately on every input value change
+    //
+    let heightAfter = document.getElementById("height-after") as HTMLElement;
+    let heightBefore = document.getElementById("height-before") as HTMLElement;
+    let moneyBefore = document.getElementById("money-before") as HTMLElement;
+    let moneyAfter = document.getElementById("money-after") as HTMLElement;
+    let form = document.forms[0];
+    let initialDeposit = form.money as HTMLInputElement;
+    let months = form.months as HTMLSelectElement;
+    let interest = form.interest as HTMLInputElement;
+
+    function updateChart() {
+        let before = Number(initialDeposit.value);
+        if (before) {
+            moneyBefore.textContent = "$" + before;
+        } else {
+            moneyBefore.textContent = "$0";
+        }
+
+        let multiple = Math.pow(1 + Number(interest.value) / 100, Number(months.value) / 12);
+        if (multiple > 0) {
+            let after = Math.round(before * multiple);
+            moneyAfter.textContent = "$" + after;
+            heightAfter.style.height =
+                heightBefore.getBoundingClientRect().height * (after / before) + "px";
+        } else {
+            heightAfter.style.height = "0";
+            moneyAfter.textContent = "$0";
+        }
+    }
+
+    initialDeposit.addEventListener("input", () => updateChart());
+    months.addEventListener("input", () => updateChart());
+    interest.addEventListener("input", () => updateChart());
+    updateChart();
 });
 
 //
@@ -867,3 +958,21 @@ function testLoaded(images: HTMLImageElement[]) {
 
 // every image is 100x100, the total width should be 300
 preloadImages(sources, testLoaded);
+
+//
+// Extended Hotkeys example
+//
+function runOnKeys(f: () => void, ...codes: string[]) {
+    let currentlyPressedKeys = new Set();
+    let hotKeys = new Set(codes);
+    document.addEventListener("keydown", event => {
+        currentlyPressedKeys.add(event.code);
+        if (isSubset(hotKeys, currentlyPressedKeys)) {
+            f();
+            currentlyPressedKeys.clear();
+        }
+    });
+    document.addEventListener("keyup", event => currentlyPressedKeys.delete(event.code));
+}
+
+runOnKeys(() => alert("Pressed hotkey!"), "KeyQ", "KeyW");