Virtual Classroom – My Blog

My WordPress Blog

My WordPress Blog

By saqibkhanPosted on September 26, 2024Posted in React JS ProjectsNo Comments

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

Virtual Classroom

Leave a Reply Cancel reply