Tiny angular pangram app
A pangram is a sentence that contains every letter of the alphabet, like “the quick brown fox jumps over the lazy dog”. I set out to make a tiny pangram app this morning in Angular, that would let you type in a box and “tick off” the letters after you fulfilled each one, so that you can try to write your own.
I start with a script block featuring an Angular app and controller definition but after a little iteration, I managed to winnow it down to the point where there is no angular boilerplate whatsoever! The whole thing works in calculated attributes!
P.s. My favourite so far is: “Waive morbid bacon prerequisite - fight exactly zero jocks”
The app
Here’s the app running in this page:
The source
As a standalone web page:
<!DOCTYPE HTML> | |
<html ng-app> | |
<head> | |
<title>Tiny Angular Pangram App</title> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
<style> | |
.spare{color:red;} | |
.used{text-decoration:line-through; color:blue;} | |
.w-100{width:100%;} | |
</style> | |
</head> | |
<body> | |
<input class="w-100" ng-model="input" placeholder="Type in here..."> | |
<span | |
ng-repeat="letter in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')" | |
class="spare" | |
ng-class="{'used' : (input.toUpperCase().indexOf(letter) > -1)}">{{letter}} </span> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> | |
</body> | |
</html> |
Or hit Ctrl+U
to view the source of this blog post.
Angular is cool sometimes!