Use log function for Caret API (mdn#40551)

* Use log function for Caret API

* Delete .vscode/settings.json

* moved css out of html

* Update files/en-us/web/api/caretposition/offset/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/caretposition/offsetnode/index.md

* Update files/en-us/web/api/caretposition/getclientrect/index.md

* Update files/en-us/web/api/caretposition/offset/index.md

* Update files/en-us/web/api/caretposition/offsetnode/index.md

* Update index.md

* Update index.md

* Update index.md

---------

Co-authored-by: yashrajbharticybtekk <y.bharti@cybtekk.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: 3 people

files/en-us/web/api/caretposition/getclientrect/index.md

@@ -32,13 +32,24 @@ A {{domxref("DOMRect")}} object.
 <input aria-label="text field" value="Click inside this input field" />
 ```
 
-```css
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
 input {
   width: 100%;
   padding: 10px;
   font-size: 16px;
   box-sizing: border-box;
 }
+
+#log {
+  height: 200px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
 ```
 
 ```js
@@ -47,16 +58,27 @@ document.querySelector("input").addEventListener("click", (event) => {
   const y = event.clientY;
 
   const caret = document.caretPositionFromPoint?.(x, y);
-  if (!caret) return;
+  if (!caret) {
+    log("Not supported");
+    return;
+  }
 
   const rect = caret.getClientRect();
 
-  console.dir("Caret bounding rect:", rect);
-  console.log(`Caret is at (${rect.x.toFixed(2)}, ${rect.y.toFixed(2)})`);
+  log(`Caret bounding rect: ${JSON.stringify(rect)}`);
+  log(`Caret is at (${rect.x.toFixed(2)}, ${rect.y.toFixed(2)})`);
 });
 ```
 
-{{EmbedLiveSample("get_client_rect", "", 300)}}
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+{{EmbedLiveSample("Get the caret's screen position", "", 300)}}
 
 ## Specifications
 

files/en-us/web/api/caretposition/offset/index.md

@@ -18,19 +18,30 @@ An integer.
 
 ## Examples
 
-This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field
+This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field.
 
 ```html
 <input aria-label="text field" value="Click inside this input field" />
 ```
 
-```css
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
 input {
   width: 100%;
   padding: 10px;
   font-size: 16px;
   box-sizing: border-box;
 }
+
+#log {
+  height: 200px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
 ```
 
 ```js
@@ -39,17 +50,28 @@ document.querySelector("input").addEventListener("click", (event) => {
   const y = event.clientY;
 
   const caret = document.caretPositionFromPoint?.(x, y);
-  if (!caret) return;
+  if (!caret) {
+    log("Not supported");
+    return;
+  }
 
   const node = caret.offsetNode;
   const offset = caret.offset;
 
-  console.log("offsetNode:", node);
-  console.log("offset:", offset);
+  log(`offsetNode: ${node}`);
+  log(`offset: ${offset}`);
 });
 ```
 
-{{EmbedLiveSample("offset", "", 300)}}
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+{{EmbedLiveSample("Examples", "", 300)}}
 
 ## Specifications
 

files/en-us/web/api/caretposition/offsetnode/index.md

@@ -16,19 +16,30 @@ A {{domxref("Node")}}.
 
 ## Examples
 
-This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field
+This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field.
 
 ```html
 <input aria-label="text field" value="Click inside this input field" />
 ```
 
-```css
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
 input {
   width: 100%;
   padding: 10px;
   font-size: 16px;
   box-sizing: border-box;
 }
+
+#log {
+  height: 200px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
 ```
 
 ```js
@@ -37,17 +48,28 @@ document.querySelector("input").addEventListener("click", (event) => {
   const y = event.clientY;
 
   const caret = document.caretPositionFromPoint?.(x, y);
-  if (!caret) return;
+  if (!caret) {
+    log("Not supported");
+    return;
+  }
 
   const node = caret.offsetNode;
   const offset = caret.offset;
 
-  console.log("offsetNode:", node);
-  console.log("offset:", offset);
+  log(`offsetNode: ${node}`);
+  log(`offset: ${offset}`);
 });
 ```
 
-{{EmbedLiveSample("offsetnode", "", 300)}}
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+{{EmbedLiveSample("Examples", "", 300)}}
 
 ## Specifications