AngularJS Demo Todo App by W3 Schools //Edited & Extended

In this example below you will see how to do a AngularJS Demo Todo App by W3 Schools //Edited & Extended with some HTML / CSS and Javascript

Todo app created with W3.CSS, AngularJS, Hover.css, FontAwesome//Base app by W3 Schools: https://www.w3schools.com/angular/angular_application.asp

Thumbnail
This awesome code was written by 123Jon4, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 123Jon4 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" class="w3-pink">

<head>
  <meta charset="UTF-8">
  <title>AngularJS Demo Todo App by W3 Schools //Edited & Extended</title>
  
  
  <link rel='stylesheet prefetch' href='https://www.w3schools.com/w3css/3/w3.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="own-center w3-card-2 w3-margin w3-green w3-round-small w3-hover-shadow" style="max-width:400px;">
  <header class="w3-container w3-light-grey w3-padding-16">
    <h3>My Shopping List</h3>
  </header>
  <ul class="w3-ul">
    <li ng-repeat="x in products" class="w3-padding-16"><span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right"><i class="fa fa-times w3-text-black hvr-pop"></i></span><div class="own-input-wrapper"><input ng-dblclick="editItem($event)" ng-enter="saveItem($event)" ng-blur="saveItem($event)" class="own-input-reset block" value="{{x}}" ng-model="x" readonly></div></li>
  </ul>
  <div class="w3-container w3-light-grey w3-padding-16">
    <div class="w3-row w3-margin-top">
      <div class="w3-col s10">
        <input placeholder="Add shopping items here" ng-enter="addItem()" ng-model="addMe" class="w3-input w3-border w3-padding">
      </div>
      <div class="w3-col s2">
        <button ng-click="addItem()" class="w3-btn w3-padding w3-border-top w3-border-bottom w3-border-right w3-green">Add</button>
      </div>
    </div>
    <p class="w3-padding-left w3-text-red">{{errortext}}</p>
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/123Jon4/angularjs-demo-todo-app-by-w3-schools-edited-andamp-extended-jBYNom */
html, body, .own-fullscreen{
  width:100%;
  height:100%;
}

.own-center{  
  position:relative;
  left:50%;
  transform: translate(-50%,0);
}

.own-input-reset {
  font-family: inherit;
  line-height: 1.15;
  font-size:inherit;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  background:none;
  color: inherit;
  cursor:text;
}
.own-input-wrapper{
  overflow:hidden;
}
.block{  
  display:block;
  width:100%;
}

/*Downloaded from https://www.codeseek.co/123Jon4/angularjs-demo-todo-app-by-w3-schools-edited-andamp-extended-jBYNom */
//Added features: Clear input field after adding item, Adding item with Enter key, Editable items  (Double click)

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];
  $scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
      $scope.addMe = '';
    } else {
      $scope.errortext = "The item is already in your shopping list.";
    }
  }
  $scope.removeItem = function(x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
  $scope.editItem = function($event) {
    $event.target.removeAttribute('readonly');
      document.getSelection().removeAllRanges();
    //$event.target.classList.toggle('own-input-reset');
  }
  $scope.saveItem = function($event) {
    console.log($event);
    $event.srcElement.setAttribute('readonly', '');
    $event.srcElement.blur();
    //$event.target.classList.toggle('own-input-reset');
  }
  $scope.log = function(text) {
    console.log(text);
  }
});

app.directive('ngEnter', ['$parse', function($parse) {
  return function(scope, element, attr) {
    element.bind("keydown keypress", function(event) {
      if (event.which === 13) {

        var attrHandler = $parse(attr['ngEnter'])

        scope.$apply(function() {
          attrHandler(scope, {
            $event: event,
            $value: element.val()
          });
        });

        event.preventDefault();
      }
    });
  }
}]);

Comments