This repository has been archived by the owner on Apr 30, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chat.js
105 lines (75 loc) · 2.9 KB
/
chat.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
const navForm = document.querySelector('.nav__name-form');
const nameInput = document.querySelector('.name-form__input');
const chatForm = document.querySelector('.chatbox__inputarea');
const chatInput = document.querySelector('.inputarea__text');
const chatBoxMessages = document.querySelector('.chatbox__messages');
let userName;
function disableChatForm(disable) {
let sendButton = chatForm.querySelector('button');
chatInput.disabled = disable;
sendButton.disabled = disable;
if (disable === true) {
sendButton.classList.remove('inputarea__send-button');
sendButton.classList.add('inputarea__send-button-disabled');
} else {
sendButton.classList.remove('inputarea__send-button-disabled');
sendButton.classList.add('inputarea__send-button');
}
}
function getName(event) {
event.preventDefault();
const name = nameInput.value;
if(!name) return;
userName = name;
nameInput.value = '';
disableChatForm(false);
const messageDiv = createMessage('left', 'Hello, ' + userName + '! What do you like to talk about?', 'Author');
chatBoxMessages.appendChild(messageDiv);
}
function sendText(event) {
event.preventDefault();
const message = chatInput.value;
if (!message) return;
const messageDiv = createMessage('right', message, userName);
chatBoxMessages.appendChild(messageDiv);
chatBoxMessages.scrollTop += 100;
chatInput.value = '';
}
function createElementWithClass(type, cssClass) {
const element = document.createElement(type);
element.classList.add(cssClass);
return element;
}
function currentTime() {
const currentDate = new Date();
return ((currentDate.getHours() < 10) ? '0' : '') + currentDate.getHours() + ':' + ((currentDate.getMinutes() < 10) ? '0' : '') + currentDate.getMinutes();
}
function createMessage(side, textToSend, name) {
let messageDiv = createElementWithClass('div', 'message');
if (side === 'right') {
messageDiv.classList.add('right-message');
} else {
messageDiv.classList.add('left-message');
}
let messageImage = createElementWithClass('div', 'message__image');
let messageArea = createElementWithClass('div', 'message__area');
let messageInfo = createElementWithClass('div', 'message__info');
let nameDiv = createElementWithClass('div', 'info__name');
nameDiv.textContent = name;
let timeDiv = createElementWithClass('div', 'info__time');
timeDiv.textContent = currentTime();
let messageText = createElementWithClass('div', 'message__text');
messageText.textContent = textToSend;
messageDiv.appendChild(messageImage);
messageInfo.appendChild(nameDiv);
messageInfo.appendChild(timeDiv);
messageArea.appendChild(messageInfo);
messageArea.appendChild(messageText);
messageDiv.appendChild(messageArea);
return messageDiv;
}
window.addEventListener('load', function () {
disableChatForm(true);
});
navForm.addEventListener('submit', getName);
chatForm.addEventListener('submit', sendText);