added css and javascript

Low-Fat-Lard · Oct 1, 2022 · 12e18cb · 12e18cb
1 parent 051a301
commit 12e18cb
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 14 deletions.
diff --git a/.breakpoints b/.breakpoints
@@ -0,0 +1,12 @@
+{
+  "files": {
+    "views/post.ejs": [
+      {
+        "id": "728f013b-b0b8-42e7-afa4-46729eb5cb5d",
+        "line": 12,
+        "version": 1,
+        "index": 190
+      }
+    ]
+  }
+}
diff --git a/index.js b/index.js
@@ -14,28 +14,28 @@ app.set('view engine', 'ejs');
 
 // Set main page
 app.get('/', (req, res) => {
-    app.locals.title = db.get('title');
-    app.locals.postUrl = db.get('posturl');
+  app.locals.title = db.get('title');
+  app.locals.postUrl = db.get('posturl');
 
-    res.render('index');
+  res.render('index');
 })
 
 // Set blog page
 app.get('/post/:posturl', (req, res) => {
-    postUrl = req.params.posturl;
-    dbIndex = db.get('posturl').indexOf(postUrl);
+  postUrl = req.params.posturl;
+  dbIndex = db.get('posturl').indexOf(postUrl);
 
-    if (dbIndex != -1) {
-        app.locals.title = db.get('title')[dbIndex];
-        app.locals.content = db.get('content')[dbIndex];
+  if (dbIndex != -1) {
+    app.locals.title = db.get('title')[dbIndex];
+    app.locals.content = db.get('content')[dbIndex];
 
-        res.render('post');
-    } else {
-        res.send('Page not found :(')
-    }
+    res.render('post');
+  } else {
+    res.send('Page not found :(')
+  }
 });
 
 // Run app
 app.listen(port, () => {
-    console.log('App is live');
+  console.log('App is live');
 });
diff --git a/public/main.js b/public/main.js
@@ -0,0 +1,30 @@
+//Input Search Bar 
+const input = document.querySelector("input");
+input.addEventListener("keyup", (event) => {
+  if (event.key === "Enter") {
+    //Searching mechanism. No real algorithm involved. Just searches through all of it. 
+    search = true;
+    var searchData = [];
+    if (input.value.length > 2) {
+      for (var i = 0; i < jsonData.length; i++) {
+        if (jsonData[i].title.toLowerCase().includes(input.value)) {
+          searchData.push(jsonData[i]);
+        }
+      }
+      if (searchData != "") {
+        error.innerHTML = searchData.length + " matches for " + input.value + "</br>";
+        content.innerHTML = "";
+        for (var i = 0; i < searchData.length; i++) {
+          content.innerHTML += "<div class='box'><span class='floatright'>" + searchData[i].id + "</span><a href='post?id=" + searchData[i].id + "'>" + searchData[i].title + "</a></div>";
+        }
+      } else {
+        //These two lines were the only two lines that worked first try throughout this whole thing.
+        //Epic Programming.
+        error.innerHTML = "No matches";
+        content.innerHTML = "";
+      }
+
+    }
+  }
+});
+console.log("Hello")
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,3 @@
+body{
+  background: blue;
+}
diff --git a/views/index.ejs b/views/index.ejs
@@ -1,11 +1,12 @@
 <html>
     <head>
         <title>Index Page</title>
+        <link rel="stylesheet" href="style.css">
     </head>
 
     <body>
         <h1>Welcome to my blog!</h1>
-
+        <input type="text" placeholder="Search">
         <p>Content: </p>
         <% if (title.length != 0) { %>
             <% for (x = 0; x <= title.length - 1; x++) {%>