Home Explore Help
Sign In
Emmanuil
/
homework
Watch 1
Star 0
Fork 0
Files Issues 7 Pull Requests 0 Wiki
Browse Source

not full hw

Emmanuil 4 years ago
parent
5def42f75b
commit
79bb09bff0
4 changed files with 134 additions and 0 deletions
Split View Show Diff Stats
  1. 27 0
      js-06/chat/index.html
  2. 25 0
      js-06/chat/js.js
  3. 43 0
      js-06/chat/reset/reset.css
  4. 39 0
      js-06/chat/style.css

+ 27 - 0
js-06/chat/index.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
 
+    <link rel="stylesheet" href="reset/reset.css" />
 
+    <link rel="stylesheet" href="style.css" />
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <main class="main">
 
+        <div id="chat"></div>
 
+      </main>
 
+      <div id="user">
 
+        <p>
 
+          <input type="text" id="nick" placeholder="Nick" value="Emmanuil" />
 
+          <input type="text" id="message" placeholder="Message" />
 
+        </p>
 
+        <input type="submit" id="send" value="Send" />
 
+      </div>
 
+    </div>
 
+
 
+    <script src="js.js"></script>
 
+  </body>
 
+</html>

+ 25 - 0
js-06/chat/js.js
View File 

@@ -0,0 +1,25 @@
 
+const socket = io("http://socketchat.fs.a-level.com.ua/")
 
+
 
+socket.on('msg', msg=>messenger(msg));
 
+
 
+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';
 
+
 
+    dataInput.innerText = users.nick + ': ' + users.message;
 
+
 
+    if(users.nick === 'Emmanuil'){
 
+        dataInput.style.display = 'flex';
 
+        dataInput.style.flexDirection = 'row-reverse';
 
+    }
 
+}

+ 43 - 0
js-06/chat/reset/reset.css
View File 

@@ -0,0 +1,43 @@
 
+html, body, div, span, applet, object, iframe,
 
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
+    a, abbr, acronym, address, big, cite, code,
 
+    del, dfn, em, img, ins, kbd, q, s, samp,
 
+    small, strike, strong, sub, sup, tt, var,
 
+    b, u, i, center,
 
+    dl, dt, dd, ol, ul, li,
 
+    fieldset, form, label, legend,
 
+    table, caption, tbody, tfoot, thead, tr, th, td,
 
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
 
+    time, mark, audio, video {
 
+    	margin: 0;
 
+    	padding: 0;
 
+    	border: 0;
 
+    	font-size: 100%;
 
+    	font: inherit;
 
+    	vertical-align: baseline;
 
+    }
 
+    /* HTML5 display-role reset for older browsers */
 
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
 
+    	display: block;
 
+    }
 
+    body {
 
+    	line-height: 1;
 
+    }
 
+    ol, ul {
 
+    	list-style: none;
 
+    }
 
+    blockquote, q {
 
+    	quotes: none;
 
+    }
 
+    blockquote:before, blockquote:after,
 
+    q:before, q:after {
 
+    	content: '';
 
+    	content: none;
 
+    }
 
+    table {
 
+    	border-collapse: collapse;
 
+    	border-spacing: 0;
 
+    }

+ 39 - 0
js-06/chat/style.css
View File 

@@ -0,0 +1,39 @@
 
+* {
 
+  box-sizing: border-box;
 
+}
 
+
 
+body {
 
+  padding: 0 10px 0;
 
+  display: flex;
 
+  justify-content: center;
 
+  background: blue;
 
+}
 
+
 
+.container {
 
+  width: 500px;
 
+  background: rgb(97, 97, 251);
 
+}
 
+
 
+input,
 
+button,
 
+select {
 
+  font-size: 20px;
 
+}
 
+
 
+#nick {
 
+    width: 150px;
 
+}
 
+
 
+#message {
 
+    margin-left: -4px;
 
+    width: 287px;
 
+}
 
+
 
+.main {
 
+  height: 100%;
 
+}
 
+
 
+#user {
 
+  display: flex;
 
+  margin-top: -5px;
 
+}