☕ BocaJS: NodeJS + PostgreSQL

Static Directory

************************
./static/
*************************

The static directory is where we will store our static files, such as front end javascript, css and html. It is basically a place foreach our front end code (that does not require authentication). This presentation is about the back end code, not the front...

So I am just going to give you the code to copy/paste.

new.js

This is our front end JavaScript.

************************
./static/
new.js
*************************

/* Coding Commanders front end JavaScript for BocaJS CMS:
  http://www.codingcommanders.com/bocajs
  */
    function updateCode(){
      document.getElementById("myPage").value = "";
      var count = document.getElementById("count").value;
      var toReturn = "";
      for(var i=0;i<count;i++){
        var t_id = "type" + (i + 1);
        var c_id = "content" + (i + 1);
        var content = document.getElementById(c_id).value;
        var type = document.getElementById(t_id).value;
        var updated = makeHTML(content,type);
        toReturn += updated;
        document.getElementById("myPage").value += toReturn;
      }
    }

function makeHTML(content,type){
      var toReturn = "";
      switch (type) {
        case "paragraph":
          toReturn = "<p>" + content + "</p>";
          break;
        case "heading":
          toReturn = "<h2>" + content + "</h2>";
          break;
        case "terminal":
          toReturn = "<div class='console.text'>" + content + "</div>";
          break;
        default:
          toReturn = content;
      }
      return toReturn;
    };

function myFunction() {
      // id
      var count = document.getElementById("count").value;
      count++;
      // input values
      var line = document.getElementById("content").value;
      var type = document.getElementById("content_type").value;
      // code value

// create elements
      var textarea = document.createElement("TEXTAREA");
      var div = document.createElement("DIV");
      var para = document.createElement("P");
      var br = document.createElement("br");
      var input = document.createElement("input");
      var label = document.createElement("label");

// id values
      var line_id = "content" + count;
      var type_id = "type" + count;
      // set attributes
      div.setAttribute("id", count);
      textarea.setAttribute("id", line_id);
      textarea.setAttribute("name", line_id);
      textarea.setAttribute("class", "consoleText");
      label.setAttribute("class", "label1");
      div.setAttribute("class", "section");
      input.setAttribute("id", type_id);
      input.setAttribute("name", type_id);
      input.setAttribute("class", "consoleText");
      input.setAttribute("type", "text");
      input.setAttribute("value", type);

// content
      var kind = document.createTextNode(type);
      var text = document.createTextNode(line);
      var ct = document.createTextNode("Content Type: ");
      var myCode = makeHTML(line,type);

// append
      textarea.appendChild(text);
      para.appendChild(textarea);
      div.appendChild(para);
      input.appendChild(kind);
      label.appendChild(ct);
      div.appendChild(label);
      div.appendChild(input);
      // get element by ID
      document.getElementById("display").appendChild(div);
      document.getElementById("content").value = "";
      document.getElementById("count").value = count;
      document.getElementById("myPage").value += myCode;
    }

document.getElementById("more").addEventListener("click", myFunction);
    document.getElementById("update").addEventListener("click", updateCod

index.html

This is an index page for our CMS.

************************
./static/
index.html
*************************

<html>
     <head>
       <meta name='viewport' content='width=device-width, initial-scale=1.0'>
       <meta name='author' content="Michelle Selzer">
       <meta name='description' content='This is my lesson content tool!'>
       <link rel='stylesheet' type='text/css' href='style.css'>
       <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
       <title>Content Tool</title>
     </head>
     <body>
       <div class="header">
         <div class="row">
           <span class="black"><a href="/">Home</a><a href="/">Upload Images</a></span><div class="dropdown"><button class="dropbtn">Blogs</button><div class="dropdown-content"><a href="/newBlog">Create Blog</a><a href="/editBlog">Edit Blog</a></div>
         </div>
           <span class="social"> <a href="https://twitter.com/codingCommander" class="fa fa-twitter"> <a href="https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ" class="fa fa-youtube"></a> <a href="https://www.facebook.com/codingcommanders/" class="fa fa-facebook"></a> <a href="https://www.instagram.com/codingcommanders" class="fa fa-instagram"></a> <a target = "shop" href="http://codingcommanders.storenvy.com/" class="fa fa-shopping-cart"></a> <a target="donorbox" href="https://donorbox.org/18be1a20-283d-414d-bae0-fbf1d7c101db" class="fa fa-heart"></a> </span>
         </div>
         <div class="row">
           <img src="https://s33.postimg.cc/pqrmvmq7j/logo.png">
         <h1>Build-a-Blog</h1>
       </div>
       </div>
       <div class="row">
         <h2>Coding Commanders Blog CMS</h2>
         <p>Welcome to Coding Commander's Blog CMS built with NodeJS and PostgreSQL!</p>
       </div>
     </body>
   </html>

style.css

This is the CSS for our app. You can change it later. If you do not know how I have tutorials HTML + CSS.

************************
./static/
style.css
*************************

/*Coding Commander's CSS from
  NodeJS + PostgreSQL BocaJS Presentation
  http://www.codingcommanders.com/bocajs */
  *{box-sizing:border-box}.row::after{content:"";clear:both;display:table}[class*="col-"]{float:left;padding:15px}[class*="col-"]{width:100%}@media only screen and (min-width: 768px){.col-1{width:8.33%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}.col-5{width:41.66%}.col-6{width:50%}.col-7{width:58.33%}.col-8{width:66.66%}.col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}}.topContainer{width:97%;margin-left:1.5%;background-color:#050937;box-shadow:4px 4px 2.5px black;border-radius:9px}.headline{display:inline-block;color:#FFECD8;float:right}.dropbtn{background-color:black;padding:16px;color:lightgreen;font-family:"Lucida Console", monospace;font-size:16px;font-weight:bold;border:none;border-radius:6px;border-style:inset;border-color:darkgrey;border-width:1px;margin-right:5px;box-shadow:4px 4px 2.5px rgba(50,50,50,.5)}.black a{box-shadow:4px 4px 2.5px rgba(50,50,50,.5);margin-right:5px;background-color:black;color:lightgreen;font-family:"Lucida Console", monospace;font-size:16px;font-weight:bold;padding:16px;border-radius:6px;border-style:inset;border-color:darkgrey;border-width:1px}.social{margin:10px}.social a{margin-top:5px;box-shadow:4px 4px 2.5px rgba(50,50,50,.5);margin-right:5px;background-color:black;color:lightgreen;font-size:24px;padding:10px;border-radius:6px;border-style:inset;border-color:darkgrey;border-width:1px}.black a:hover{background-color:lightgreen;color:black}.dropdown{position:relative;display:inline-block}.black{background-color:black;border-radius:6px}.dropdown-content{display:none;position:absolute;background-color:black;opacity:0.8;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;border-radius:6px}.dropdown-content a{color:#E2FAD7;padding:12px 16px;text-decoration:none;display:block}input{background:black;color:#35E309;border-radius:6px;border:none}.dropdown-content a:hover{background-color:#A4FA78;color:black}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:#39DB18;color:black}.social a:hover{background-color:lightgreen;color:black}.greenBut{background-color:#39DB18;color:black;font-size:14px;border-radius:9px;border-color:black;font-weight:bold;padding:5px}.butGreen{color:#39DB18;background-color:black;font-size:14px;border-radius:9px;border-color:#39DB18;font-weight:bold;padding:5px}.butGreen:hover{background-color:#39DB18;color:black}input.greenBut{border-style:solid;border-width:1px;border-color:black}.greenBut:hover{background-color:black;color:#39DB18;border-color:#39DB18}body{color:#ededed;background-color:black;color:black;font-family:helvetica, arial, sans-serif;font-size:16px}img.topImage{max-width:150px;float:left}body a{color:red;font-weight:bold;text-decoration:none;border-radius:6px}body a:hover{color:white;background:black}.redLabel{color:darkred;font-size:16px;font-weight:800}div.bordered{font-size:18px;font-weight:bold;color:#09326B;padding:10px;margin:50px;line-height:1.5;color:black;background-color:white;border-radius:12px;border-style:solid;border-color:black;border-width:4px}p{padding:10px;margin:50px;line-height:1.5;color:#35E309;background:black;border-radius:12px;box-shadow:8px 8px 2.5px #414744}div.bordered a{color:darkred;text-decoration:none}div.bordered a:hover{color:white;background-color:black}h1{text-align:center;border-radius:9px;font-family:'Ubuntu Mono', monospace;font-size:55px;background-color:rgba(0,0,0,.4);color:#A4FA78;font-family:"Lucida Console", monospace;padding:15px;float:right;margin:50px}form.myForm{margin-top:25px;color:#DBFA9E;padding-left:15px;border:none;padding-bottom:15px;background-color:rgba(20, 40, 20, 0.5);padding:25px;border-radius:9px}.consoleOut{font-size:16px;font-style:"Ubuntu Mono", "Lucida Console", monospace}.red{color:red}form{border-style:double;border-color:red;border-width:1px;color:black;padding-left:15px;padding-bottom:15px;background-color:#ededed;padding:25px;border-radius:9px}a.button{background-color:#FAE996;color:red;text-decoration:none;padding:10px;border-radius:12px;border-style:solid;border-color:darkgrey;border-width:2px;display:inline-block}a.button{background-color:lightgrey;color:darkred}.section{margin:10px;padding:5px;border-color:grey;border-style:groove;border-width:1px;border-radius:9px}.caution{padding:20px;color:yellow;background:black;border-color:red;border-width:medium;border-style:double;font-size:26px;font-weight:bold;border-radius:12px}.textType{background:transparent;width:auto;align:center;border:none}.label1{font-size:10px}.topIt{font-size:26px;color:lightgrey;background-color:rgba(2,2,2,.7);padding:20px 10px;margin-left:10%;margin-right:10%;border-radius:9px;text-align:center;box-shadow:8px 8px 2.5px #414744}img{max-width:80%}.consoleText{background-color:black;color:#35E309;line-height:1.5;font-family:"Ubuntu Mono","Lucida Console",monospace;border-radius:9px;width:90%;font-size:16px}.header{width:97%;margin:20px;box-shadow:4px 4px 3.5px rgba(50,50,50,.5);border-radius:9px;border-radius:9px;border-color:rbg(40,80,40);border-width:1px;border-radius:9px;border-style:solid;background:linear-gradient(to right, rgba(30,80,40,.2), rgba(10,20,10,.4))}.header img{float:left;margin-left:50px}.part{background-color:rgba(0, 50, 10, 0.15);padding:25px;margin:25px;border-radius:9px}h2.formHead{color:lightgreen;font-size:36px}.lick{color:lightpink}.cute{background-color:black;color:lightpink;font:18px;font-weight:bold;border-radius:6px;padding:5px;margin:5px}.cute{color:pink;background-color:black}.cute::selection:hover{color:green;background-color:pink;border-radius:6px}.imageBox{margin:10px;padding:10px;max-width:25%}

BocaJS: NodeJS + Postgres

Static Directory

new.js

index.html

style.css