From a7ab390b32cb5e3842406851fa6603465db93a11 Mon Sep 17 00:00:00 2001 From: Luna Date: Thu, 22 Jul 2021 13:09:02 -0700 Subject: [PATCH] Added chatting functionality --- .gitignore | 6 ++--- chat.css | 39 ++++++++++++++++++++++++++++++++ chat.html | 36 +++++++++++++++++++++++++++++ chat.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ login.js | 7 ++---- 5 files changed, 145 insertions(+), 9 deletions(-) create mode 100644 chat.css create mode 100644 chat.html create mode 100644 chat.js 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