edge cases on the web-- who woulda thought!?

jazzypants1989 · Oct 23, 2023 · 304f476 · 304f476
1 parent 0490757
commit 304f476
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 241 deletions.
diff --git a/examples/if2.html b/examples/if2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TakeWhile Demo</title>
+    <style>
+      .highlight {
+        background-color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <span>1</span>
+    <span>2</span>
+    <span>3</span>
+    <span>4</span>
+    <span>5</span>
+    <span>6</span>
+    <span>7</span>
+
+    <script type="module">
+      import { $$, $ } from "../index.js"
+
+      const elems = $$("span")
+        .if({
+          is: (el) => parseInt(el.textContent) % 2 === 0,
+          then: (el) => el.css("background-color", "yellow"),
+          or: (el) => el.css("background-color", "pink"),
+        })
+        .css("border", "2px solid black")
+        .do((el) => console.log(el.textContent))
+    </script>
+  </body>
+</html>
diff --git a/examples/retries.html b/examples/retries.html
diff --git a/examples/sanitize.html b/examples/sanitize.html
@@ -11,19 +11,19 @@
       <p class="paragraph">This is another paragraph.</p>
     </div>
     <script type="module">
-      import { $, $$ } from "../index.js" // Adjust the path to where you've stored the module.
-      // // 2. Using $$ utility
+      import { $, $$ } from "../index.js"
+
       // const paragraphs = $$(".paragraph")
       // paragraphs.css("color", "blue")
 
       // contentDiv.attach(
       //   '<p class="prepended">This is a prepended paragraph.</p>',
-      //   { position: "after" }
+      //   { position: "prepend" }
       // )
 
       //
       //       contentDiv.attach(
-      //   '<p class="attached">This is an attached paragraph.</p>'
+      //   '<p class="attached">This is an appended paragraph.</p>',
       // )
 
       const unsafeHtml =

diff --git a/examples/send.html b/examples/send.html
@@ -18,7 +18,7 @@
       $("#submitButton").on("click", async (event) => {
         $("#submitButton").send({
           event,
-          body: "BOOTY BUTT YOOO!",
+          body: "HELLO TO YOU MY FRIEND!!",
           json: true,
           onSuccess: (response) => {
             console.log(response)

diff --git a/examples/send3.html b/examples/send3.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wrapped Fetch Test</title>
+  </head>
+  <body>
+    <div id="target">Data will appear here...</div>
+
+    <button>Fetch Data</button>
+
+    <script type="module">
+      import { $, $$ } from "../index.js"
+      const target = $("#target")
+
+      $("button").on("click", () => {
+        $("button").send({
+          url: "http://localhost:3000/data",
+          onWait: () => target.text("Fetching..."),
+          onSuccess: (data) => target.text(`Data: ${data}`),
+          onError: (error) => target.text(`Error: ${error}`),
+          retries: 5,
+          retryDelay: 1000,
+          waitTime: 500,
+          method: "GET",
+          body: "This will get ignored on GET/HEAD requests",
+        })
+      })
+    </script>
+  </body>
+</html>
diff --git a/examples/server.js b/examples/server.js
@@ -143,6 +143,8 @@ let firstRequestTime = null
 const server = http.createServer((req, res) => {
   const parsedUrl = new url.URL(req.url, `http://${req.headers.host}`)
 
+  console.log(req.method, req.url)
+
   // Set CORS headers
   res.setHeader("Access-Control-Allow-Origin", "*")
   res.setHeader("Access-Control-Allow-Methods", "GET")

diff --git a/examples/takeWhile.html b/examples/takeWhile.html
@@ -22,29 +22,14 @@
     <script type="module">
       import { $$, $ } from "../index.js"
 
-      // const span = $$("span")
-      //   .takeWhile((el) => parseInt(el.textContent) > 1, true)
-      //   .css("background-color", "yellow")
-
-      // span.refresh()
-
-      // span.text(3)
-
       const elems = $$("span")
         .takeWhile((el) => parseInt(el.textContent) < 5)
         .css("background-color", "yellow")
         .do((el) => console.log(el.textContent))
         .refresh()
         .css("border", "2px solid black")
-
-      // const elems = $$("span")
-      //   .if({
-      //     is: (el) => parseInt(el.textContent) % 2 === 0,
-      //     then: (el) => el.css("background-color", "yellow"),
-      //     or: (el) => el.css("background-color", "pink"),
-      //   })
-      //   .css("border", "2px solid black")
-      //   .do((el) => console.log(el.textContent))
+        .takeWhile((el) => parseInt(el.textContent) > 5, true)
+        .css("background-color", "pink")
     </script>
   </body>
 </html>