task3

Css exam Telerik Academy

by Naydenov_it

HTML

<body>
  <div id="root">
    <h1>Welcome to the Chat!</h1>
    <div id="me" class="chat-container">
      <h2>Doncho Minkov's chat</h2>
      <div>
        <div class="messages">
          <ul>
            <li class="me"><strong>by me</strong><span>Hello Ivaylo</span></li>
            <li class="other"><strong>by Ivaylo Kenov</strong><span>Hi, Doncho!</span></li>
          </ul>
        </div>
        <div class="sent-message">
          <input placeholder="type here">
          <button>Send</button>
        </div>
      </div>
    </div>
    <div id="other" class="chat-container">
      <h2>Ivaylo Kenov's chat</h2>
      <div>
        <div class="messages">
          <ul>
            <li class="other"><strong>by Doncho Minkov</strong><span>Hello Ivaylo</span></li>
            <li class="me"><strong>by me</strong><span>Hi, Doncho!</span></li>
          </ul>
        </div>
        <div class="sent-message">
          <input placeholder="type here">
          <button>Send</button>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 18px;
    font-family: Arial;
}

#root {
    width: 620px;
    margin-left: 10px;
}

    #root h1 {
        color: #2AA0BD;
        font-style: italic;
        font-size: 1.9em;
        padding-left: 140px;
        padding-top: 5px;
    }

    #root div#me {
        float: left;
        width: 300px;
        height: 490px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-top: 30px;
        margin-right: 10px;
        border: 1px solid #e5dcdc;
        /*background-image: -webkit-linear-gradient(top, #4AE871 50%, #F1FFBC 100%);
       
        background-image: linear-gradient(to bottom, #4AE871 50%, #F1FFBC 100%);*/
        background: #4ae871; /* Old browsers */
        background: -moz-linear-gradient(top, #4ae871 31%, #f1ffbc 71%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#4ae871), color-stop(71%,#f1ffbc)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #4ae871 31%,#f1ffbc 71%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #4ae871 31%,#f1ffbc 71%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #4ae871 31%,#f1ffbc 71%); /* IE10+ */
        background: linear-gradient(to bottom, #4ae871 31%,#f1ffbc 71%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ae871', endColorstr='#f1ffbc',GradientType=0 ); /* IE6-9 */
    }

        #root div#me h2 {
            padding-top: 20px;
            padding-left: 5px;
            padding-bottom: 40px;
            color: #2AA0BD;
        }

        #root div#me div {
        }

            #root div#me div div.messages {
            }

                #root div#me div div.messages ul {
                    padding-left: 15px;
                    padding-right: 15px;
                }

                    #root div#me div div.messages ul li {
       ...

JavaScript

(function() {
  window.onload = function() {
    var createMessageItem, meInput, meMessages, otherInput, otherMessages;
    createMessageItem = function(className, author, text) {
      var li;
      li = document.createElement('li');
      li.className = className;
      li.innerHTML = '<strong>' + 'by ' + author + '</strong>' + '<span>' + text + '</span>';
      return li;
    };
    meInput = document.querySelector('#me input');
    meMessages = document.querySelector('#me ul');
    otherInput = document.querySelector('#other input');
    otherMessages = document.querySelector('#other ul');
    (document.querySelector('#me button')).addEventListener('click', function(ev) {
      var msgText;
      msgText = meInput.value;
      meInput.value = '';
      if (!msgText) {
        return;
      }
      meMessages.appendChild(createMessageItem('me', 'me', msgText));
      return otherMessages.appendChild(createMessageItem('other', 'Doncho Minkov', msgText));
    });
    return (document.querySelector('#other button')).addEventListener('click', function(ev) {
      var msgText;
      msgText = otherInput.value;
      otherInput.value = '';
      if (!msgText) {
        return;
      }
      otherMessages.appendChild(createMessageItem('me', 'me', msgText));
      return meMessages.appendChild(createMessageItem('other', 'Ivaylo Kenov', msgText));
    });
  };

}).call(this);