Anonymous Message Board

/* Add your CSS styles here */
.message-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.message-form input[type=”text”],
.message-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.message-form button[type=”submit”] {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border: 0;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.message-list {
width: 100%;
max-height: 500px;
overflow-y: auto;
padding: 20px;
}
.message {
background-color: #f2f2f2;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
.message .username {
font-weight: bold;
}
.message .text {
margin-top: 10px;
}

Anonymous Message Board

Send

// Add your JavaScript code here
const usernameInput = document.querySelector(“#username”);
const textInput = document.querySelector(“#text”);
const submitButton = document.querySelector(“#submit”);
const messageList = document.querySelector(“.message-list”);

submitButton.addEventListener(“click”, function (event) {
event.preventDefault();

// Get the values of the inputs
const username = usernameInput.value;
const text = textInput.value;

// Validate the inputs
if (!username || !text) {
alert(“Please enter your username and message.”);
return;
}

// Clear the inputs
usernameInput.value = “”;
textInput.value = “”;

// Create a new message element
const message = document.createElement(“div