69 Budgety Project

Ch-sriram · Ch-sriram · commit 8728f2f69f67 · 2019-09-24T21:23:37.000+05:30
- Learnings
   1. How to convert field inputs to numbers;
   2. How to prevent false inputs (i.e., an empty input);
- README Partially Updated: link for updated app.js has to be added.
diff --git a/JS-Objects-Functions-Advanced/project-budgety/script/app.js b/JS-Objects-Functions-Advanced/project-budgety/script/app.js
@@ -1,10 +1,8 @@
 /********************************************************************************************
  * What we'll learn
  * ----------------
- * 1. How to clear HTML fields;
- * 2. How to use querySelectorAll();
- * 3. How to convert a list to an Array;
- * 4. A better way to loop over an array than for loop: forEach() loop;
+ * 1. How to convert field inputs to numbers;
+ * 2. How to prevent false inputs (i.e., an empty input);
  */
 
 // Budget Controller
@@ -73,11 +71,6 @@ var budgetController = (function() {    // Code related to handling the budget (
     };
 })();
 
-/**
- * After adding new items to the UI, we also want to clear HTML fields in the UI, because it
- * makes sense to do that. Therefore, we do it by adding the relevant function into the
- * UIController's IIFE, below:
- */
 
 // UI Controller
 var UIController = (function(){      // Code to manipulate the UI
@@ -102,12 +95,15 @@ var UIController = (function(){      // Code to manipulate the UI
              * which are .add__type, .add_description & .add__value, referred to as
              * inputType, inputDescription & inputValue using the DOMStrings object
              * which is defined above.
-             * type: income/expense
+             * 
+             * type: income/expense option
+             * description: string
+             * value: floating point number 
              */
             return {
                 type: document.querySelector(DOMStrings.inputType).value,
                 description: document.querySelector(DOMStrings.inputDescription).value,
-                value: document.querySelector(DOMStrings.inputValue).value
+                value: parseFloat(document.querySelector(DOMStrings.inputValue).value)
             };
         },
 
@@ -196,27 +192,39 @@ var controller = (function(budgetCtrl, UICtrl){ // Code related to handling even
         });
     };
     
+    var updateBudget = function() {
+        // 1. Calculate the budget
+
+        // 2. Return the budget
+
+        // 3. Display the budget on the UI
+
+    };
 
     var ctrlAddItem = function() {
         var input, newItem;
 
         // 1. Get the field input data
         input = UICtrl.getInput();      // console.log(input); // testing
 
-        // 2. Add the item to the budget controller
-        newItem = budgetCtrl.addItem(input.type, input.description, input.value);
-
-        // 3. Add the item to UI
-        UICtrl.addListItem(newItem, input.type);
+        /**
+         * We want steps 2 and above to happen, only when the input has some description and
+         * some income/expense value (not 0 & NaN). Therefore, we use an if statement to
+         * handle such a scenario, right here.
+         */
+        if (input.description !== "" && !isNaN(input.value) && input.value > 0) {
+            // 2. Add the item to the budget controller
+            newItem = budgetCtrl.addItem(input.type, input.description, input.value);
 
-        // 4. Clear the input HTML fields
-        UICtrl.clearFields();
+            // 3. Add the item to UI
+            UICtrl.addListItem(newItem, input.type);
 
-        // 5. Calculate the budget
+            // 4. Clear the input HTML fields
+            UICtrl.clearFields();
 
-        // 6. Display the budget at the UI
-
-        // console.log("Its okay!");   // testing
+            // 5. Calculate and update the budget
+            updateBudget();
+        }
     };
 
     // to be able to call the init() function from the global scope, we return an 
diff --git a/README.md b/README.md
@@ -73,4 +73,5 @@ Syntax -
       5. Function Constructors and Data Structures for Incomes & Expenses: [app.js](https://github.com/Ch-sriram/JavaScript/blob/d0fb4eafdf2613d8c692f8bbd4c22a63b0ead81c/JS-Objects-Functions-Advanced/project-budgety/script/app.js)
       6. Avoiding Data Structure Conflicts & Passing Data from One Module to Another: [app.js](https://github.com/Ch-sriram/JavaScript/blob/cc0f444858b3b1eb4860a9ee78add0b105ff9be2/JS-Objects-Functions-Advanced/project-budgety/script/app.js)
       7. Usage of <code>innerAdjacentHTML()</code> method & <code>replace()</code> method: [app.js](https://github.com/Ch-sriram/JavaScript/blob/ce2b3650d1745900ba8070af731c7ab75d8be2cf/JS-Objects-Functions-Advanced/project-budgety/script/app.js)
-      8. Usage of <code>querySelectorAll()</code> method, Conversion of <code>NodeList</code> to <code>Array</code> & the usage of <code>forEach()</code> method: [app.js](https://github.com/Ch-sriram/JavaScript/blob/345d673fb41d34d6bd98de97284219196220ead5/JS-Objects-Functions-Advanced/project-budgety/script/app.js)
+      8. Usage of <code>querySelectorAll()</code> method, Conversion of <code>NodeList</code> to <code>Array</code> & the usage of <code>forEach()</code> method: [app.js](https://github.com/Ch-sriram/JavaScript/blob/345d673fb41d34d6bd98de97284219196220ead5/JS-Objects-Functions-Advanced/project-budgety/script/app.js)
+      9. Converting HTML Field Inputs to Numbers & Preventing False Item Inputs: [app.js]()
