📝 Added sandbox (code sketchbook)

2023-04-22 00:41:54 -07:00 · 2023-04-22 00:41:54 -07:00 · b5daf18b1a
commit b5daf18b1a
parent b475595f7f
142 changed files with 100702 additions and 0 deletions
--- a/sandbox/vanilla_spa/app.js
+++ b/sandbox/vanilla_spa/app.js
@ -0,0 +1,28 @@
+/* https://medium.com/altcampus/implementing-simple-spa-routing-using-vanilla-javascript-53abe399bf3c */
+
+const about = '<h1>I am About Page</h1>'
+const contact = '<h1>I am Contact Page</h1>'
+const home = '<h1>I am Home Page</h1>'
+
+const routes = {
+    '/' : home,
+    '/contact' : contact,
+    '/about' : about
+}
+
+const rootDiv = document.getElementById('root')
+console.log(window.location.pathname)
+rootDiv.innerHTML = routes[window.location.pathname]
+
+const onNavigate = (pathname) => {
+    window.history.pushState(
+        {},
+        pathname,
+        window.location.origin + pathname
+    )
+    rootDiv.innerHTML = routes[pathname]
+}
+
+window.popstate = () => {
+    rootDiv.innerHTML = routes[window.location.pathname]
+}
--- a/sandbox/vanilla_spa/index.html
+++ b/sandbox/vanilla_spa/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Simple Vanilla Router</title>
+    </head>
+    <body>
+        <ul>
+            <!-- <li><a href="#" onclick="onNavigate('/about')">About</a></li> -->
+            <!-- <li><a href="#" onclick="onNavigate('/')">Home</a></li> -->
+            <!-- <li><a href="#" onclick="onNavigate('/contact')">Contact</a></li> -->
+            <li onclick="onNavigate('/about')">About</li>
+            <li onclick="onNavigate('/')">Home</li>
+            <li onclick="onNavigate('/contact')">Contact</li>
+        </ul>
+        <div id="root"></div>
+        <script src="app.js"></script>
+    </body>
+</html>