timer

just a timer functionality in angular

by Samar Pattanayak

HTML

<div ng-app="myApp">
  <div ng-controller="myController">
  {{title}}
  <text-directive func="function" ind="indic"></text-directive>
  <coll-directive style="display: inline-block">Hi i am from Directive(HTML Content)</coll-directive>
  <div style="margin-top:10px; border: 1px solid blue; height: 150px; width :auto; padding-left:10px">
    <p>
    Timer 
    </p>
    <input type="button" id="start" value="Start Timer " ng-click="startTime()" style="background-color:#42a4f4; border-radius: 7px"/>
    <input type="button" id="end" value="Reset Timer" ng-click="endTime()" style="background-color:#6bf442; border-radius: 7px"/>
    <span id="spantime" ng-bind="(numberS | myFilter)"></span>
    
  </div>
  </div>
</div>

JavaScript

var arr=[2,3,4]
//alert(arr.reduce((x,y)=>{return x*y}))

var obj=[{name : "A",age : 23},{name : "B", age : 24}];
(function CheckCall(){
	//alert(this.length)
	for(var i=0; i< this.length ; i++){
  	console.log(`function call with CALL keyword & name is ${this[i].name}`);
  }
}).call(obj)

function add(x,y){
	console.log(x+y)
}
add(5,6)

var add1=((a,b)=>(console.log(a+b)))
add1(23,67)

var app= angular.module("myApp",[]);
app.controller("myController", function($scope,$interval){
	$scope.title="Transclude in angular js"
  $scope.function="Click To Expand -> -> ->";
  $scope.indic=false;
  $scope.numberS=0;
  $scope.start=true;
  //$scope.expandableContent= "Expandable Panel Content";
  $scope.startTime= function(){
  	
  	if($scope.start==true){
    	$scope.intervalID = $interval(function(){
    	$scope.numberS=$scope.numberS+1;
    	},1000)
      
    	document.querySelector("#start").value="Stop Timer"
      document.querySelector("#start").style["background-color"]="#f49842";
      $scope.start=false;
      console.log($scope.intervalID)
    }else{
    	console.log($scope.intervalID)
      $interval.cancel($scope.intervalID);
      
      console.log("in else")
    	$scope.start = ! $scope.start;
      document.querySelector("#start").value="Start Timer";
      document.querySelector("#start").style["background-color"]="#42a4f4";
      
    }
  	
  }
  $scope.endTime= function(){
  	$interval.cancel($scope.intervalID);
  	$scope.numberS=0;
    document.querySelector("#start").value="Start Timer"
  }
  
})

app.directive("textDirective", function(){
	return {
  	restrict:"EA",
    scope:{
    	func :"=",
      ind: "="
    },
    //require:"ngModel",
    //transclude: true,
    link: function(scope,ele,attr,ctrl){
    	console.log(ctrl)
    },
    template : "<div style='border: 1px solid grey; height: 22px; background-color:grey; width : 230px; padding-left: 10px; margin-top:10px' ng-bind='func' ng-click='showOrHide()'></div><span...