Lab 7: Mad Lib

      In this lab, we have to create a Mad Lib within a webpage where the user can enter multiple words into a paragraph to create their own story.Before this lab, I did even know what Mad Lib is. We have to use arrays to store all the variables of each words. And since there are so many words to enter, we need to use loops to make everything easier for ourselves. After learning about arrays and loops from Ms. Ramirez, we were given to use the codes in our own way to make it work. At first, I figure out how to create a loop to prompt the user for each word and put it in the array, but I was struggling to figure out how to use the loop to write each of the variables entered to the array into the HTML document. 

      First I created an id for every empty word that is being filled in. Create a CSS that separates that color of the nouns, the verbs, and the adjectives. Everything was easy until the time when I was trying to loop that array. I knew that I have to use  document.getElementById("id").innerHTML = arrN[i], but I really didn't know what is suppose to put in id. I tried ("ni"), (arrN[i]), (ni), and ("arrN[i]"). None of them worked. If I don't use the loop, I would have to write the same line of code so many, many times... 

Similar to this but with so much more arrays:

var arrN= [n1, n2];
for (i = 0; i < arrN.length; i++){
arrN[i] = prompt("Enter a noun.");
    
    }
  
    if (n1 != null) {
        document.getElementById("n1").innerHTML = arrN[0];
    }
if (n2 != null) {
        document.getElementById("n2").innerHTML = arrN[1];
    }

So I tried reading more online, researching to help myself figure this out at home. Then I finally found what I was look for, and it gave me the idea of what I am suppose to do. I love the moment when you figured the issue of the code that had been bothering you for days! Such an amazing filling! It's one of the best things about coding. I tried it in the Tryit Editor from W3schools, and it worked! I was so happy!

http://www.w3schools.com/code/tryit.asp?filename=FAJEHN5HCBEL

Instead of all of those I've tried, I was suppose to put ("n" + i) in the id.

like this:

var arrN = [];
var i;
for (i = 1; i <= 2 ; i++) {
    arrN[i] = prompt("enter");
    if(arrN[i] != null){
    document.getElementById("n" + i).innerHTML = arrN[i];
    }

}

So I applied this to the adjectives and verbs as well and it worked perfectly with some minor adjustments.
I'm just so pround that I had finally figured this out, fully understand it, and be able to apply and use it the way I want it to work.

https://thimbleprojects.org/jh19tommy2/149052/