Sparling.js Fundamental logic

main.js, spa.json
HamzaElkotp · Sep 21, 2022 · 527e9ab · 527e9ab
commit 527e9ab
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>SPA APP | My Logic</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div class="columns">
+        <aside class="sideBar menu is-primary column is-2 has-background-black-bis is-fullheight" id="sidebar">
+            <ul class="menu-list">
+                <li><a class="is-active is-primary pages" SPAname="home">Home</a></li>
+                <li><a class="pages" SPAname="customers">Customers</a></li>
+                <li><a class="pages" SPAname="links">Links</a></li>
+                <li><a class="pages" SPAname="notifications">Notifications</a></li>
+                <!-- 
+                    i created a meta tag "SPAname" to can access them and add events easly
+                    also to get their content from JSON using this meta tag
+                 -->
+            </ul>
+        </aside>
+
+        <div class="" id="content">
+
+        </div>
+    </div>
+
+
+
+
+
+
+
+
+
+
+
+</body>
+</html>
+<script src='main.js'></script>
diff --git a/logic.txt b/logic.txt
diff --git a/main.css b/main.css
@@ -0,0 +1,55 @@
+html,body {
+    height:100%;
+   }
+body{
+    position: sticky;
+    top: 0;
+}
+
+:root{
+    --bgColor: #111111;
+    --input: #ffffff;
+    --output: #00ffcc;
+    --inpArea: #1d1d1d;
+}
+
+.sideBar{
+    margin-bottom: 0;
+    height: 100vh;
+}
+
+.columns:not(:last-child){
+    margin-bottom: 0 !important;
+}
+
+.menu-list a.is-active.is-primary{
+    background-color: #00d1b2 !important;
+}
+
+.menu-list a{
+    color: #fff !important;
+    margin-bottom: 10px;
+}
+
+.menu-list a:not(.is-primary):hover{
+    background-color: #050505 !important;
+    opacity: 0.8;
+    transition: all 0.3s ;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
@@ -0,0 +1,61 @@
+
+function jsonRead(jsonpages, event){
+    let xhr = fetch(jsonpages);
+    xhr.then((res)=>{
+        return res.json()
+    }).then((data)=>{
+        console.log(data)
+        return data
+    }).then((data)=>{
+        event
+    })
+
+}
+jsonRead("spa.json",eventAdder("SPAname", "SPAurl", "SPAtitle"));
+
+
+function eventAdder(SPAnameKeyName, urlKeyName, titleKeyName){
+    let SPAname = SPAnameKeyName;
+    let SPAurl = urlKeyName;
+    let SPAtitle = titleKeyName;
+    let elements = document.querySelectorAll('[SPAname]')
+    elements.forEach((ele)=>{
+        ele.addEventListener('click',()=>{
+            // document.title = data
+        })
+    })
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/spa.json b/spa.json
@@ -0,0 +1,34 @@
+[
+    {
+        "SPAname" : "home",
+        "SPAurl": "../",
+        "SPAtitle": "SPA APP | My Logic",
+        "Body": {
+
+        }
+    },
+    {
+        "SPAname" : "customers",
+        "SPAurl": "customers",
+        "SPAtitle": "Customers",
+        "Body": {
+
+        }
+    },
+    {
+        "SPAname" : "links",
+        "SPAurl": "links",
+        "SPAtitle": "Links",
+        "Body": {
+
+        }
+    },
+    {
+        "SPAname" : "notifications",
+        "SPAurl": "notifications",
+        "SPAtitle": "Notifications",
+        "Body": {
+
+        }
+    }
+]