Merge pull request #4 from andela-vnwaiwu/angular

Angular
vonvick · Jan 19, 2017 · c9c46fe · c9c46fe
2 parents 1416934 + b5d3f0b
commit c9c46fe
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 52 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -35,4 +35,9 @@ main {
 .intro-image {
   background: url('../img/background-img2.jpg') center center;
   padding: 5%;
+}
+
+.error {
+  font-size: 10px;
+  color: #ff0000;
 }
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" ng-app="StringExtension">
 
   <head>
     <title>String Class Extension Method</title>
@@ -19,7 +19,7 @@
 
   </head>
 
-  <body>
+  <body ng-controller="StringExtensionController">
     <header>
       <nav>
         <div class="nav-wrapper orange lighten-2">
@@ -135,28 +135,28 @@ <h4 class="center-align">How To Use</h4>
             <div class="col l4 s12 m12 push-l7">
               <div id="result-area" class="row">
                 <h5 class="center-align">Result</h5>
-                <div id="result">
+                <p class="error center-align">{{error}}</p>
+                <div id="result" class="center-align">
+                  {{result}}
                 </div>
               </div>
             </div>
             <div class="col l5 s12 m12 pull-l3">
               <div class="row">
                 <div class="input-field col l12">
-                  <input placeholder="Enter text to test" id="input" type="text" class="validate">
+                  <input placeholder="Enter text to test" id="input" type="text" class="validate" ng-model="input">
                   <label for="input">String Input</label>
                 </div>
                 <div class="input-field col l12">
-                  <select>
+                  <select ng-model="selected">
                     <option value="" disabled selected>Choose your option</option>
-                    <option value="1">Option 1</option>
-                    <option value="2">Option 2</option>
-                    <option value="3">Option 3</option>
+                    <option ng-repeat="option in options" ng-model="selected" value="{{option}}">{{option}}</option>
                   </select>
                   <label>Methods</label>
                 </div>  
               </div>
               <div class="row">
-                <button class="waves-effect waves-light green btn">Get Result</button>
+                <button class="waves-effect waves-light green btn" ng-click="getResult(input, selected)">Get Result</button>
               </div>
             </div>
           </div>

diff --git a/public/js/app.js b/public/js/app.js
@@ -0,0 +1,38 @@
+angular.module('StringExtension', [])
+.controller('StringExtensionController', ['$scope', '$timeout', 
+  ($scope, $timeout) => {
+  $scope.options = [
+    'hasVowels',
+    'toUpper',
+    'toLower',
+    'ucFirst',
+    'isQuestion',
+    'words',
+    'wordCount',
+    'toCurrency',
+    'fromCurrency',
+    'inverseCase',
+    'alternatingCase',
+    'getMiddle',
+    'numberWords',
+    'isDigit',
+    'doubleCheck'
+  ];
+
+  $scope.result = '';
+  $scope.error = '';
+  $scope.getResult = (input, selected) => {
+    if (input === '' || input === undefined) {
+      $scope.result = '';
+      $scope.error = 'You did not enter any text';
+      return;
+    } else if (selected === undefined) {
+      $scope.result = '';
+      $scope.error = 'You did not select a method';
+      return;
+    }
+    $scope.error = '';
+    $scope.result = input[selected]();
+    return;
+  }
+}])
diff --git a/src/string.js b/src/string.js
@@ -1,70 +1,84 @@
 const stringClassExtensions = {
 
   /**
-   * Returns true if the string contains vowels.
-   * @returns {Boolean}
+   * hasVowels
+   * Returns true if the string contains vowels or false if it does not
+   * @returns {Boolean} true or false
    */
   hasVowels() {
     const vowelRegex = /[aeiou]/i;
     return vowelRegex.test(this);
   },
 
   /**
-   * Returns the String in question but with all characters in upper cases as applicable.
-   * @returns {String}
+   * toUpper
+   * Returns the String in question but with
+   * all characters in upper cases as applicable
+   * @returns {String} string with all characters in upper case
    */
   toUpper() {
     return this.replace(/[a-z]/g, match => String
       .fromCharCode(match.charCodeAt(0) - 32));
   },
 
   /**
-   * Returns the String in question but with all characters in their lower cases as applicable.
-   * @returns {String}
+   * toLower
+   * Returns the string in question but with all
+   * characters in their lower cases as applicable
+   * @returns {String} string with all characters to lower case
    */
   toLower() {
     return this.replace(/[A-Z]/g, match => String
       .fromCharCode(match.charCodeAt(0) + 32));
   },
 
   /**
-   * Returns the String in question but changes the First Character to an Upper case.
-   * @returns {String}
+   * ucFirst
+   * Returns the string in question but changes the first character
+   * to an Upper case.
+   * @returns {String} string with capitalized first letter
    */
   ucFirst() {
     return this.replace(this[0], this[0].toUpper());
   },
 
   /**
+   * isQuestion
    * Returns true if the string is a question (ending with a question mark)
-   * @returns {Boolean}
+   * @returns {Boolean} true or false
    */
   isQuestion() {
     const regexType = /\?$/g;
     return regexType.test(this);
   },
 
   /**
-   * Returns a list of the words in the string, as an Array.
-   * @returns {Array}
+   * words
+   * Returns a list of the words in the string, as an Array
+   * @returns {Array} array of words in the string
    */
   words() {
     return this.replace(/[^a-z0-9A-Z\s]/g, '').split(/\s+/);
   },
 
   /**
+   * wordCount
    * Returns the number of words in the string
-   * @returns {Number}
+   * @returns {Number} number of words in the string
    */
   wordCount() {
     return this.words().length;
   },
 
   /**
+   * toCurrency
    * Returns a currency representation of the String
-   * @returns {String}
+   * @returns {String} string of numbers
    */
   toCurrency() {
+    if (!Number(this)) {
+      return 'This is not a Number';
+    }
     let [number, decimal] = this.split(/\./g);
     if (decimal === undefined) {
       decimal = '00';
@@ -76,7 +90,9 @@ const stringClassExtensions = {
   },
 
   /**
+   * fromCurrency
    * Returns a number representation of the Currency String
+   * @returns {String} string of numbers
    */
   fromCurrency() {
     let [number, decimal] = this.split(/\./g);
@@ -90,26 +106,29 @@ const stringClassExtensions = {
   },
 
   /**
+   * inverseCase
    * Returns each letter in the string as an inverse of its current case
-   * @returns {String}
+   * @returns {String} inverted form of the string
    */
   inverseCase() {
     return this.replace(/\w/g, character => (/[a-z]/
       .test(character) ? character.toUpper() : character.toLower()));
   },
 
   /**
+   * alternatingCase
    * Returns the letters in alternating cases. It must start with a lower case
-   * @returns {String}
+   * @returns {String} string in alternating cases starting with lower case
    */
   alternatingCase() {
     return this.replace(/\w/g, (match, count) =>
       (count % 2 === 0 ? match.toLower() : match.toUpper()));
   },
 
   /**
+   * getMiddle
    * Returns the character(s) in the middle of the string
-   * @returns {String}
+   * @returns {String} character(s) in the middle of the string
    */
   getMiddle() {
     const middlePosition = this.length / 2;
@@ -118,26 +137,33 @@ const stringClassExtensions = {
   },
 
    /**
-   * Returns true if a string contains double characters(including whitespace character)
-   * @return {Boolean}
+    * doubleCheck
+   * Returns true if a string contains double characters
+   * (including whitespace character)
+   * @return {Boolean} true or false
    */
   doubleCheck() {
     return /(.)\1{1}/.test(this);
   },
 
   /**
+   * isDigit
    * Test if string is single digit
-   * @return {Boolean}
+   * @return {Boolean} true or false
    */
   isDigit() {
     return /^\d{1}$/g.test(this);
   },
 
   /**
+   * numberWords
    * Returns the numbers in words e.g 325 should return three two five.
-   * @returns {String}
+   * @returns {String} string form of numbers
    */
   numberWords() {
+    if (!Number(this)) {
+      return 'This is not a Number';
+    }
     const digitWordsMap = {
       0: 'zero',
       1: 'one',