update the beyond-beginner, document, events and ui-events page (#59)

Author: Oluwasetemi

pages/beyond-beginner.md

@@ -415,16 +415,11 @@ The Range API allows you to manipulate portions of the document. Perfect for tex
   function highlight() {
     const range = document.createRange()
     const node = document.getElementById('content').firstChild
-    range.setStart(node, 0)
-    range.setEnd(node, 5)
+    range.setStart(node, 0);range.setEnd(node, 5);
     const span = document.createElement('span')
-    span.style.backgroundColor = 'yellow'
-    range.surroundContents(span)
-  }
-
-  function reset() {
-    document.getElementById('content').innerHTML = 'Hello <strong>World</strong>!'
+    span.style.backgroundColor = 'yellow';range.surroundContents(span);
   }
+  function reset() { document.getElementById('content').innerHTML = 'Hello <strong>World</strong>!' }
 </script>
 ```
 

pages/document.md

@@ -76,7 +76,7 @@ clicksStart: 1
 <v-clicks>
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="256"]`)
+const element = document.querySelector(`[data-slidev-no="262"]`)
 const h1 = element.querySelector('h1');
 // console.log(h1.textContent)
 
@@ -136,7 +136,7 @@ You can now traverse the DOM tree using the following based the relationships be
 - `nodeType`, `nodeName`, `nodeValue`
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="258"]`)
+const element = document.querySelector(`[data-slidev-no="264"]`)
 
 // console.log(element.parentNode);console.log(element.parentElement)
 // console.log(element.childNodes.length);console.log(element.children.length)
@@ -169,7 +169,7 @@ clicksStart: 1
 
 ```js {monaco-run} {autorun: false}
 // TODO: Fix the bug on the querySelector
-const table = document.querySelector(`[data-slidev-no="259"]`)
+const table = document.querySelector(`[data-slidev-no="265"]`)
 // console.log(table);
 // console.log(table.rows); console.log(table.tBodies); console.log(table.tHead); console.log(table.tFoot);
 // console.log(table.rows[0]); console.log(table.rows[0].cells); console.log(table.rows[0].cells[0]); //tbody //tr //td //th
@@ -225,7 +225,7 @@ You can search for elements in the DOM tree using the following methods:
 - `matches`, `closest`
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="261"]`);
+const element = document.querySelector(`[data-slidev-no="267"]`);
 // add a id, class to the element
 // console.log(element.id); console.log(element.className); console.log(element.tagName); console.log(element.tagName.toLowerCase());console.log(element.name);
 ```
@@ -244,15 +244,15 @@ clicksStart: 1
 Important classes to understand the node properties includes - `EventTarget`, `Node`, `Element`, `HTMLElement`-`HTMLBodyElement`-other interface discussed in the [HTML Note](https://karatu.oluwasetemi.dev/85), `Document`-`HTMLDocument`-`DocumentFragment`, `CharacterData`-`Text`-`Comment`.
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="262"]`);
+const element = document.querySelector(`[data-slidev-no="268"]`);
 
 console.dir(element)
 ```
 
 ## `innerHTML`, `outerHTML`, `textContent`, `innerText`, `nodeValue` or `data`, `hidden`
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="262"]`);
+const element = document.querySelector(`[data-slidev-no="268"]`);
 
 // console.log(element.innerHTML); console.log(element.outerHTML); console.log(element.textContent); console.log(element.innerText); console.log(element.nodeValue); console.log(element.data); console.log(element.hidden);
 ```
@@ -272,15 +272,15 @@ clicksStart: 1
 Attributes are the properties of the elements. They are the key-value pairs of the elements from the [convertion]{.text-xl.font-fast.text-red title='parsed or read'} of HTML to DOM. You can add your own properties to the element but the html attributes set is fixed according to the [specification](https://html.spec.whatwg.org/){.text-gradient}.
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="263"]`);
+const element = document.querySelector(`[data-slidev-no="269"]`);
 
 // console.log(element.getAttribute('data-slidev-no')); console.log(element.getAttribute('data-slidev-no') === element.dataset.slidevNo); console.log(element.dataset.slidevNo);
 ```
 
 ## `setAttribute`, `removeAttribute`, `hasAttribute`, `attributes`
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="263"]`);
+const element = document.querySelector(`[data-slidev-no="269"]`);
 
 // element.setAttribute('data-slidev-no', '96'); console.log(element.dataset.slidevNo);
 // element.removeAttribute('data-slidev-no'); console.log(element.dataset.slidevNo);
@@ -364,7 +364,7 @@ strong.appendChild(textNode1);
 div.appendChild(strong);
 div.appendChild(textNode2);
 
-const element = document.querySelector(`[data-slidev-no="265"] .default`);
+const element = document.querySelector(`[data-slidev-no="271"] .default`);
 element.prepend(div);
 ```
 
@@ -399,7 +399,7 @@ div.appendChild(textNode2);
 fragment.appendChild(div);
 // fragment.appendChild(div.cloneNode(true));
 
-const element = document.querySelector(`[data-slidev-no="266"] .default`);
+const element = document.querySelector(`[data-slidev-no="272"] .default`);
 element.prepend(fragment);
 ```
 
@@ -421,7 +421,7 @@ You can modify the styles and classes of the elements using the following method
 
 ```js {monaco-run} {autorun: false}
 
-const element = document.querySelector(`[data-slidev-no="267"]`);
+const element = document.querySelector(`[data-slidev-no="273"]`);
 
 element.style.color = 'red'; element.style.backgroundColor = 'yellow'; element.style.padding = '15px'; element.style.border = '1px solid #d6e9c6'; element.style.borderRadius = '4px';
 element.style.setProperty('--uno', 'p-[15px] border border-[#d6e9c6] rounded-[4px] bg-[#dff0d8] text-[#3c763d]');
@@ -449,7 +449,7 @@ You can get the size and position of the elements using the following methods:
 - `scrollWidth`, `scrollHeight`, `scrollLeft`, `scrollTop`
 
 ```js {monaco-run} {autorun: false}
-const element = document.querySelector(`[data-slidev-no="268"] .view-lines`);
+const element = document.querySelector(`[data-slidev-no="274"] .view-lines`);
 
 // console.log(element.offsetWidth); console.log(element.offsetHeight); console.log(element.offsetLeft); console.log(element.offsetTop); console.log(element.offsetParent);
 // console.log(element.clientWidth); console.log(element.clientHeight); console.log(element.clientLeft); console.log(element.clientTop);
@@ -552,7 +552,7 @@ Remember that element appended to a page using coordinates from another element
 
 ```js {monaco-run} {autorun: false}
 // FIX: use the deprecated pageXOffset and pageYOffset with the right values
-const element = document.querySelector(`[data-slidev-no="272"] h1`);
+const element = document.querySelector(`[data-slidev-no="278"] h1`);
 function getCoords(elem) { let box = elem.getBoundingClientRect(); return { top: box.top + window.pageYOffset, right: box.right + window.pageXOffset, bottom: box.bottom + window.pageYOffset, left: box.left + window.pageXOffset }; }
 // console.log(getCoords(element));
 ```

pages/events.md

@@ -92,7 +92,7 @@ interface AddEventListenerOptions extends EventListenerOptions {
 ```
 
 ```js {monaco-run} {autorun: false}
-const elem = document.querySelector(`[data-slidev-no="279"] h1`)
+const elem = document.querySelector(`[data-slidev-no="285"] h1`)
 const handler = () => console.log('Click!')
 elem.addEventListener('click', handler, { once: true })
 // elem.addEventListener('mouseover', handler);
@@ -115,7 +115,7 @@ When an event happens, the browser creates an event object, puts details into it
 <div grid="~ cols-2" gap="2">
 
 ```js {monaco-run} {autorun: false}
-const elem = document.querySelector(`[data-slidev-no="280"] h1`)
+const elem = document.querySelector(`[data-slidev-no="286"] h1`)
 
 elem.addEventListener('click', function (event) {
   // show the event type, the element and the coordinates of the click
@@ -183,7 +183,7 @@ hideInToc: true
 <v-clicks>
 
 ```js {monaco-run} {autorun: false}
-const elem = document.querySelector(`[data-slidev-no="282"] h1`)
+const elem = document.querySelector(`[data-slidev-no="288"] h1`)
 const parent = elem.parentElement
 const grandParent = parent.parentElement
 
@@ -344,15 +344,15 @@ To prevent the default action, we can use `event.preventDefault()`. returning `f
 
 <!-- prettier-ignore -->
 ```js {monaco-run} {lineNumbers: true, autorun: false}
-const link = document.querySelector(`[data-slidev-no="286"] a`)
+const link = document.querySelector(`[data-slidev-no="292"] a`)
 link.addEventListener('click', function(event) {
   event.preventDefault(); event.stopPropagation();
   console.log('Link click!');
 });
 ```
 
 ```js {monaco-run} {autorun: false}
-const h1 = document.querySelector(`[data-slidev-no="286"] h1`)
+const h1 = document.querySelector(`[data-slidev-no="292"] h1`)
 h1.oncontextmenu = function (event) {
   console.log('Content menu clicked')
 }

pages/ui-events.md

@@ -237,57 +237,47 @@ url: https://www.toptal.com/developers/keycode
 ---
 hideInToc: true
 layout: full
-dragPos:
-  square: Left,Top,Width,Height,Rotate
 ---
 
 # Drag'n'Drop with mouse events
 
 <v-clicks>
 
-Drag-and-drop is a user interface interaction that allows users to grab an object and move it to a different location on the screen. This interaction is common in file management on your computer, arranging items in games, or editing tools online. Double click the JS logo and drag.The basic Drag’n’Drop algorithm looks like this:
+Drag-and-drop is a user interface interaction that allows users to grab an object and move it to a different location on the screen. The basic algorithm: (1) `mousedown` - prepare element, (2) `mousemove` - move element, (3) `mouseup` - drop and cleanup.
 
-<div class="overflow-auto h-full pb40 grid grid-cols-[70%_30%] gap-10">
+<div class="overflow-auto h-80">
 
-```js
-ball.onmousedown = function (event) {
-  // (1) prepare to moving: make absolute and on top by z-index
-  ball.style.position = 'absolute'
-  ball.style.zIndex = 1000
-
-  // move it out of any current parents directly into body
-  // to make it positioned relative to the body
-  document.body.append(ball)
-
-  // centers the ball at (pageX, pageY) coordinates
-  function moveAt(pageX, pageY) {
-    ball.style.left = pageX - ball.offsetWidth / 2 + 'px'
-    ball.style.top = pageY - ball.offsetHeight / 2 + 'px'
-  }
-
-  // move our absolutely positioned ball under the pointer
-  moveAt(event.pageX, event.pageY)
-
-  function onMouseMove(event) {
-    moveAt(event.pageX, event.pageY)
-  }
-
-  // (2) move the ball on mousemove
-  document.addEventListener('mousemove', onMouseMove)
-
-  // (3) drop the ball, remove unneeded handlers
-  ball.onmouseup = function () {
-    document.removeEventListener('mousemove', onMouseMove)
-    ball.onmouseup = null
+```html {monaco-run} {autorun: false}
+<div id="container" style="position:relative; height:150px; border:2px dashed #ccc; background:#f9f9f9;">
+  <div id="ball" style="position:absolute; width:50px; height:50px; background:#4CAF50; border-radius:50%; cursor:grab; left:20px; top:20px; display:flex; align-items:center; justify-content:center; color:white; font-size:12px;">Drag</div>
+</div>
+<script>
+  const ball = document.getElementById('ball')
+  ball.onmousedown = function(event) {
+    event.preventDefault() // prevent text selection
+    ball.style.cursor = 'grabbing'
+    const shiftX = event.clientX - ball.getBoundingClientRect().left
+    const shiftY = event.clientY - ball.getBoundingClientRect().top
+    function moveAt(pageX, pageY) {
+      ball.style.left = pageX - shiftX + 'px'
+      ball.style.top = pageY - shiftY + 'px'
+    }
+    function onMouseMove(event) { moveAt(event.pageX, event.pageY) }
+    function onMouseUp() {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+      ball.style.cursor = 'grab'
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
   }
-}
+  ball.ondragstart = () => false // disable native drag
+</script>
 ```
 
-<div class="grid place-items-center">
-<img v-drag="square" class="i-logos-javascript text-7xl "></img>
 </div>
 
-</div>
+**Key points:** Use `mousedown` to start, `mousemove` on document to track, `mouseup` to stop. Disable native drag with `ondragstart = () => false`.
 
 </v-clicks>