Building a Simple Web-Based Text Messaging App
Objective:
Students will learn how to use HTML, CSS, and JavaScript to create a simple, interactive
messaging interface that simulates sending and displaying messages on a web page.
Tools Needed:
● Code editor (e.g., VS Code)
● Web browser (e.g., Chrome, Firefox)
Instructions:
Part 1: Set Up the HTML Structure
1. Create an index.html file.
2. Add basic HTML boilerplate code.
3. Include:
○ A div for the chat messages
○ A textarea or input for typing messages
○ A button to send messages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Messaging App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div id="chat-box"></div>
<input type="text" id="message-input" placeholder="Type a
message...">
<button onclick="sendMessage()">Send</button>
</div>
<script src="script.js"></script>
</body>
</html>
Part 2: Add CSS for Basic Styling
1. Create a style.css file.
2. Style the chat container and messages for readability.
.chat-container {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
font-family: Arial, sans-serif;
}
#chat-box {
height: 200px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 5px;
margin-bottom: 10px;
background-color: #f9f9f9;
}
#message-input {
width: 70%;
padding: 5px;
}
button {
padding: 6px 12px;
}
Part 3: Add JavaScript for Functionality
1. Create a script.js file.
2. Add functionality to:
○ Read user input
○ Display it as a new message in the chat box
○ Clear the input field after sending
function sendMessage() {
const input = document.getElementById('message-input');
const chatBox = document.getElementById('chat-box');
if (input.value.trim() !== '') {
const message = document.createElement('div');
message.textContent = input.value;
chatBox.appendChild(message);
input.value = '';
chatBox.scrollTop = chatBox.scrollHeight;
}
}
