1
\$\begingroup\$

I have completed an exercise where there are 4 different color boxes and 1 main box below them that is blank, when you click on one of the colored boxes, the main box changes to the color of the box you just clicked on. Also there should be working undo and redo buttons.

Am I doing this the "Angular" way by using $event or no?

(function() {
  'use strict';

function angularBoxesCtrl() {
  var vm = this;
  vm.mainBoxColor;

  var colorHistory = [];
  var undoRedo = [];

  var changeColor = function() {
    vm.mainBoxColor = colorHistory[colorHistory.length - 1];
  }


  vm.logClass = function(e) {
    var boxColor = e.target.classList[1];
    //mainBox is already same color as clicked box
    if (boxColor === vm.mainBoxColor) {
      return;
    }
    colorHistory.push(boxColor)  
    changeColor();
  }

  vm.undo = function() {
    if (!colorHistory.length) {
      return;
    }
    var undoColor = colorHistory.pop();
    undoRedo.unshift(undoColor);
    changeColor();  
  }

  vm.redo = function() {
    if (!undoRedo.length) {
      return;
    }
    var redoColor = undoRedo.shift();
    colorHistory.push(redoColor);
    changeColor();  
  }
}


angular.module('angularBoxes', [])
  .controller('angularBoxesCtrl', [
    angularBoxesCtrl
    ]);

})();
div {
  box-sizing: border-box;
}

.boxHolder {
  border: 1px solid black;
  text-align: center;
  font-size: 0;
}

.buttonHolder {
  text-align: center;
  position: relative;
  top: 40px;
}

.box {
  width: 180px;
  height: 180px;
  display: inline-block;
  border: 1px solid black;
  margin: 4px;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.mainBox {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
  position: relative;
  top: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular Boxes</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body ng-app="angularBoxes" ng-controller="angularBoxesCtrl as vm">
  <div class="boxHolder">
    <div ng-click="vm.logClass($event)" class="box green"></div>
    <div ng-click="vm.logClass($event)" class="box blue"></div>
    <div ng-click="vm.logClass($event)" class="box red"></div>
    <div ng-click="vm.logClass($event)" class="box yellow"></div>
  </div>
  <div class="buttonHolder">
    <button ng-click="vm.undo()">Undo</button>
    <button ng-click="vm.redo()">Redo</button>
  </div>
  <div class="mainBox" ng-class="vm.mainBoxColor"></div>

  <!-- scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="app.js"></script>

</body>
</html>

\$\endgroup\$
1
\$\begingroup\$

I would pass the className to the logClass method. Because how you wrote the method you enforce that the color name is the second class applied on the control. This is very fragile, as there is no direct relation between the class order in the an element and the result apply to them. So I would do:

vm.logClass = function(className) {
...
}
//template
 <div ng-click="vm.logClass('green')" class="box green"></div>
    <div ng-click="vm.logClass('blue')" class="box blue"></div>
    <div ng-click="vm.logClass('red')" class="box red"></div>
    <div ng-click="vm.logClass('yellow')" class="box yellow"></div>
\$\endgroup\$
  • \$\begingroup\$ Thanks that's good to know. That does make sense, what if a 3rd class gets added in between box and the color? then everything would break. \$\endgroup\$ – WinchenzoMagnifico Jan 12 '16 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.