Created
June 28, 2017 22:15
-
-
Save the-vampiire/6f834a18544c6b8703ca91cc554d2d04 to your computer and use it in GitHub Desktop.
Caleb Notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>test</title> | |
| </head> | |
| <body> | |
| <div id="test"> | |
| </div> | |
| <script> | |
| const johnTasks = [ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "clean bathroom" , "link" : "https://docs.google.com/document/d/1gVWWRjhzTF4yLdtfdJ5Zl_QhuT0eARCNb6PDpYIh1_k/edit?usp=sharing" }, {"task" : "clean room" , "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "vacuum stairs" , "link" : "https://docs.google.com/document/d/1Rh2sb5NeL7UUX3zQh3NTptvBUTEfzk9-H9awoQxjeL4/edit?usp=sharing"}, {"task" : "vacuum room" , "link" : "https://docs.google.com/document/d/1Rh2sb5NeL7UUX3zQh3NTptvBUTEfzk9-H9awoQxjeL4/edit?usp=sharing"} ,{"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}, {"task" : "litter box", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}], | |
| /*-----------------------------------------------------------------------------------------------------*/ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "laundry", "link" : "https://docs.google.com/document/d/1WH8sI6k9NkxJk9EjLSxdO2lUakUACQVc754OJVImqSI/edit?usp=sharing"}, {"task" : "dishes", "link" : "https://docs.google.com/document/d/1tssLdHRAWE0ClDTU3BM97zzy1cxbbfrBfHTHPkuYo6k/edit?usp=sharing"}, {"task" : "clean room", "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}], | |
| /*-----------------------------------------------------------------------------------------------------*/ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "clean room" , "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}], | |
| /*-----------------------------------------------------------------------------------------------------*/ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "laundry", "link" : "https://docs.google.com/document/d/1WH8sI6k9NkxJk9EjLSxdO2lUakUACQVc754OJVImqSI/edit?usp=sharing"}, {"task" : "clean bathroom" , "link" : "https://docs.google.com/document/d/1gVWWRjhzTF4yLdtfdJ5Zl_QhuT0eARCNb6PDpYIh1_k/edit?usp=sharing"}, {"task" : "dishes", "link" : "https://docs.google.com/document/d/1tssLdHRAWE0ClDTU3BM97zzy1cxbbfrBfHTHPkuYo6k/edit?usp=sharing"}, {"task" : "clean room" , "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}, {"task" : "litter box", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}], | |
| /*-----------------------------------------------------------------------------------------------------*/ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "clean room", "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}], | |
| /*-----------------------------------------------------------------------------------------------------*/ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "laundry", "link" : "https://docs.google.com/document/d/1WH8sI6k9NkxJk9EjLSxdO2lUakUACQVc754OJVImqSI/edit?usp=sharing"}, {"task" : "dishes", "link" : "https://docs.google.com/document/d/1tssLdHRAWE0ClDTU3BM97zzy1cxbbfrBfHTHPkuYo6k/edit?usp=sharing"}, {"task" : "clean room", "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}, {"task" : "litter box", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}], | |
| /*-----------------------------------------------------------------------------------------------------*/ | |
| [{"task" : "read", "link" : "https://docs.google.com/document/d/1eyqJ3GBv60w1KvTFjb1d7mfXfo1uzf08WQ1EywZZbAg/edit?usp=sharing"}, {"task" : "clean bathroom" , "link" : "https://docs.google.com/document/d/1gVWWRjhzTF4yLdtfdJ5Zl_QhuT0eARCNb6PDpYIh1_k/edit?usp=sharing"}, {"task" : "clean room", "link" : "https://docs.google.com/document/d/1-ra47GMYpdgHg2YdQZFgoyp_6yqXIJAqDUTz4tk1sXk/edit?usp=sharing"}, {"task" : "feed Ike", "link" : "https://docs.google.com/document/d/1b5IHkjjpczb_OOvxYF6_UklvrMYlsQThVn8yowed43k/edit?usp=sharing"}] | |
| ]; | |
| // sample for johnTasks element 0, the "Sunday" array of task and link objects | |
| // ** using let instead of var, this is all written in ES6 javascript which is the most current adopted standard ** | |
| // let is for variables, can be changed | |
| // elements in this case | |
| // const is for constants, can not be changed | |
| // the johnTask array which is constant and never changed | |
| // this is a forEach array method. it acts the same as for(i; i < x.length; i++). it will iterate through Each element | |
| // in the array. it takes 3 parameters element, index, and array - | |
| // the last 2 are optional and are often abbreviated (e, i, a): | |
| // e --> element of the array the "Each" of the forEach method | |
| // i --> index of the current element | |
| // a --> array that is being iterated through | |
| // most of the time you will just use e unless you specifically need the index or array for other operations | |
| // typical format looks like this, when not using the arrow function: | |
| // array.forEach( function(element){ | |
| // do stuff to the element here | |
| // }); | |
| // this is also introducing an arrow function which speeds up the code and looks cleaner | |
| // function(parameter){ | |
| // block of code goes here | |
| // } | |
| // is the same as | |
| // parameter => one line of code; | |
| // this is the tightest format. if using a SINGLE parameter and SINGLE line of code you can write it | |
| // one parameter --> parenthesis not necessary | |
| // one line of code --> curly brackets not necessary | |
| // or if using more than one parameter and single line of code: | |
| // (parameter1, parameter2) => { | |
| // multiple | |
| // lines of code; | |
| // } | |
| // so in our case our function is forEach and we only use a single parameter [element] | |
| // .forEach( element => { block of code }); | |
| // one parameter [element] so no use of parenthesis | |
| // multiple lines of code so we use the curly brackets | |
| johnTasks[0].forEach( element => { | |
| // create list element | |
| let li = document.createElement('li'); | |
| // create link anchor element | |
| let a = document.createElement('a'), | |
| // extract the task link and text from the object element in the day array | |
| link = element.link, | |
| text = element.task; | |
| // create a text node which will store the task text | |
| let textNode = document.createTextNode(text); | |
| // set the href of the anchor element to be the url link | |
| a.href = link; | |
| // append the task text to the anchor element | |
| a.append(textNode); | |
| // append the full formed anchor element to the list element | |
| li.appendChild(a); | |
| // append the fully formed link element to the target div in your html | |
| document.getElementById('test').appendChild(li); | |
| }); | |
| // for comparison here is how it would look using your standard for loop | |
| // still using the sunday, [0], array of task and link objects | |
| for(let i = 0; i < johnTasks[0].length; i++){ | |
| let li = document.createElement('li'); | |
| let a = document.createElement('a'), | |
| link = element.link, | |
| text = element.task; | |
| let textNode = document.createTextNode(text); | |
| a.href = link; | |
| a.append(textNode); | |
| li.appendChild(a); | |
| document.getElementById('test').appendChild(li); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment