Messaging System - JSFiddle - JSFiddle - JSFiddle

gfdg

by sol_b

HTML

<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>

<body>
  <div id="conversation">
    <div class="message">
      <label>On insensible possession oh particular </label>
    </div>
    <br />
    <div class="message2">
      <label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. On insensible possession oh particular attachment at excellence in. The books
        arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
    </div>
    <div class="message2">
      <label>On insensible</label>
    </div>
    <div class="message">
      <label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
    </div>
    <div class="message2">
      <label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
    </div>
  </div>
  <div class="parent">
    <div class="user">
      <input id="text" type="textarea" />
      <input id="btn" type="button" value="Send" onclick="Send(this)">
    </div>
    <div class="user2">
      <input id="btn2" type="button" value="Send" onclick="Send(this)">
      <input id="text2" type="textarea" />

    </div>
  </div>

</body>

CSS

body {
  margin: 5% 10% 0% 10%;
  background-color: azure;
}

#conversation {
  width: 100%;
  height: 80%;
  background-color: yellow;
}

.parent {
  white-space: nowrap;
  text-align: center,
}

.user {
  display: inline-block;
  width: 50%;
}

.user2 {
  display: inline-block;
  text-align: right;
  width: 50%;
}

.message,
.message2 {
  max-width: 48%;
  margin: 2px;
  position: relative;
  top: 2%;
  display: block;
}

.message2 {
  margin-left: auto;
  text-align: right;
}

.message label,
.message2 label {
  display: inline-block;
  border-radius: 10px;
  padding: 5px;
    word-wrap: break-word;
  color: white;
  background-color: DodgerBlue;
}

.message2 label {
  background-color: purple;
}


/*23*/

JavaScript

function Send(ele) {
  var br = document.createElement("br");
  var foo = document.getElementById("conversation");
  foo.appendChild(br);
  var para = document.createElement("label");
  var txt;
  if (ele.id == "btn") {
    txt = document.getElementById("text");
    var node = document.createTextNode(txt.value);
    para.appendChild(node);
    var element = document.getElementById("conversation");
    para.className = 'message';
    element.appendChild(para);
  } else {
    txt = document.getElementById("text2");
    var node = document.createTextNode(txt.value);
    para.appendChild(node);
    var element = document.getElementById("conversation");
    para.className = 'message2';
    element.appendChild(para);
  }
}