update for task simpleviewinc#6

src/filterGoatFacts.js

@@ -1,8 +1,9 @@
 /**
  * filterGoatFacts - Filters goat facts based on word and index
  */
-export const filterGoatFacts = (facts, word, number) => {
-  // console.log(`Step 6. Goat Facts filters!`)
+export const filterGoatFacts = (facts=[]) => {
+  const word = document.getElementById('word-input').value
+  const number = document.getElementById('number-input').value
 
   //If input is not matched the defined inputs => then return facts without filtered /
   if (!word || !number) {
@@ -12,8 +13,8 @@ export const filterGoatFacts = (facts, word, number) => {
   /** use JS filter function to filter out word in facts then check if it matched the word inputed and number input, the number input -1 is the index*/
   const filtered_facts = facts.filter(e => {
     const matched_word = e.split(' ')
-    // filter able to run only if number > 0 and less than size of matched_word
-    if (number <= matched_word.length && number > 0){
+    // filter able to run only if number > 0 and less than size of matched_word, or else will result empty
+    if (number <= matched_word.length && number > 0 && Number.isInteger(parseFloat(number))){
       //Just to compare for easier, if we want case sensitive we can remove .toLowerCast() 
       return matched_word[number - 1].toLowerCase() === word.toLowerCase()
     }

src/index.js

@@ -4,28 +4,30 @@ import { getGoatFacts } from './getGoatFacts'
 import { addGoatFacts } from './addGoatFacts'
 import { filterGoatFacts } from './filterGoatFacts'
 
+let facts; // Store the fetched facts here so we use for filteredFacts later
+
 /**
  * onGetGoatFacts - Action to update the goat facts displayed on the Dom
  */
 const onGetGoatFacts = async () => {
   // console.log(`Step 3. Should be called by the Get Goat Facts button!`)
+  // Reset the input fields
+    document.getElementById('word-input').value = ''
+    document.getElementById('number-input').value =''
+
+  facts = await getGoatFacts()
 
-  const word = document.getElementById('word-input').value
-  const number = document.getElementById('number-input').value
-
-  // we only want positive number which > 0 and not decimal
-  if (number !== "" && (number <= 0|| !Number.isInteger(parseFloat(number)))) {
-    alert('Please enter a positive number greater than 0')
-    return
-  }
-
-  const facts = await getGoatFacts()
-
-  //change filterGoatFacts function parameters to included word & number inputs
-  /** based on task description, 
-   * my assumption is that user input the fields then hit get Goat button to load new Facts with filtered */
-  const filteredFacts = filterGoatFacts(facts,word,number)
+  // comment out this filtered since we filter loaded facts when user input only
+  // const filteredFacts = filterGoatFacts(facts)
+
+  addGoatFacts(facts)
+}
 
+/**
+ * onFilterChange - Action to update the displayed goat facts when the filter inputs change for task #6
+ */
+const onFilterChange = () => {
+  const filteredFacts = filterGoatFacts(facts)
   addGoatFacts(filteredFacts)
 }
 
@@ -34,6 +36,11 @@ const onGetGoatFacts = async () => {
    * but given updated in future where we don't want to touch html and need more flexibility to update by js,
    * there maybe small delayed loading display when refresh the page */
 
+  // Create Filter Label
+  const lable = document.createElement('label');
+  lable.id = 'filter-label';
+  lable.textContent = 'Filter: ';
+
   // Create input fields
   const wordInput = document.createElement('input');
   wordInput.id = 'word-input';
@@ -50,10 +57,16 @@ const onGetGoatFacts = async () => {
    * but if there are more forms field, need to give them id name and grab it
   */
   const formDOM = document.querySelector('form')
+  formDOM.appendChild(lable);
   formDOM.appendChild(wordInput);
   formDOM.appendChild(numberInput);
 
   //Add eventlistener to call onGetGoatFacts when click the button
   const getGoatFactsButton = document.getElementById('get-goat-facts');
   getGoatFactsButton.addEventListener('click',onGetGoatFacts);
+
+  // Add event listeners to the inputs fields for Filter call 
+  // either 'change' or 'input' works but I want user finished enter before calling function
+  document.getElementById('word-input').addEventListener('change',onFilterChange);
+  document.getElementById('number-input').addEventListener('change',onFilterChange);
 })()