spletne-aplikacije/text-chat
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ura - 03. 12. 2022

Browse Source
This commit is contained in:
Aiken Tine Ahac 2022-12-03 15:56:15 +01:00
parent b23ab042f3
commit a03db8ea54
4 changed files with 95 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.js
View File

@ -15,6 +15,7 @@ io.on('connection', (socket) => {
socket.on('name', (n) => {
console.log(n);
name = n;
socket.broadcast.emit('join', name);
});
socket.on('text', (text) => {

9
static/index.html
View File

@ -4,13 +4,16 @@
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
<script src="/socket.io/socket.io.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<input id="input" type="text" />
<button id="send">Send</button>
<div id="chat"></div>
<chatinput>
<input id="input" type="text" />
<button id="send">Send</button>
</chatinput>
</body>
</html>

31
static/script.js
View File

@ -14,16 +14,39 @@ socket.on('connect', () => {
socket.on('text', (text) => {
console.log(text);
addText(text);
addText(text.name, text.text, false);
});
socket.on('join', (name) => {
console.log(`${name} has joined the chat`);
joinedChat(name);
});
button.addEventListener('click', () => {
socket.emit('text', input.value);
addText(input.value);
addText(name, input.value, true);
input.value = '';
});
function addText(text) {
function addText(name, text, mine) {
const bubble = document.createElement('div');
const p = document.createElement('p');
p.innerText = text;
p.innerHTML = `<b>${name}:</b> ${text}`;
bubble.classList.add('message-bubble');
if (mine) {
bubble.classList.add('my-message');
}
bubble.appendChild(p);
chat.appendChild(bubble);
}
function joinedChat(name) {
const p = document.createElement('p');
p.innerText = `${name} has joined the chat`;
p.style.fontWeight = 'bold';
p.style.color = 'white';
chat.appendChild(p);
}

61
static/styles.css Normal file
View File

@ -0,0 +1,61 @@
body {
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
height: 100vh;
width: 100vw;
background-color: #252525;
margin: 0;
}
chatinput {
display: flex;
flex-direction: row;
bottom: 0;
position: absolute;
margin-bottom: 10px;
}
#send {
margin-left: 10px;
background-color: #247ba0;
color: white;
border: 0px;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#send:hover {
cursor: pointer;
box-shadow: rgba(240, 46, 170, 0.4) -5px 5px,
rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px,
rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
transition: 0.3s;
}
#input {
background-color: transparent;
color: white;
border: 1px solid white;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
}
.message-bubble {
background-color: #984edf;
padding-left: 10px;
padding-right: 10px;
color: white;
border-radius: 5px;
}
.my-message {
background-color: #247ba0;
}