lunastella/lilachat-frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added chatting functionality

Browse source
This commit is contained in:
Luna 2021-07-22 13:09:02 -07:00
parent b5e9238659
commit a7ab390b32
5 changed files with 145 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -1,7 +1,5 @@
streamchat.code-workspace streamchat.code-workspace
chat.html
chat.js
index.html index.html
chat.css
stream.css stream.css
assets/ assets/
todo.txt

39
chat.css Normal file
View file

@ -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%;
}

36
chat.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<meta name="author" content="Luna">
<meta name="description" content="Maya's Stream Chat">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8">
<link rel="stylesheet" href="chat.css">
<link rel="icon" href="">
</head>
<body>
<h1>Welcome to the chat!</h1>
<div id="chatbox">
<div id="innerchatbox">
</div>
<form>
<input type="text" id="message" name="message" required>
</form>
</div>
<div id="loggeduser"></div>
<script src="chat.js"></script>
</body>
</html>

66
chat.js Normal file
View file

@ -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
}

5
login.js
View file

@ -5,8 +5,6 @@ let uname = document.querySelector('#uname').value;
let pin = document.querySelector('#pin').value; let pin = document.querySelector('#pin').value;
const form = document.querySelector('form'); const form = document.querySelector('form');
const cookies = document.cookie //TEMP
// SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API. // SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API.
form.addEventListener("submit", async function (event) { form.addEventListener("submit", async function (event) {
@ -33,11 +31,10 @@ function login() {
console.log('You have logged in!') console.log('You have logged in!')
document.querySelector("#username").innerHTML = `${uname}` document.querySelector("#username").innerHTML = `${uname}`
document.querySelector("#errormessage").innerHTML = '' document.querySelector("#errormessage").innerHTML = ''
localStorage.setItem("username", `${uname}`);
} }
function incorrectLogin() { function incorrectLogin() {
console.log('Incorrect Login!') console.log('Incorrect Login!')
document.querySelector("#errormessage").innerHTML = 'Incorrect Login.' document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
} }
console.log(cookies) //TEMP