Announcement Get your six lucky numbers with AngularJS

      Get your six lucky numbers with AngularJS





      The first 5 random numbers range from 1 to 75.
      The last digit ranges from 1 to 15.
      ---------------------------
      New eBook release: Go Exercises in Plain Language, Volume 1, Volume 2, Volume 3
      New eBook release: TypeScript in Plain Language Volume I | Volume 2 with Angular 4
      New quick read: The Factorial Recursive Function: A language agnostic explanation with samples in Go and JavaScript.
      - Please subscribe my Twitter or my Amazon profile to be notified of new releases.
      Author's profile on Amazon
      Twitter
      TonyAr

      How does it work?

      The above snippet is based on the JavaScript exercise published on my eBook
      "Small Projects to Learn JavaScript - Drawing Six 'Lucky' Numbers"
      (See the link on my message signature).
      AngularJS was not even mentioned on the project but I figured it was time to demonstrate a way to implement AngularJS since it is the most popular implementation wanted right now.

      Here's the code:

      HTML Source Code

      1. <!DOCTYPE html>
      2. <html ng-app="randNumModule">
      3. <head>
      4. <meta charset="UTH-8">
      5. <title>Get six lucky numbers</title>
      6. </head>
      7. <body>
      8. <div ng-controller='myController'>
      9. {{results}}<br>
      10. <input type="button" value="Get your lucky numbers" ng-click="getNumbers()">
      11. </div>
      12. <!-- Link to AngularJS: -->
      13. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
      14. </script>
      15. <!-- Module and controller area: -->
      16. <script>
      17. var myApp = angular.module("randNumModule",[]);
      18. myApp.controller('myController', function($scope){
      19. // main function begins, variables are declared
      20. $scope.results="";
      21. $scope.getNumbers = function () {
      22. var randomDraw = [];
      23. var x;
      24. var y;
      25. // function helper for array numerical sorting
      26. function compareMe(num1, num2) {
      27. return num1 - num2;
      28. }
      29. // pick 1 random number out of 75:
      30. var getX = function () {
      31. x = Math.ceil(Math.random() * 75);
      32. return x;
      33. };
      34. // pick 1 random number out of 15:
      35. var getY = function () {
      36. y = Math.ceil(Math.random() * 15);
      37. return y;
      38. };
      39. // pick 5 random numbers
      40. // push them into array:
      41. for (var i = 1; i <= 5; i++) {
      42. getX();
      43. // if random x is a repeat, redo
      44. if (randomDraw.indexOf(x) !== -1) {
      45. getX();
      46. }
      47. randomDraw.push(x);
      48. }
      49. // Sort 5 numbers from array:
      50. randomDraw.sort(compareMe);
      51. // get 6th number
      52. getY();
      53. // push 6th number into array:
      54. randomDraw.push(y);
      55. // output result of array to string:
      56. $scope.results= randomDraw.toString();
      57. };
      58. });
      59. </script>
      60. </body>
      61. </html>


      To understand the JavaScript part you really need to go through the incremental exercises described in the eBook.

      To understand how AngularJS works please read all the other articles I have been writing about it, or just order the other eBook (link on my signature):
      JavaScript in Plain Language - A Self-Study Method: JSON and AngularJS Prep.

      Remember: it's all about practicing the concepts over and over again, just like piano scales.

      The difference between the JavaScript used in this post as opposed to the JavaScript used on the eBook exercises is the usage of object $scope which maps the HTML page and applies the variable result (newly introduced here) to the HTML location where the result is going to be shown.

      Study it, play with it, modify it and have fun!!

      Tony de Araujo

      ---------------------------
      New eBook release: Go Exercises in Plain Language, Volume 1, Volume 2, Volume 3
      New eBook release: TypeScript in Plain Language Volume I | Volume 2 with Angular 4
      New quick read: The Factorial Recursive Function: A language agnostic explanation with samples in Go and JavaScript.
      - Please subscribe my Twitter or my Amazon profile to be notified of new releases.
      Author's profile on Amazon
      Twitter
      TonyAr

      Separating JavaScript from HTML

      Since the JavaScript portion is pretty long we can separate the module/controller from the HTML page.

      To do that all we have to do is to cut lines 20 through 86 and save the code on a separate file as JavaScript,
      like for example lucky.js

      Then we write the URL address on the SCRIPT tag seen on line 19:

      HTML Source Code

      1. <script src="lucky.js"></script>


      And that should work just fine.


      Please register with JSPlain.com to get notified of future articles
      or join me at Twitter.

      ---------------------------
      New eBook release: Go Exercises in Plain Language, Volume 1, Volume 2, Volume 3
      New eBook release: TypeScript in Plain Language Volume I | Volume 2 with Angular 4
      New quick read: The Factorial Recursive Function: A language agnostic explanation with samples in Go and JavaScript.
      - Please subscribe my Twitter or my Amazon profile to be notified of new releases.
      Author's profile on Amazon
      Twitter
      TonyAr