إنشاء موقع محادثة باستخدام HTML و CSS و JavaScript

تطبيق موقع محادثة هو مشروع ممتع يمكن من خلاله تعلم وتطبيق تقنيات الويب الأساسية مثل HTML وCSS وJavaScript. في هذا المقال، سنقوم ببناء موقع محادثة بسيط يمكنك استخدامه للتواصل مع الأصدقاء أو كقاعدة لبناء تطبيق محادثة أكثر تعقيدًا.

تحضير الهيكل الأساسي باستخدام HTML

<!DOCTYPE html>
<html lang="ar">
<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 id="chat-container">
<div id="chat-box">

</div>
<input type="text" id="message-input" placeholder="أدخل رسالتك هنا...">
<button id="send-button">إرسال</button>
</div>
<script src="script.js"></script>
</body>
</html>

تصميم الموقع باستخدام CSS

الخطوة التالية هي إضافة بعض التنسيقات باستخدام CSS لجعل الموقع يبدو أفضل.

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#chat-container {
width: 100%;
max-width: 400px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
#chat-box {
height: 300px;
padding: 10px;
border-bottom: 1px solid #ddd;
overflow-y: auto;
}
.message {
margin: 5px 0;
padding: 8px;
border-radius: 5px;
background-color: #e2e2e2;
}
.message.user {
background-color: #dcf8c6;
text-align: right;
}
#message-input {
width: calc(100% - 80px);
padding: 10px;
border: none;
border-top: 1px solid #ddd;
}
#send-button {
width: 80px;
padding: 10px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
#send-button:hover {
background-color: #0056b3;
}

إضافة التفاعلية باستخدام JavaScript

الآن بعد أن أصبح لدينا هيكل وتصميم للموقع، سنقوم بإضافة التفاعلية باستخدام JavaScript. سنقوم بتحديث محتوى منطقة المحادثة عند إرسال رسالة جديدة.

document.getElementById('send-button').addEventListener('click', function() {
const messageInput = document.getElementById('message-input');
const message = messageInput.value;
if (message.trim() !== '') {
const chatBox = document.getElementById('chat-box');
const messageElement = document.createElement('div');
messageElement.className = 'message user';
messageElement.textContent = message;
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;
messageInput.value = '';
messageInput.focus();
}
});

إضافة ميزات إضافية (اختياري)

عرض الوقت مع كل رسالة: يمكنك إضافة الوقت بجانب كل رسالة.
مزامنة الرسائل: إذا كنت ترغب في إنشاء تطبيق محادثة فعلي، يمكنك استخدام WebSocket أو Firebase لمزامنة الرسائل بين المستخدمين.