Bymas | Дневник

Привет рассмотрим чат который не требует серверной части, все данные хранятся у вас в браузере.
для удобства создадим три файла(хотя можно и в одном)
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;

 }