done

js-06/chat/index.html

@@ -18,10 +18,37 @@
           <input type="text" id="nick" placeholder="Nick" value="Emmanuil" />
           <input type="text" id="message" placeholder="Message" />
         </p>
-        <input type="submit" id="send" value="Send" />
+        <input type="submit" id="send" value="Send"/>
+      </div>
+
+      <div id="emojis">
+        <div>
+          <span id="e_1" class="emoji" data-src="graphics/emojis/bowtie.png"
+            ><img
+              src="bowtie.png"
+              alt=""/></span
+          >:<span
+            class="name"
+            data-alternative-name="classy, bow, face, formal, fashion, suit, magic, circus"
+            >bowtie</span
+          >:
+        </div>
+        <!-- <div>
+          <span id="e_2" class="emoji" data-src="graphics/emojis/smile.png"
+            ><img
+              src="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/smile.png"
+              alt="" /></span
+          >:<span
+            class="name"
+            data-alternative-name="happy, cheerful, face, joy, funny, haha, laugh, like"
+            >smile</span
+          >:
+        </div> -->
+        
       </div>
     </div>
 
     <script src="js.js"></script>
+    <!-- <script src="smiles.json"></script> -->
   </body>
 </html>

js-06/chat/js.js

@@ -1,25 +1,51 @@
-const socket = io("http://socketchat.fs.a-level.com.ua/")
+const socket = io("http://socketchat.fs.a-level.com.ua/");
 
-socket.on('msg', msg=>messenger(msg));
+socket.on("msg", (msg) => messenger(msg));
 
-send.onclick = function(){
-    socket.emit('msg', {nick: nick.value, message: message.value});
-}
+send.onclick = function () {
+  socket.emit("msg", { nick: nick.value, message: message.value });
+};
+
+function messenger(users) {
+  var chat = document.getElementById("chat");
+  var dataInput = document.createElement("p");
+  chat.appendChild(dataInput);
+
+  dataInput.style.padding = "8px";
+  dataInput.style.margin = "2px 20px";
+  dataInput.style.color = "white";
+  dataInput.style.fontWeight = "bold";
 
-function messenger(users){
-    var chat = document.getElementById('chat');
-    var dataInput = document.createElement('p');
-    chat.appendChild(dataInput);
 
-    dataInput.style.padding = '8px';
-    dataInput.style.margin = '2px 20px';
-    dataInput.style.color = 'white';
-    dataInput.style.fontWeight = 'bold';
+  dataInput.innerText = users.nick + ": " + users.message;
+
+  if (users.nick === "Emmanuil") {
+    dataInput.style.display = "flex";
+    dataInput.style.flexDirection = "row-reverse";
+  }
+}
 
-    dataInput.innerText = users.nick + ': ' + users.message;
+emojis.onclick = function () {
+  if ((message.value = emojis.innerText)) {
+    var img1 = new Image();
+    img1.src = smiles.bowtie;
+    img1.alt = "alt";
+    message.appendChild(img1)
+  } else alert("by");
+};
 
-    if(users.nick === 'Emmanuil'){
-        dataInput.style.display = 'flex';
-        dataInput.style.flexDirection = 'row-reverse';
-    }
-}
+var smiles = {
+  bowtie: "bowtie.png",
+  smile: "graphics/emojis/smile.png",
+  simple_smile: "graphics/emojis/simple_smile.png",
+  laughing: "graphics/emojis/laughing.png",
+  blush: "graphics/emojis/blush.png",
+  smiley: "graphics/emojis/smiley.png",
+  relaxed: "graphics/emojis/relaxed.png",
+  // "smirk": "graphics/emojis/smirk.png",
+  // "heart_eyes": "graphics/emojis/heart_eyes.png",
+  // "kissing_heart": "graphics/emojis/kissing_heart.png",
+  // "kissing_closed_eyes": "graphics/emojis/kissing_closed_eyes.png",
+  // "flushed": "graphics/emojis/flushed.png",
+  // "relieved": "graphics/emojis/relieved.png"
+};

js-06/chat/style.css

@@ -21,12 +21,12 @@ select {
 }
 
 #nick {
-    width: 150px;
+  width: 150px;
 }
 
 #message {
-    margin-left: -4px;
-    width: 287px;
+  margin-left: -4px;
+  width: 287px;
 }
 
 .main {
@@ -37,3 +37,11 @@ select {
   display: flex;
   margin-top: -5px;
 }
+
+.emojis {
+  display: flex;
+}
+
+.emoji img {
+  width: 50px;
+}