Запись - Чат на Local Storage

Чат на Local Storage

Привет рассмотрим чат который не требует серверной части, все данные хранятся у вас в браузере.
для удобства создадим три файла(хотя можно и в одном)
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Local Storage Chat</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="chat">
<div id="message-list"></div>
<form>
<input type="text" id="username-input" placeholder="Enter your name" />
<input type="text" id="message-input" placeholder="Enter your message" />
<button id="send-button">Send</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>

app.js

// Get elements from DOM
const messageList = document.querySelector('#message-list');
const usernameInput = document.querySelector('#username-input');
const messageInput = document.querySelector('#message-input');
const sendButton = document.querySelector('#send-button');

// Check if user is logged in
let username = localStorage.getItem('username');
if (!username) {
username = prompt('Enter your name:');
localStorage.setItem('username', username);
}

// Display welcome message
const welcomeMessage = document.createElement('div');
welcomeMessage.classList.add('message');
welcomeMessage.textContent = `Welcome, ${username}!`;
messageList.appendChild(welcomeMessage);

// Display stored messages
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('message-')) {
const message = JSON.parse(localStorage.getItem(key));
displayMessage(message);
}
}

// Add event listener for send button
sendButton.addEventListener('click', (event) => {
event.preventDefault();
const message = {
username,
text: messageInput.value,
timestamp: Date.now(),
};
localStorage.setItem(`message-${message.timestamp}`, JSON.stringify(message));
displayMessage(message);
messageInput.value = '';
});

// Function to display a message
function displayMessage(message) {
const messageElement = document.createElement('div');
messageElement.classList.add('message');

const headerElement = document.createElement('div');
headerElement.classList.add('message-header');
headerElement.textContent = `${message.username} (${new Date(message.timestamp).toLocaleString()}):`;

const textElement = document.createElement('div');
textElement.textContent = message.text;

messageElement.appendChild(headerElement);
messageElement.appendChild(textElement);

messageList.appendChild(messageElement);
}

style.css

/* Основной контейнер для чата */
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
}

/* Контейнер для списка сообщений */
.message-list-container {
flex: 1;
overflow-y: auto;
}

/* Контейнер для формы отправки сообщения */
.message-form-container {
display: flex;
flex-direction: column;
margin-top: 10px;
}

/* Поле ввода имени пользователя */
.message-form-container input[type="text"] {
margin-bottom: 10px;
padding: 5px;
font-size: 16px;
}

/* Поле ввода текста сообщения */
.message-form-container textarea {
flex: 1;
padding: 5px;
font-size: 16px;
resize: none;
}

/* Кнопка отправки сообщения */
.message-form-container button[type="submit"] {
align-self: flex-end;
padding: 5px 10px;
font-size: 16px;
}

/* Медиа-запрос для маленьких экранов */
@media screen and (max-width: 480px) {
/* Уменьшаем высоту списка сообщений */
.message-list-container {
height: 200px;
}

/* Уменьшаем размер шрифта */
.message-form-container input[type="text"],
.message-form-container textarea,
.message-form-container button[type="submit"] {
font-size: 14px;
}
}
#message-list {
max-height: 300px;
overflow-y: scroll;
}

.message {
margin: 5px 0;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
}

.message-header {
font-weight: bold;
}

#username-input,
#message-input,
#send-button {
margin: 5px;
font-size: 16px;
}

#html, #js, #localstorage

JavaScript

Rəylər 0

Hələ şərh yoxdur

Bağışlayın, şərh yazmaq sizin üçün əlçatan deyil

Ко всем записям

Onlayn istifadəçilər

Maraqlı bloglar