css/chat.css

@@ -63,4 +63,8 @@ button {
 
 #loggeduser {
     padding-top: 2%
+}
+
+#errormessage {
+    padding-top: 2.5%;
 }

css/index.css

@@ -28,7 +28,7 @@ a {
     height: 540px;
     margin-right: 0.3em;
     margin-left: -40%;
-    margin-top: 5%;
+    margin-top: auto;
     margin-bottom: 20%;
     font-size: 250%;
     text-align: center;
@@ -44,18 +44,16 @@ a {
     height: 53rem;
     margin-left: 0.3em;
     margin-right: -30%;
-    margin-top: -8%;
     border: none;
 }
 
 .navigation-list {
-    display: inline-flex;
+    display: flex;
     list-style-type: none;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     padding: 0;
-    margin-left: 5%;
 }
 
 .buttons {

html/chat.html

@@ -31,6 +31,8 @@
         <div id="loggeduser"></div>
 
         <button type="button" id="logoutbutton" onclick="logout()">Logout</button> 
+
+        <div id="errormessage"></div>
         
         <script src="../js/chat.js"></script>
         <script src="../js/logout.js"></script>

js/logout.js

@@ -13,7 +13,7 @@ async function logout() {
     },
     body: JSON.stringify(sendLogoutInfo),
   });
-  printText('Logged out.')
+  document.querySelector("#errormessage").innerHTML = 'Logged out.'
   document.getElementById("logoutbutton").style.display = "none";
   localStorage.removeItem('username')
   username = null;

js/register.js

@@ -52,7 +52,7 @@ form.addEventListener("submit", async function (event) {
 //CHECKS IF A USERNAME IS TAKEN
 async function isUnameTaken() {
 
-  const response = await fetch(`/api/users/${uname}/`);
+  const response = await fetch(`../api/users/${uname}/`);
   const isTaken = await response.json();
 
   //YES THIS IS CONFUSING I KNOW.