+- in stack

by Evgeniy Lukovsky

HTML

<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainController">
        <div lm-stack="stack"></div>
        <hr>
        <form ng-submit="check()">
            <div lm-keyboard="append(digit)"></div>
            <button>check</button>
        </form>
        <div class="result">Right: {{result.right}}</div>
        <div class="result wrong">Wrong: {{result.wrong}}</div>
    </div>
</div>

SCSS

div {
    div {
        position: relative;
        background: light-grey;
        color: green;
        width: 70px;
        & > div {
            &.small {
                font-size: 7pt;
                color: red;
            }
            font: arial 10pt;
            line-height:1em;
        }
        & > div.top {
        }
        & > div.bottom {
        }
        & > div.total {
            border-top: solid 1px black;
            color: brown
        }
        & > div.number {
            text-align: right;
            position: relative;
            left: 20px;
        }
        & > div.sign {
            position: absolute;
            left:0px;
            top: 0.5em;
        }
    }
    form {
        div[lm-keyboard] {
            span {
                padding:5px;
                background:yellow;
                border: 1px solid black
            }
        }
    }
    input {
        position:absolute;
        top:100px;
    }
    button {
        position:absolute;
        top: 130px;
    }
    div.result {
        position: absolute;
        top:160px;
        &.wrong {
            top: 190px;
            color: red;
        }
    }
}

JavaScript

var Module = angular.module('myApp', [])
    .directive('lmStack', function () {
    return {
        restrict: 'A',
        template: '<div class="small number" ng-show="lmStack.carry">1  10</div>' +
            '<div class="top number">{{lmStack.top}}</div>' +
            '<div class="bottom number">{{lmStack.bottom}}</div>' +
            '<div class="total number">{{lmStack.total}}</div>' +
            '<div class="sign">{{lmStack.sign}}</div>',
        link: function (scope, element, attributes) {
            scope.$watch('lmStack.top', function (nv, ov) {
                if (ov == nv) return;
                scope.lmStack.carry = scope.$eval('((lmStack.top % 10)' + scope.lmStack.sign +
                    '(lmStack.bottom % 10)).toString().length' +
                    '==2');

            });
        },
        scope: {
            'lmStack': '='
        }
    };
}).directive('lmKeyboard', function () {
    return {
        restrict: 'A',
        template: '<span>0</span><span>1</span><span>2</span>' +
            '<span>3</span><span>4</span><span>5</span>' +
            '<span>6</span><span>7</span><span>8</span>' +
            '<span>9</span>',
        link: function (scope, element) {
            element.on('click', function (e) {
                e.preventDefault();
                scope.lmKeyboard({
                    digit: e.target.firstChild.nodeValue
                });
            });
            element.on('mousedown', function (e) {
                e.preventDefault();
            });
        },
        scope: {
            lmKeyboard: '&'
        }
    };
})
    .controller('MainController', ['$scope', '$window', '$timeout', function ($scope, $window, $timeout) {
    var SIGNS = ['+', '-'];
    $scope.$applyAsync(renewExercise());

    function renewExercise() {
        var top = Math.floor(Math.random() * 100);
        $scope.stack = {
            top: top,
            bottom: Math.floor(Math.random() * top),
            sign:...