Skip to content

Instantly share code, notes, and snippets.

@oskwazir

oskwazir/index.html

Created September 25, 2014 22:02
Show Gist options
  • Save oskwazir/ddef6d3e93a137796a63 to your computer and use it in GitHub Desktop.
Save oskwazir/ddef6d3e93a137796a63 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html ng-app="countdown">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body{
font-family: "Avenir Next",sans-serif;
font-size:36px;
}
</style>
</head>
<body>
<div ng-controller="EventController">
<p>Event occurs every {{ event }}th minute on the hour</p>
<p>Currenty we are on the <span current-time></span> minute of the hour</p>
<p>There are <span time-to-event="{{ event }}"></span> minutes to the next event.</p>
</div>
<script id="jsbin-javascript">
angular.module('countdown', [])
.controller('EventController', function($scope, $interval){
$scope.event = 15;
})
.directive('timeToEvent', function($interval){
return function(scope, element, attrs){
var stopInterval;
var eventTime;
var minutesRemaining;
var fullHour = 60;
var updateTimeLeft = function getTimeLeft(){
var minuteRightNow = new Date().getMinutes();
if (minuteRightNow < eventTime){
minutesRemaining = Math.abs(minuteRightNow - eventTime);
}
else {
minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
}
element.text(minutesRemaining);
};
scope.$watch(attrs.timeToEvent, function(value) {
eventTime = value;
updateTimeLeft();
});
stopInterval = $interval(updateTimeLeft, 1000);
element.on('$destroy', function(){
$interval.cancel(stopInterval);
});
};
})
.directive('currentTime',
function($interval) {
// return the directive link function. (compile function not needed)
return function(scope, element, attrs) {
var format = 'mm', // date format
stopTime; // so that we can cancel the time updates
//should be a filter instead so I can use it anywhere else.
function getOrdinal(number){
var ord = "";
number = parseInt(number) % 10;
switch (number) {
case 1:
ord = 'st';
break;
case 2:
ord = 'nd';
break;
case 3:
ord = 'rd';
break;
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 0:
ord = 'th';
break;
}
return ord;
}
// used to update the UI
function updateTime() {
var currentMinute = new Date().getMinutes();
element.text(currentMinute+''+getOrdinal(currentMinute));
}
// watch the expression, and update the UI on change.
// scope.$watch(attrs.myCurrentTime, function(value) {
// format = value;
// updateTime();
// });
stopTime = $interval(updateTime, 1000);
// listen on DOM destroy (removal) event, and cancel the next UI update
// to prevent updating time after the DOM element was removed.
element.on('$destroy', function() {
$interval.cancel(stopTime);
});
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="countdown">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="EventController">
<p>Event occurs every {{ event }}th minute on the hour</p>
<p>Currenty we are on the <span current-time></span> minute of the hour</p>
<p>There are <span time-to-event="{{ event }}"></span> minutes to the next event.</p>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body{
font-family: "Avenir Next",sans-serif;
font-size:36px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
angular.module('countdown', [])
.controller('EventController', function($scope, $interval){
$scope.event = 15;
})
.directive('timeToEvent', function($interval){
return function(scope, element, attrs){
var stopInterval;
var eventTime;
var minutesRemaining;
var fullHour = 60;
var updateTimeLeft = function getTimeLeft(){
var minuteRightNow = new Date().getMinutes();
if (minuteRightNow < eventTime){
minutesRemaining = Math.abs(minuteRightNow - eventTime);
}
else {
minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
}
element.text(minutesRemaining);
};
scope.$watch(attrs.timeToEvent, function(value) {
eventTime = value;
updateTimeLeft();
});
stopInterval = $interval(updateTimeLeft, 1000);
element.on('$destroy', function(){
$interval.cancel(stopInterval);
});
};
})
.directive('currentTime',
function($interval) {
// return the directive link function. (compile function not needed)
return function(scope, element, attrs) {
var format = 'mm', // date format
stopTime; // so that we can cancel the time updates
//should be a filter instead so I can use it anywhere else.
function getOrdinal(number){
var ord = "";
number = parseInt(number) % 10;
switch (number) {
case 1:
ord = 'st';
break;
case 2:
ord = 'nd';
break;
case 3:
ord = 'rd';
break;
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 0:
ord = 'th';
break;
}
return ord;
}
// used to update the UI
function updateTime() {
var currentMinute = new Date().getMinutes();
element.text(currentMinute+''+getOrdinal(currentMinute));
}
// watch the expression, and update the UI on change.
// scope.$watch(attrs.myCurrentTime, function(value) {
// format = value;
// updateTime();
// });
stopTime = $interval(updateTime, 1000);
// listen on DOM destroy (removal) event, and cancel the next UI update
// to prevent updating time after the DOM element was removed.
element.on('$destroy', function() {
$interval.cancel(stopTime);
});
};
});</script></body>
</html>
Raw
jsbin.koturi.css
body{
font-family: "Avenir Next",sans-serif;
font-size:36px;
}
Raw
jsbin.koturi.js
angular.module('countdown', [])
.controller('EventController', function($scope, $interval){
$scope.event = 15;
})
.directive('timeToEvent', function($interval){
return function(scope, element, attrs){
var stopInterval;
var eventTime;
var minutesRemaining;
var fullHour = 60;
var updateTimeLeft = function getTimeLeft(){
var minuteRightNow = new Date().getMinutes();
if (minuteRightNow < eventTime){
minutesRemaining = Math.abs(minuteRightNow - eventTime);
}
else {
minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
}
element.text(minutesRemaining);
};
scope.$watch(attrs.timeToEvent, function(value) {
eventTime = value;
updateTimeLeft();
});
stopInterval = $interval(updateTimeLeft, 1000);
element.on('$destroy', function(){
$interval.cancel(stopInterval);
});
};
})
.directive('currentTime',
function($interval) {
// return the directive link function. (compile function not needed)
return function(scope, element, attrs) {
var format = 'mm', // date format
stopTime; // so that we can cancel the time updates
//should be a filter instead so I can use it anywhere else.
function getOrdinal(number){
var ord = "";
number = parseInt(number) % 10;
switch (number) {
case 1:
ord = 'st';
break;
case 2:
ord = 'nd';
break;
case 3:
ord = 'rd';
break;
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 0:
ord = 'th';
break;
}
return ord;
}
// used to update the UI
function updateTime() {
var currentMinute = new Date().getMinutes();
element.text(currentMinute+''+getOrdinal(currentMinute));
}
// watch the expression, and update the UI on change.
// scope.$watch(attrs.myCurrentTime, function(value) {
// format = value;
// updateTime();
// });
stopTime = $interval(updateTime, 1000);
// listen on DOM destroy (removal) event, and cancel the next UI update
// to prevent updating time after the DOM element was removed.
element.on('$destroy', function() {
$interval.cancel(stopTime);
});
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment