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!