search

OriginCodeAcademy / Cohort10

Projects, code tests and resources for the 10th cohort of Origin Code Academy
4 stars 2 forks source link

02-CodePen-VanillaJS #129

Closed jasonvandewarker closed 7 years ago

jasonvandewarker commented 7 years ago
  1. Where can I find your CodePens? (Copy and paste links to each one) (Questions are answered at the bottom of each of the js sides

Problem 1 http://codepen.io/jasonvandewarker/pen/eWZeRd

Problem 2 http://codepen.io/jasonvandewarker/pen/LyNeNM

Problem 3 (did my best, but it definitely still doesn't work.) http://codepen.io/jasonvandewarker/pen/BRzjxz

seancahall commented 7 years ago

Could you pop all the answers to the code pens in here please?

jasonvandewarker commented 7 years ago

Sure can! Sorry about that! Q1

  1. What is the function of document.getElementById()? It prints the input to the HTML based on the HTML element id.

  2. What happens if you remove e.preventDefault() on line 18 and return false on line 37? (Delete these lines and play around with the app) Why does this happen? (Search 'e.preventDefault form' on Google)

The text is not captured. preventDefault cancels the default behavior of the browser, which in this case is to not capture the input.

  1. How do you grab the value of an input element using JavaScript? With the document.getElementById method and then storing the value in a variable.

  2. How do you set the innerHTML of a p element using JavaScript? By calling the ID from the p element and using document.getElementById method.

Q2

  1. What is the function of appendChild()? It makes a node the last child of a node.

  2. What is the function of createElement()? createElement creates the element that can then be filled with content from something like appendChild.

  3. What is the function of createTextNode()? createTextNode creates a node that can then be filled with the specified text.

  4. How would you go about implementing a remove todo feature? We would need to create another button for the remove feature. Instead of taking the value from the input, this button would need a clickevent that would find the last

  5. in the parent
      and remove it. removeAttribute() would work I think, but it would probably erase all the
    • , instead of just the last one.

Q3

  1. What is the function of document.getElementsByTagName? It returns all the element's child elements, and does it as a nodeList object that can be accessed by index numbers.

  2. What is the purpose of the .reduce function? This function reduces all of the numbers in an array down to one number, which is the same as adding them all together and creating a sum of all the numbers.

  3. What is the purpose of the setAttribute method? It adds the attribute node to an element, but if it already exists then it replaces it.

jasonvandewarker commented 7 years ago

I'm going to re-write Q2, 4 since it printed the html tags I used. I should have known that!

  1. How would you go about implementing a remove todo feature?

We would need to create another button for the remove feature. Instead of taking the value from the input, this button would need a clickevent that would find the last li in the parent ul and remove it. removeAttribute() would work I think, but it would probably erase all the li, instead of just the last one.