SteGriff

Blog

Next & Previous

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:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

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!