Passion Project Contributions • 5 min read

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>