Virtual Classroom

—

by

in React JS Projects

Basic Virtual Classroom Structure

HTML: Create the structure of the classroom.
CSS: Style the classroom.
JavaScript: Add interactivity.

Example Code

HTML (index.html)

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Classroom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="classroom">
        <header>
            <h1>Virtual Classroom</h1>
            <div class="controls">
                <button id="startButton">Start Class</button>
                <button id="endButton" disabled>End Class</button>
            </div>
        </header>
        <main>
            <div class="chat-box">
                <div id="messages"></div>
                <input type="text" id="messageInput" placeholder="Type a message...">
                <button id="sendButton">Send</button>
            </div>
        </main>
        <footer>
            <p>Class Duration: <span id="timer">00:00</span></p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

cssCopy codebody {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.classroom {
    width: 80%;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

.controls button {
    margin: 5px;
}

main {
    padding: 20px;
}

.chat-box {
    border-top: 1px solid #ccc;
    margin-top: 20px;
}

#messages {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 70%;
    padding: 10px;
}

footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ccc;
}

JavaScript (script.js)

javascriptCopy codelet timerInterval;
let secondsElapsed = 0;

document.getElementById('startButton').addEventListener('click', startClass);
document.getElementById('endButton').addEventListener('click', endClass);
document.getElementById('sendButton').addEventListener('click', sendMessage);

function startClass() {
    document.getElementById('startButton').disabled = true;
    document.getElementById('endButton').disabled = false;
    secondsElapsed = 0;
    timerInterval = setInterval(updateTimer, 1000);
}

function endClass() {
    clearInterval(timerInterval);
    document.getElementById('startButton').disabled = false;
    document.getElementById('endButton').disabled = true;
}

function updateTimer() {
    secondsElapsed++;
    const minutes = Math.floor(secondsElapsed / 60);
    const seconds = secondsElapsed % 60;
    document.getElementById('timer').textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

function sendMessage() {
    const messageInput = document.getElementById('messageInput');
    const messageText = messageInput.value;
    if (messageText.trim()) {
        const messagesDiv = document.getElementById('messages');
        const newMessage = document.createElement('div');
        newMessage.textContent = messageText;
        messagesDiv.appendChild(newMessage);
        messageInput.value = '';
        messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto-scroll
    }
}

How to Run

Create the Files: Create index.html, styles.css, and script.js files in the same directory.
Open in Browser: Open index.html in a web browser.
Interactivity: Click “Start Class” to begin the timer and enable message sending. Messages will appear in the chat box.

Comments

Leave a Reply Cancel reply