Grade evaluator example to show in Hour of Code presentation.

"use strict";

var app = angular.module("grades", []);

app.controller("MainCtrl", function ($scope) {
  /*
  $scope.name = "Josh";
  $scope.score = 17;
  $scope.possible = 22;
  */

  $scope.gradeInfo = null;

  var lettersAndComments = [
    {
      "percent": 100,
      "letter": "A+",
      "comments": "Wow! Perfect score"
    },
    {
      "percent": 90,
      "letter": "A",
      "comments": "Great job!"
    },
    {
      "percent": 80,
      "letter": "B",
      "comments": "Not bad."
    },
    {
      "percent": 70,
      "letter": "C",
      "comments": "Well, at least you passed."
    },
    {
      "percent": 60,
      "letter": "D",
      "comments": "You failed, but it could've been worse!"
    }
  ];

  $scope.calculateGrade = function () {
    var percent = $scope.score / $scope.possible * 100;

    var letter;
    var comments;
    var i;
    
    for (i=0; i<lettersAndComments.length; i+=1) {
      var letterAndComments = lettersAndComments[i];
      if (percent >= letterAndComments.percent) {
        letter = letterAndComments.letter;
        comments = letterAndComments.comments;
        break;
      }
    }
    if (! letter) {
      letter = "F";
      comments = "You failed. Did you study?";
    }

    $scope.gradeInfo = {
      "percent": percent,
      "letter": letter,
      "comments": comments
    };
  };

  $scope.$watch("[name,score,possible]", function (newValue, oldValue) {
    $scope.gradeInfo = null;
  });

});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link href='https://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.9/angular.js" data-semver="1.5.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="grades" ng-controller="MainCtrl">
    What is your name?<br>
    <input type="text" ng-model="name">
    
    <div ng-show="name.length">
      <h1>Hello, {{name}}!</h1>
      
      <p>What was your score?<br>
      <input type="number" min="0" step="0.01"  ng-model="score"></p>
      
      <div ng-hide="score == null">
        <p>And how many points were possible?<br>
        <input type="number" min="0" step="0.01" ng-model="possible"></p>
        
        <p ng-hide="possible == null">
          I can 
          <button ng-click="calculateGrade()">tell you about your grade</button>.
        </p>
      </div>
      
    </div>
    
    <div class="results" ng-show="gradeInfo">
      <p>{{ name }}, you scored {{ gradeInfo.percent | number:2 }}% for a letter grade {{ gradeInfo.letter }}.</p>
      <p>My comments: <span class="handwritten">{{ gradeInfo.comments }}</span></p>
    </div>
    
  </body>

</html>

/* Put your css in here */

h1 {
  font-family: 'Raleway';
  color: blue;
}

.handwritten {
  font-family: 'Oleo Script';
}

.results {
  margin: 2em;
  padding: 1em 2em;
  background-color: #ede5ce;
}