Добавьте кнопку “Очистить чат”, которая будет удалять все сообщения из области чата.
Загрузите скриншот кода и скриншот вывода консоли.
Добавьте кнопку “Отправить сообщение”, которая будет отправлять все сообщения из области чата.
Загрузите скриншот кода и скриншот вывода консоли.
Улучшите внешний вид графического интерфейса чат-бота. Например: измените цвет ответа компьютера и цвет отправляемого сообщения, измените шрифты, измените цвет окна сообщения, измените цвет и шрифт кнопок “Очистить чат” и “Отправить сообщение”.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Простой чат-бот</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div id="chat-box">
<div class="chat-message computer-message">Привет! Я чат-бот. Пишите мне!</div>
</div>
<div class="input-container">
<textarea id="user-input" placeholder="Введите ваше сообщение..."></textarea>
<button id="send-btn">Отправить сообщение</button>
<button id="clear-btn">Очистить чат</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.chat-container {
max-width: 400px;
margin: 20px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 10px;
}
#chat-box {
height: 200px;
overflow-y: scroll;
margin-bottom: 10px;
}
.chat-message {
margin: 5px;
padding: 10px;
border-radius: 10px;
}
.computer-message {
background-color: #f0f0f0;
}
.input-container {
display: flex;
}
textarea {
flex: 1;
padding: 5px;
margin-right: 5px;
}
button {
padding: 5px 10px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
javascript
// Выбираем элементы из DOM
const chatBox = document.getElementById('chat-box');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const clearBtn = document.getElementById('clear-btn');
// Приветственное сообщение от чат-бота
function welcomeMessage() {
const message = createMessageElement("Привет! Я чат-бот. Пишите мне!", "computer-message");
chatBox.appendChild(message);
}
// Функция создания HTML-элемента для сообщения
function createMessageElement(text, className) {
const messageElement = document.createElement('div');
messageElement.textContent = text;
messageElement.classList.add('chat-message', className);
return messageElement;
}
// Функция для отправки сообщения пользователя
function sendMessage() {
const userMessage = userInput.value;
if (userMessage.trim() !== '') {
const message = createMessageElement(userMessage, "user-message");
chatBox.appendChild(message);
userInput.value = '';
}
}
// Функция для очистки чата
function clearChat() {
chatBox.innerHTML = '';
}
// Добавляем обработчики событий
sendBtn.addEventListener('click', sendMessage);
clearBtn.addEventListener('click', clearChat);
// Вызываем приветственное сообщение при загрузке страницы
welcomeMessage();
css
.user-message {
background-color: #d9edff;
}
#chat-box {
background-color: #f5f5f5;
border: 1px solid #ccc;
}
button#send-btn {
background-color: #5cb85c;
}
button#clear-btn {
background-color: #d9534f;
margin-left: 5px;
}
Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет
Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет