Angular CHAT APP

CRUD

by Zuhaib Siddiqui

HTML

<div ng-app="myApp">
 <div ng-controller="mainController">
 <form name="formLogin">
   <div class="listing">
     <ul>
       <li ng-repeat="item in items"><pre>{{item.amount}} </pre><span class="del" ng-click="del(index)">X</span></li>
     </ul>
   </div>
   <div class="chat-footer">
   <textarea value="1" type="text" placeholder="Comments" rows="3" name="user" ng-model="itemAmount">
   </textarea>
   <button ng-click="addItem()" ng-disabled="!itemAmount" class="button">Send</button>
   <span class="full-button" ng-if="formLogin.user.$viewValue.length>0">OK</span>
   </div>
</form>
</div>
</div>

SCSS

body{
  font-family: Tahoma,sans-serif;
  font-size:16px;
  padding:10px;
  textarea{
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    font-family: tahoma;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 10px;
    width: calc(100% - 100px);
  }
  .button{
    background-color: #8c70ba;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    height: 87px;
    padding: 10px 18px;
    vertical-align: top;
  }
  .full-button{
    padding: 10px 18px;
    display:block;
  }
}
.listing{
    box-sizing: border-box;
    height: 70%;
    left: 0;
    overflow-y: scroll;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 100%;
    >ul{
      margin:0px;
      padding:0px;
    >li{
      background-color: #62d3e1;
      border-radius: 5px;
      color: #fff;
      display: block;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 1px;
      margin-bottom: 10px;
      padding: 10px;
      position: relative;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
      .del{
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        box-sizing: border-box;
        display: inline-block;
        font-size: 10px;
        height: 25px;
        padding: 6px 0;
        position: absolute;
        right: 8px;
        text-align: center;
        top: 6px;
        vertical-align: top;
        width: 25px;
        cursor:pointer;
      }
    }
  }
}
.chat-footer{
  position:fixed;
  bottom:0px;
  left:0;
  background-color:#fff;
  padding:10px;
  width:100%;
  box-sizing:border-box;
}

JavaScript

var app = angular.module("myApp", []);

app.controller("mainController",function ($scope) {
	// Item List Arrays
    $scope.items = [];

    // Add a Item to the list
    $scope.addItem = function () {
        $scope.items.push({
                amount: $scope.itemAmount,
                name: $scope.itemName
            });
        $scope.itemAmount = "";
    };
    
});