Improve chat design

index.js

@@ -23,7 +23,7 @@ const io = socketio(socketHTTPSServer, {
 });
 
 function getCurrentTime() {
-    
+
     function addZero(i) {
         if (i < 10) {
             i = "0" + i;

src/index.html

@@ -66,7 +66,7 @@
     </div>
     <div id="chat">
         <ul id="messages">
-            <li><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
+            <li class="is-received"><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
         </ul>
         <input id="message-input" type="text" placeholder="Écrivez votre message sur Denis ici..." autofocus>
         <img id="send" src="./images/send.png">

src/script.js

@@ -2,9 +2,19 @@ var socket;
 var username = "";
 
 function addMessage(author, message) {
+
     var li = document.createElement("li");
     li.innerHTML = "<b>" + author + ": </b>";
-    li.innerText += message;
+    li.innerHTML += message;
+
+    if(author != username) {
+        li.classList.add("is-received");
+
+    } else {
+        li.classList.add("is-sended");
+    }
+    
+
     document.getElementById("messages").appendChild(li);
     document.getElementById("messages").scrollTop = document.getElementById("messages").scrollHeight;
 }

src/style.css

@@ -116,6 +116,60 @@ body {
 }
 
 
+.is-received {
+	position: relative;
+	background: #e5e5ea;
+	border-radius: .4em;
+    
+    width: 90%;
+    padding: 0.5vh;
+    margin: 1vh;
+    margin-left: 20px;
+    min-height: 30px;
+}
+
+.is-received::after {
+	content: "";
+	position: absolute;
+	left: -10px;
+	top: 50%;
+	width: 10px;
+	height: 0;
+	border: 1.281em solid transparent;
+	border-right-color: #e5e5ea;
+	border-left: 0;
+	border-top: 0;
+	margin-top: -0.641em;
+	margin-left: -1.281em;
+}
+
+.is-sended {
+	position: relative;
+	background: #007bff;
+	border-radius: .4em;
+
+    width: 90%;
+    padding: 0.5vh;
+    margin: 1vh;
+    margin-left: 20px;
+    min-height: 30px;
+}
+
+.is-sended::after {
+	content: "";
+	position: absolute;
+	right: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 0.625em solid transparent;
+	border-left-color: #007bff;
+	border-right: 0;
+	border-bottom: 0;
+	margin-top: -0.312em;
+	margin-right: -0.625em;
+}
+
 @media screen and (max-width: 1024px) {
 
     body {