Չատ Html Css Javascript

<h1 class="title">Forever Alone Hangout</h1>
<select name='options' id="chose-users">
  <option value="user1" />Me
  <option value="user2" />Jonh Doe
</select>

<div class="chat">
  <header class="header">
    John Doe
    <ul class="navigation">
      <li id="minimize">&#9632;</li>
      <li id="close">&#10007;</li>
    </ul>
  </header>
 
  <div id='content'>
    <div class="user user1">
      <span>
        Hey!!!
      </span>
    </div>
    <div class="user user2">
      <span>
        Yo
      </span>
    </div>
    <div class="user user1">
      <span>
        Yeoman?
      </span>
    </div>
    <div class="user user2">
      <span>
         Allright
      </span>
    </div>
  </div>
  <textarea></textarea>
</div>
<style>
*, *:after, *:before{
  box-sizing: border-box;
}

body{
  background: #2C3E50;
}

.title{
  text-align: center;
  font-size: 3em;
  color: #fff;
  text-shadow: 2px 2px 0 #222;
}

#chose-users{
  margin: 2em;
  border: 0;
  padding: .5em;
}

/* Chat here */
.chat{
  width: 300px;
  position: absolute;
  right: 50px;
  bottom: 0;
}

.header{
  background: #222;
  color: #fff;
  padding: .5em;
  font-size: 1.3em;
  border-radius: 5px 5px 0 0;
}

.navigation{
  list-style: none;
  position: absolute;
  top: -10px;
  right: 10px;
}

.navigation li{
  display: inline-block;
  cursor: pointer;
}

.user{
  position: relative;
  background: #f3f3f3;
  width: 80%;
  margin: 1em .5em;
  padding: .5em;
  box-shadow: 1px 1px 1px #444;
}

.user1{
  float: right;
}

.user1:after{
  content: '';
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  right: 0;
  top: -5px;
  border-bottom: 5px solid #f3f3f3;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.user2{
  float: left;
}

.user2:before{
  content: '';
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  left: 0;
  top: -5px;
  border-bottom: 5px solid #f3f3f3;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

textarea{
  width: 100%;
  border: none;
}

#content{
  background: #ccc;
  overflow: auto;
  height: 400px;
}

/* Helper classes */

.hidden{
 display: none;
}
</style>
















<script type="text/javascript">



var
    content = document.getElementById('content'),
    textarea = document.querySelector('textarea'),
    choseUsers = document.getElementById('chose-users'),
    close = document.getElementById('close'),
    minimize = document.getElementById('minimize');

textarea.addEventListener('keyup', function (e) {
  //# Check if is enter pressed
  if(e.keyCode == 13) {
    actualyUser = choseUsers.value
    addMessage(actualyUser, textarea);
   
    //# Autoscroll divs
    //# http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div
    content.scrollTop = content.scrollHeight;
  }
})

var addMessage = function (user, val) {
  var newDiv = document.createElement('div');
    var span = document.createElement('span');
    span.textContent = val.value;
    textarea.value = '';
    newDiv.appendChild(span);
    content.appendChild(newDiv);
    newDiv.classList.add('user', user);
}

minimize.addEventListener('click', function(){
  content.classList.toggle('hidden');
  textarea.classList.toggle('hidden');
});

close.addEventListener('click', function(){
  document.body.innerHTML = '';
  var img = document.createElement('img');
  img.src = 'http://img3.wikia.nocookie.net/__cb20140508170204/creepypasta/images/5/5c/Sad-forever-alone-face-only-l.png';
  img.alt = 'You!';
  document.body.appendChild(img);
});








 </script>

SHARE