Reformat landing page in new style

views/landingPage/controller.js

@@ -0,0 +1,13 @@
+let controller = {
+    publicStrand: document.querySelector("#publicStrand"),
+    loginStrand: document.querySelector("#loginStrand"),
+    posChoiceStrand: document.querySelector("#posChoiceStrand"),
+
+    clearScreen: function(){
+        this.publicStrand.style.display = "none";
+        this.loginStrand.style.display = "none";
+        this.posChoiceStrand.style.display = "none";
+    }
+}
+
+publicObj.display();

views/landingPage/landing.css

@@ -4,13 +4,12 @@ body{
     font-family: 'Saira', sans-serif;
 }
 
-
-#login{
+#loginStrand{
     display: none;
 }
 
 /* Displaying the choice for the POS system */
-#pos{
+#posChoiceStrand{
     display: none;
     flex-direction: column;
     align-items: center;

views/landingPage/landing.ejs

@@ -10,14 +10,14 @@
 
         <% include ../shared/banner %>
 
-        <div id="main">
+        <div id="publicStrand">
             <button>Login</button>
-            <button onclick="landingPage.choosePos()">Register</button>
+            <button onclick="posChoiceObj.display()">Register</button>
         </div>
 
-        <form id="login"></form>
+        <form id="loginStrand"></form>
 
-        <div id="pos">
+        <div id="posChoiceStrand">
             <h1>Choose your POS System</h1>
             <div class="cards">
                 <a href="/merchant/new/clover">
@@ -32,6 +32,8 @@
 
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
-        <script src="/landingPage/landing.js"></script>
+        <script src="/landingPage/public.js"></script>
+        <script src="/landingPage/posChoice.js"></script>
+        <script src="/landingPage/controller.js"></script>
     </body>
 </html>

views/landingPage/landing.js

@@ -1,17 +0,0 @@
-let landingPage = {
-    mainComp: document.querySelector("#main"),
-    loginComp: document.querySelector("#login"),
-    posComp: document.querySelector("#pos"),
-
-    //Remove all displayed components
-    clearScreen: function(){
-        this.mainComp.style.display = "none";
-        this.loginComp.style.display = "none";
-        this.posComp.style.display = "none";
-    },
-
-    choosePos: function(){
-        this.clearScreen();
-        this.posComp.style.display = "flex";
-    }
-}

views/landingPage/posChoice.js

@@ -0,0 +1,6 @@
+let posChoiceObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.posChoiceStrand.style.display = "flex";
+    }
+}

views/landingPage/public.js

@@ -0,0 +1,6 @@
+let publicObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.publicStrand.style.display = "flex";
+    }
+}