diff --git a/.gitignore b/.gitignore
index 388b7f0..290e44d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,5 @@
streamchat.code-workspace
-chat.html
-chat.js
index.html
-chat.css
stream.css
-assets/
\ No newline at end of file
+assets/
+todo.txt
\ No newline at end of file
diff --git a/chat.css b/chat.css
new file mode 100644
index 0000000..fc3829f
--- /dev/null
+++ b/chat.css
@@ -0,0 +1,39 @@
+html {
+ background: #F7A8B8;
+ text-align: center;
+ font-family: "Lucida Console", "Courier New", monospace;
+}
+
+form {
+ width: 100%
+}
+
+input {
+ padding: 3%;
+}
+
+#chatbox {
+ background-color: white;
+ padding: 1rem;
+ box-shadow: 10px 10px 10px black;
+ width: 40rem;
+ height: 40rem;
+ display: inline-flex;
+ flex-direction: column;
+}
+
+#innerchatbox {
+ background-color: rgba(60, 60, 60, .75);
+ width: 100%;
+ height: 90%;
+ overflow-y: scroll;
+ text-align: left;
+}
+
+#loggeduser {
+ padding-top: 1%
+}
+
+#error {
+ padding-top: 2.5%;
+}
\ No newline at end of file
diff --git a/chat.html b/chat.html
new file mode 100644
index 0000000..4d2f232
--- /dev/null
+++ b/chat.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Chat Room
+
+
+
+
+
+
+
+
+
+
+ Welcome to the chat!
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/chat.js b/chat.js
new file mode 100644
index 0000000..0e43d9a
--- /dev/null
+++ b/chat.js
@@ -0,0 +1,66 @@
+// VARIABLES
+let date = '2021-07-22'
+let messageCount = 0;
+let username = localStorage.getItem('username');
+const form = document.querySelector('form');
+document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
+
+// SEND A MESSAGE
+
+// GRABS MESSAGE FROM FORM & SENDS
+form.addEventListener("submit", async function (event) {
+ event.preventDefault();
+ const formData = new FormData(form);
+
+ formMessage = formData.get('message');
+
+ sendMessage()
+
+})
+
+//SEND MESSAGE FETCH FUNCTION
+
+async function sendMessage() {
+ sendMessageInfo = { "name": username, "body": formMessage, "date": date }
+ fetch('/api/message/send', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(sendMessageInfo),
+ })
+ form.reset()
+}
+
+
+// RECIEVE MESSAGES
+
+let messageUpdate = window.setInterval(fetchMessages, 500);
+
+async function fetchMessages() {
+ const response = await fetch('/api/message/messages.json');
+ const recievedMessages = await response.json();
+ document.getElementById("innerchatbox").innerHTML = ""
+
+ for (const message of recievedMessages) {
+ printText(message.user.bold() + ": " + message.body);
+ }
+
+
+ if (recievedMessages.length != messageCount) {
+ let scroll = document.getElementById("innerchatbox");
+ scroll.scrollTop = scroll.scrollHeight;
+ }
+
+ messageCount = recievedMessages.length;
+}
+
+
+// FUNCTION TO PRINT MESSAGES IN THE CHAT BOX
+
+function printText(text) {
+ let p = document.createElement("p");
+ const div = document.getElementById("innerchatbox");
+ div.appendChild(p)
+ p.innerHTML = text
+}
diff --git a/login.js b/login.js
index 84212b6..e8af605 100644
--- a/login.js
+++ b/login.js
@@ -5,8 +5,6 @@ let uname = document.querySelector('#uname').value;
let pin = document.querySelector('#pin').value;
const form = document.querySelector('form');
-const cookies = document.cookie //TEMP
-
// SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API.
form.addEventListener("submit", async function (event) {
@@ -33,11 +31,10 @@ function login() {
console.log('You have logged in!')
document.querySelector("#username").innerHTML = `${uname}`
document.querySelector("#errormessage").innerHTML = ''
+ localStorage.setItem("username", `${uname}`);
}
function incorrectLogin() {
console.log('Incorrect Login!')
document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
-}
-
-console.log(cookies) //TEMP
\ No newline at end of file
+}
\ No newline at end of file