Backend
CORS Error
While our code was working on local, after pushing it wouldn’t work on the actual server. Looking at the frontend console I saw that we had a CORS Error and I added this line of code below as a fix:
CORS(chat_api, resources={r"/api/*": {"origins": "*"}})
Backend API Model Setup
Contributed to creating the data storage features and functions in our backend API Model. What this code does is that it provides a list to store all messages sent to the backend, and then the frontend will send a GET request every few seconds and update with what is in this list.
import requests
chat_data = [] # Data storage (You can replace this with a proper database)
def createChat(chatMsg):
chat_data.append(chatMsg)
return chat_data
def readChat():
return chat_data
Frontend
Light/Dark Mode Feature
I helped with the creation of the light/dark mode feature of our frontend, changing the colors of our chatbox and the spaces around it. The code makes variables for different bodies and areas of the chatroom. It then leads to an if-else statement for whether the button is pressed or not, and proceeds to either change all the colors of the bodies (if button pressed) or runs the else statement (if button is not pressed).
<script>
function toggleMode() {
const body = document.body;
const chatroom = document.querySelector('.chatroom');
const chatroomHeader = document.querySelector('.chatroom-header');
const chatroomMessages = document.querySelector('.chatroom-messages');
const input = document.querySelector('input[type="text"]');
const button1 = document.getElementById('send');
const toggleButton = document.getElementById('toggleModeButton');
const moodCheckButton = document.getElementById('moodCheck');
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
chatroom.style.backgroundColor = '#FFF'; // Light mode background color
chatroomHeader.style.backgroundColor = '#ADD8E6';
chatroomHeader.style.color = '#000';
chatroomMessages.style.backgroundColor = '#FFF';
input.style.backgroundColor = '#ADD8E6';
input.style.color = '#000';
button1.style.backgroundColor = '#ADD8E6';
button1.style.color = '#FFF';
toggleButton.style.backgroundColor = '#ADD8E6';
toggleButton.style.color = '#FFF';
moodCheckButton.style.backgroundColor = '#ADD8E6';
moodCheckButton.style.color = '#FFF';
toggleButton.textContent = 'Dark Mode';
} else {
body.classList.add('dark-mode');
chatroom.style.backgroundColor = '#000'; // Dark mode background color
chatroomHeader.style.backgroundColor = '#301934';
chatroomHeader.style.color = '#000';
chatroomMessages.style.backgroundColor = '#000';
input.style.backgroundColor = '#301934';
input.style.color = '#FFF';
button1.style.backgroundColor = '#301934';
button1.style.color = '#FFF';
toggleButton.style.backgroundColor = '#301934';
toggleButton.style.color = '#FFF';
moodCheckButton.style.backgroundColor = '#301934';
moodCheckButton.style.color = '#FFF';
toggleButton.textContent = 'Light Mode';
}
</script>