Create function to switch between pages.

views/css/register.css

@@ -0,0 +1,7 @@
+#registerPage{
+    flex-direction: column;
+}
+
+#registerPage .link{
+    margin-top: 35px;
+}

views/index.css

@@ -82,4 +82,13 @@
     background: var(--accent);
     margin-top: 35px;
     padding: 10px 0;
+    cursor: pointer;
+}
+
+.link{
+    background: none;
+    border: none;
+    font-size: 22px;
+    cursor: pointer;
+    text-decoration: underline;
 }

views/index.html

@@ -14,7 +14,7 @@
 
     <p id="notifier" style="display:none">Some message here</p>
 
-    <div id="registerPage" class="page">
+    <div id="registerPage" class="page" style="display:none">
         <form id="registerForm" class="standardForm">
             <h1>Create Account</h1>
 
@@ -56,6 +56,14 @@
 
             <button>Create</button>
         </form>
+
+        <button id="registerToLogin" class="link">Log In</button>
+    </div>
+
+    <div id="loginPage" class="page">
+        <h1>Login</h1>
+
+        <button id="loginToRegister" class="link">Register</button>
     </div>
 
     <script src="/index.js"></script>

views/index.js

@@ -1,8 +1,10 @@
 import registerPage from "./js/pages/register.js";
+import loginPage from "./js/pages/login.js";
 
 const notifier = document.getElementById("notifier");
+const pageElements = document.querySelectorAll(".page");
 
-registerPage.render();
+loginPage.render();
 
 window.notify = (type, message)=>{
     notifier.className = "";
@@ -16,5 +18,13 @@ window.notify = (type, message)=>{
 }
 
 window.changePage = (page)=>{
-    console.log("changing page");
+    for(let i = 0; i < pageElements.length; i++){
+        pageElements[i].style.display = "none";
+    }
+    document.getElementById(`${page}Page`).style.display = "flex";
+
+    switch(page){
+        case "login": loginPage.render(); break;
+        case "register": registerPage.render(); break;
+    }
 }

views/js/pages/login.js

@@ -0,0 +1,16 @@
+export default {
+    rendered: false,
+
+    render: function(){
+        if(!this.rendered){
+            this.buttons();
+            this.rendered = true;
+        }
+    },
+
+    buttons: function(){
+        document.getElementById("loginToRegister").addEventListener("click", ()=>{
+            changePage("register");
+        });
+    }
+}

views/js/pages/register.js

@@ -3,11 +3,18 @@ export default {
 
     render: function(){
         if(!this.rendered){
+            this.buttons();
             this.createSubmit();
             this.rendered = true;
         }
     },
 
+    buttons: function(){
+        document.getElementById("registerToLogin").addEventListener("click", ()=>{
+            changePage("login");
+        });
+    },
+
     createSubmit: function(){
         document.getElementById("registerForm").addEventListener("submit", (event)=>{
             event.preventDefault();