Created
January 29, 2018 13:25
-
-
Save Xananax/743c05746ec43aaf62e8a21f3de04350 to your computer and use it in GitHub Desktop.
Simple chat interface example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body{ | |
| padding:0; | |
| margin:0; | |
| } | |
| .main{ | |
| position: absolute; | |
| display: block; | |
| } | |
| #wrapper{ | |
| height:100%; | |
| width:100%; | |
| } | |
| #output{ | |
| top:0; | |
| bottom:100px; | |
| width:100%; | |
| } | |
| #input{ | |
| background-color:green; | |
| bottom:0; | |
| height:100px; | |
| width:100%; | |
| } | |
| #text{ | |
| background-color: orange; | |
| top:0; | |
| left:0; | |
| right:200px; | |
| height:100%; | |
| width:auto; | |
| padding:10px; | |
| box-sizing: border-box; | |
| overflow:auto; | |
| margin-bottom:20px; | |
| } | |
| #users{ | |
| background: teal; | |
| top:0; | |
| right:0; | |
| width:200px; | |
| height:100%; | |
| overflow:auto; | |
| } | |
| .chat{ | |
| width:100%; | |
| background:red; | |
| float:left; | |
| margin-bottom:10px; | |
| } | |
| .chat .user{ | |
| width:50px; | |
| height:100%; | |
| float:left; | |
| } | |
| .chat .user .user-name{ | |
| width:100%; | |
| background:red; | |
| } | |
| .user-name{ | |
| float:left; | |
| } | |
| #users .user-name{ | |
| margin-left:10px; | |
| } | |
| .user{ | |
| float:left; | |
| width:100%; | |
| } | |
| #users .user{ | |
| margin-bottom:10px; | |
| } | |
| .user-icon{ | |
| width:50px; | |
| height:50px; | |
| background: blue; | |
| float:left; | |
| } | |
| .chat .text{ | |
| float:left; | |
| margin-left:10px; | |
| } | |
| #input button{ | |
| position:absolute; | |
| right:0; | |
| width:100px; | |
| height:100%; | |
| } | |
| #input #textbox{ | |
| position:absolute; | |
| left:0; | |
| right:100px; | |
| background-color:greenyellow; | |
| height:100%; | |
| } | |
| #textbox input{ | |
| width:100%; | |
| padding:0; | |
| margin:0; | |
| border:0; | |
| font-size: 2em; | |
| margin-top:20px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Chat</title> | |
| <link rel="stylesheet" href="index.css"> | |
| </head> | |
| <body> | |
| <div class="main" id="wrapper"> | |
| <div class="main" id="output"> | |
| <div class="main" id="text"> | |
| </div> | |
| <div class="main" id="users"> | |
| </div> | |
| </div> | |
| <div class="main" id="input"> | |
| <div id="textbox"> | |
| <input id="user-input" type="text" placeholder="write here"> | |
| </div> | |
| <button id="submit">Ok</button> | |
| </div> | |
| </div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const textContainer = document.getElementById('text') | |
| const usersContainer = document.getElementById('users') | |
| const submitButton = document.getElementById('submit') | |
| const userInput = document.getElementById('user-input') | |
| const userName = "xananax" | |
| const createChatBox = function(username,text){ | |
| const markup = '<div class="chat">' | |
| +'<div class="user">' | |
| +'<div class="user-icon">U</div>' | |
| +'<div class="user-name">'+username+'</div>' | |
| +'</div>' | |
| +'<div class="text">'+text+'</div>' | |
| +'</div>' | |
| ; | |
| textContainer.innerHTML+=markup; | |
| textContainer.scrollTop = textContainer.scrollHeight; | |
| } | |
| createChatBox("ewwink","abcde"); | |
| createChatBox("paleite","shortest valid HTML5 that passed http://validator.w3.org"); | |
| createChatBox("muri235","The last ending tags are implicit and as such, removing them is perfectly valid:"); | |
| createChatBox("paleite","cfsdf sdf sdf sdfs df"); | |
| function createChatBoxFromUserInput(){ | |
| const text = userInput.value; | |
| if(!text){return;} | |
| createChatBox(username,text); | |
| userInput.value="" | |
| userInput.focus() | |
| } | |
| window.addEventListener('keyup',function(evt){ | |
| if(evt.keyCode == 13){ | |
| createChatBoxFromUserInput() | |
| } | |
| }) | |
| submitButton.addEventListener('click',function(evt){ | |
| createChatBoxFromUserInput() | |
| }) | |
| function createUser(username){ | |
| console.log('USER-->',username) | |
| const markup = '<div class="user">' | |
| +'<div class="user-icon">U</div>' | |
| +'<div class="user-name">'+username+'</div>' | |
| +'</div>' | |
| usersContainer.innerHTML+=markup | |
| } | |
| const users = [ | |
| "muri235", | |
| "marianzburlea", | |
| "ewwink", | |
| "paleite" | |
| ] | |
| for(let i = 0; i < users.length; i++){ | |
| createUser(users[i]) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment