Sandbox: Difference between revisions

Revision as of 15:48, 30 September 2025

Item	Done	Time
Example task 1
Example task 2
Example task 3

 'use strict';

 function formatTime(d) {
   return d.toLocaleTimeString('en-US', {
     hour: 'numeric',
     minute: '2-digit',
     second: '2-digit'
   });
 }

 function findTsBox(cb) {
   var tr = cb.closest('tr');
   return tr ? tr.querySelector('.mw-ts-box') : null;
 }

 document.addEventListener('change', function (ev) {
   var cb = ev.target;
   if (cb.matches && cb.matches('.mw-checkbox-ts')) {
     var tsBox = findTsBox(cb);
     if (tsBox) tsBox.textContent = cb.checked ? formatTime(new Date()) : ;
   }
 }, false);

})(); </script>

@@ Line 5: / Line 5: @@
 |-
 | Example task 1
-| <input type="checkbox" class="mw-checkbox-ts" />
+| <htmltag tagname="input" type="checkbox" class="mw-checkbox-ts"></htmltag>
 | <span class="mw-ts-box"></span>
 |-
 | Example task 2
-| <input type="checkbox" class="mw-checkbox-ts" />
+| <htmltag tagname="input" type="checkbox" class="mw-checkbox-ts"></htmltag>
 | <span class="mw-ts-box"></span>
 |-
 | Example task 3
-| <input type="checkbox" class="mw-checkbox-ts" />
+| <htmltag tagname="input" type="checkbox" class="mw-checkbox-ts"></htmltag>
 | <span class="mw-ts-box"></span>
 |}
-<!--
-  JavaScript: when a checkbox with class "mw-checkbox-ts" is checked, its
-  sibling .mw-ts-box in the same row gets the current time (formatted like 3:08:55 PM).
-  If the checkbox is unchecked the timestamp is cleared.
-  This uses event delegation and works on touch devices.
--->
 <script>
 (function () {
    'use strict';
-  // Format Date as "h:mm:ss AM/PM" (en-US)
    function formatTime(d) {
-     try {
+     return d.toLocaleTimeString('en-US', {
-      return d.toLocaleTimeString('en-US', {
+      hour: 'numeric',
-        hour: 'numeric',
+      minute: '2-digit',
-        minute: '2-digit',
+      second: '2-digit'
-        second: '2-digit'
+     });
-      });
-     } catch (e) {
-      // fallback
-      var H = d.getHours();
-      var h = H % 12 || 12;
-      var m = String(d.getMinutes()).padStart(2, '0');
-      var s = String(d.getSeconds()).padStart(2, '0');
-      var ampm = H < 12 ? 'AM' : 'PM';
-      return h + ':' + m + ':' + s + ' ' + ampm;
-    }
    }
-  // Find the timestamp box in the same table row as the checkbox
    function findTsBox(cb) {
      var tr = cb.closest('tr');
-     if (!tr) return null;
+     return tr ? tr.querySelector('.mw-ts-box') : null;
-    return tr.querySelector('.mw-ts-box');
    }
-  // Handle change events on checkboxes (works for keyboard, mouse, and touch)
    document.addEventListener('change', function (ev) {
-     var target = ev.target;
+     var cb = ev.target;
-     if (!target) return;
+     if (cb.matches && cb.matches('.mw-checkbox-ts')) {
-    if (target.matches && target.matches('.mw-checkbox-ts')) {
+       var tsBox = findTsBox(cb);
-       var tsBox = findTsBox(target);
+       if (tsBox) tsBox.textContent = cb.checked ? formatTime(new Date()) : '';
-       if (!tsBox) return;
-      if (target.checked) {
-        tsBox.textContent = formatTime(new Date());
-      } else {
-        tsBox.textContent = '';
-      }
      }
    }, false);
-  // Some phones/browsers can behave unexpectedly — also handle click/touchend
-  // (this won't duplicate because change already handled the state; this just
-  // provides extra reliability on weird devices)
-  document.addEventListener('click', function (ev) {
-    var t = ev.target;
-    if (t && t.matches && t.matches('.mw-checkbox-ts')) {
-      // tiny delay to let the input state update, then mirror the change handler
-      setTimeout(function () {
-        var tsBox = findTsBox(t);
-        if (!tsBox) return;
-        if (t.checked) tsBox.textContent = formatTime(new Date());
-        else tsBox.textContent = '';
-      }, 5);
-    }
-  }, false);
 })();
 </script>