HTML (index.html)
<!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="container">
<header>
<h1>Virtual Classroom</h1>
</header>
<main>
<div class="chat">
<h2>Chat</h2>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
</div>
<div class="participants">
<h2>Participants</h2>
<ul id="participantList"></ul>
</div>
<div class="whiteboard">
<h2>Whiteboard</h2>
<canvas id="canvas"></canvas>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
}
main {
display: flex;
flex: 1;
padding: 1rem;
}
.chat, .participants, .whiteboard {
border: 1px solid #ccc;
padding: 1rem;
margin: 0 1rem;
flex: 1;
}
#canvas {
border: 1px solid #000;
width: 100%;
height: 300px;
}
JavaScript (script.js)
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const participantList = document.getElementById('participantList');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let participants = ['Alice', 'Bob', 'Charlie'];
// Function to display messages
function sendMessage() {
const message = messageInput.value;
if (message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
messageInput.value = '';
}
}
// Function to update participant list
function updateParticipants() {
participantList.innerHTML = '';
participants.forEach(participant => {
const li = document.createElement('li');
li.textContent = participant;
participantList.appendChild(li);
});
}
// Initial population of participants
updateParticipants();
// Basic whiteboard functionality
let painting = false;
canvas.addEventListener('mousedown', () => {
painting = true;
ctx.beginPath();
});
canvas.addEventListener('mouseup', () => {
painting = false;
ctx.closePath();
});
canvas.addEventListener('mousemove', (event) => {
if (!painting) return;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
});
// Call this to add new participants (for demonstration)
setTimeout(() => {
participants.push('Diana');
updateParticipants();
}, 5000);
Explanation
- HTML Structure: This sets up the layout for the classroom, including sections for chat, participants, and a whiteboard.
- CSS Styling: Basic styling to make the classroom visually appealing and organized.
- JavaScript Functionality:
- The
sendMessagefunction allows users to type and send messages to the chat area. - The
updateParticipantsfunction manages the list of participants. - Basic drawing functionality on the whiteboard using the HTML
<canvas>element.
- The
How to Run
- Create three files:
index.html,styles.css, andscript.js. - Copy the respective code into each file.
- Open
index.htmlin your web browser to see the virtual classroom in action.
Basic Virtual Classroom Structure