Angular app - Contact Manager

Angular-app---Contact-Manager.markdown

Angular app - Contact Manager

A Pen by Svyatoslav on CodePen.

License.

index.jade

doctype html
html(lang="ru" ng-app="ContactManager")
  head
    title Contact Manager
  body(ng-controller="cmanagerCtrl")
    #wrapper
    
      header
        h1 Contact Manager
        
        nav
          ul
            li
              a(href="/app") App
            li
              a(href="/about") About
        
      main
      
        .list
          .row.head
            .col.id #
            .col.name Name
            .col.phone Phone
            .col.email Email
            .col.del Delete
          .row(ng-repeat="item in list")
            .col.id {{item.id}}.
            .col.name
              input(type="text" value="{{item.name}}") 
            .col.phone
              input(type="phone" value="{{item.phone}}")
            .col.email
              a(href="mailto:{{item.email}}") {{item.email}}
            .col.del(ng-click="delItem(item)")
              button del
              
        .count Total count of contacts:  
          b {{list.length}}
          
        form(name="addForm")
          p Add new contact:
          div
            input(ng-model="item.name" name="name" placeholder="Name")
            .success(ng-show="addForm.name.$dirty") Valid
            .error(ng-show="addForm.name.$pristine") *
          div
            input(ng-model="item.phone" name="phone" placeholder="Phone")
            .success(ng-show="addForm.phone.$dirty") Valid 
            .error(ng-show="addForm.phone.$pristine") *
          div
            input(ng-model="item.email" name="email" placeholder="E-mail")
            .success(ng-show="addForm.email.$dirty") Valid
            .error(ng-show="addForm.email.$pristine") *
          button(ng-click="addItem()") Add
          
      footer
      
    

script.js

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

app.controller("cmanagerCtrl", function($scope){
  
  $scope.list = [
    {id: 1, name: "Ivan", phone: "89242568195", email: "[email protected]"}, 
    {id: 2, name: "Andrey", phone: "89253163866", email: "[email protected]"},
    {id: 3, name: "Roman", phone: "89243350109", email: "[email protected]"},
    {id: 4, name: "Timofey", phone: "89242568190", email: "[email protected]"},
    {id: 5, name: "Kostya", phone: "89243356052", email: "[email protected]"}
  ];
  
  $scope.addItem = function(){
    $scope.list.push({
      id: $scope.list.length + 1, 
      name: $scope.item.name, 
      phone: $scope.item.phone, 
      email: $scope.item.email
    });
    
    $scope.item = "";
  };
  
  $scope.delItem = function(item){
    $scope.list.splice($scope.list.indexOf(item),1);
  };
  
});

/*
app.config(["$router", function($router){
  $router
    .when("/app", {
      templateUrl: ""
    })
    .when("/about", {
    
    })
    .otherwise({
      redirectTo: '/phones'
    });
}]);
*/

style.scss

@import "compass/css3";
@mixin box-shadow(){
  box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.75);
  -o-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
  -webkit-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}

@mixin border-radius($val){
  border-radius: $val;
  -o-border-radius: $val;
  -moz-border-radius: $val;
  -webkit-border-radius: $val;
}

body{
  font: 14px Arial;
  background: #efefef;
}

a{
  color: #007B76;
}

b{
  font-weight: bold;
}

#wrapper{
  width: 1000px;
  margin: auto;
}

header{
  
  h1{
      font-size: 30px;
      text-align: center;
      margin: 15px 0;
  }
  
  nav{
    display: block;
    margin: 0 0 5px 0;
    
    li{
      display: inline-block;
      margin: 0 2px 0 0;
      
      a{
        font-size: 16px;
        color: #fff;
        padding: 5px 15px;
        background: #333;
        text-decoration: none;
        @include box-shadow(); 
        
        &:hover{
          opacity: .8;
        }
        
        &:active{
          opacity: 1;
        }
      }
    }
  }
}

main{
  padding: 20px;
  background: #fff;
  min-height: 300px;
  position: relative;
  z-index: 10;
  @include box-shadow();
  
  .list{
    margin: 20px 0;
    
    .row{
      width: 100%;
      border-bottom: 1px solid #999;
      padding: 10px 0;
      
      &.head{
        background: #333;
        @include box-shadow();
        
        .col{
          color: #fff;
        }
      }
      
      .col{
        display: inline-block;
        vertical-align: middle;
        
        input{
          border: none;
          font-size: 14px;
        }
        
        &.id{
          width: 10%;
          text-align: center;
        }
        
        &.name{
          width: 25%;
        }
        
        &.phone{
          width: 25%;
        }
        
        &.email{
          width: 25%;
        }
        
        &.del{
          width: 10%;
          
          button{
            background: rgb(255, 131, 131);
            border: none;
            cursor: pointer;
            @include border-radius(3px);
            @include box-shadow();
            
            &:hover{
              opacity: .8;
            }
          }
        }
      }
    }
  }
  
  .count{
    text-align: right;
  }
  
  form{
    
    p{
      font-size: 14px;
      margin: 0 0 10px 0;
    }
    
    input{
      display: inline-block;
      width: 200px;
      height: 30px;
      border: 1px solid #999;
      padding: 0 10px;
      margin: 0 5px 10px 0;
      font-size: 16px;
    }
    
    button{
      width: 100px;
      height: 32px;
      border: none;
      background: #007B76;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      
      &:hover{
        opacity: .8;
      }
      
      &:active{
        opacity: 1;
      }
    }
    
    div{
      
      .error{
        color: rgb(255, 131, 131);
        display: inline;
      }
      
      .success{
        color: green;
        display: inline;
      }
    }
  }
}

footer{
  min-height: 100px;
}