The-Marcy-Lab-School · mgriffith-v · Jan 21, 2020
diff --git a/exercises/part-1/index.html b/exercises/part-1/index.html
@@ -5,6 +5,11 @@
   <title></title>
 </head>
 <body>
-
+  <table id = 'animals'>
+    <tr>
+      <td></td>
+    </tr>
+  </table>
+  <script type="text/javascript" src="index.js"></script>
 </body>
 </html>
diff --git a/exercises/part-1/index.js b/exercises/part-1/index.js
@@ -0,0 +1,34 @@
+const el = document.getElementById('animals');
+const animals = [{name: 'Martin', species: 'Elephant'}, {name: 'Grace', species: 'Tiger'}];
+
+
+function renderDataTable(data, el) {
+
+  const table = document.createElement('table');
+  const thead = document.createElement('thead');
+  const nameKeys = Object.keys(data[0]);
+  for (let i = 0; i < nameKeys.length; i += 1) {
+    const th = document.createElement('th');
+    th.innerText = `${nameKeys[i]}`;
+    thead.appendChild(th);
+  }
+
+  table.appendChild(thead);
+
+  const tbody = document.createElement('tbody');
+  for (let i = 0; i < data.length; i += 1) {
+    const tr = document.createElement('tr');
+    const nameValues = Object.values(data[i]);
+
+    for (let j = 0; j < nameValues.length; j += 1) {
+      const td = document.createElement('td');
+      td.innerHTML = `${nameValues[j]}`;
+      tr.appendChild(td);
+    }
+
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  el.appendChild(table);
+}
+renderDataTable(animals, el);
diff --git a/exercises/part-2/index.js b/exercises/part-2/index.js
@@ -0,0 +1,25 @@
+const container = document.getElementById('contact');
+
+function switchInput() {
+
+  const switchForm = `
+    <form id ='form'>
+      <label for='new-input'>Name:</label>
+      <input type='text' name='new-name' id='new-input'> 
+      <input type="submit" value="Submit" id ="submit">
+    <form>
+  `;
+  container.innerHTML = switchForm;
+
+  // adds an event listener on the form to change it back to a p tag with a new inout value
+  const form = document.getElementById('form');
+  const input = document.getElementById('new-input');
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const p = document.createElement('p');
+    container.innerHTML = `<p>${input.value}</p>`;
+    container.appendChild(p);
+  });
+}
+
+container.addEventListener('dblclick', switchInput);
diff --git a/short-response.md b/short-response.md
@@ -2,7 +2,8 @@
 ## Short Response Section 
 
 1. In your own words, answer the following questions: what is the Document Object Model? Why is it useful?
-
+The Document Object Model is a representation of the structure and content of the web page. 
+This representation treats the HTML document as a tree where each node is an object representing a part of the document.
 
 2. Given some HTML that looks like this:
 
@@ -15,6 +16,13 @@
 
 What are three different `document` methods that you could use to select the `a` element and store it into a variable?
 
+```javascript
+  const a1 = document.getElementById('about');
+  const a2 = document.getElementsByTagName('a');
+  const a3 = document.getElementsByClassName('primary');
+  ```
+
+
 5. Assuming we have the following code in an HTML file. Describe what the JavaScript code is doing. What would happen when we submit the form?
 
       ```html
@@ -44,6 +52,11 @@ What are three different `document` methods that you could use to select the `a`
         catList.append(catListItem);
       })
       ```
+
+      On line 1 we are declaring a variable called `catForm` and we are storing the form into this variable. 
+      We are capturing this element by its `Id` which is `new-cat`. We add an event to our form with its event type being `submit` and this event only fires when a user clicks the `button` or `input type ='submit'` inside the `form`. 
+      We also pass a callback function to our eventListener and inside this function we create an `input` variable which grabs the form element at index 1. When we submit the form, on line 12 we append the li element we created,`catListItem`,and we append this element to `catList` element which we capture  by using its id `catList`. 
+      On the page 'Create Cat' appear as an `li` element because we reassign `li` innerText to `name` which is the input value of our form in our html.
 
 6. The following HTML and JavaScript creates a button that logs a message to the console each time it is clicked. What line or lines of code could you remove from the JavaScript file and keep the same behavior? Assume that the JavaScript file is being loaded into the HTML via a script tag.
 
@@ -63,6 +76,10 @@ What are three different `document` methods that you could use to select the `a`
       ```
 
 7. When developing web applications, what are some examples of events that a user might initiate? Describe at least five.
+8. 
+ One such event might be a click event, for when a user click a button ,
+keypress events for when a user press on a key ,keydown events for when a user stops pressing a button, scroll events for when a user scrolls the page, and finally propagtion.
+Event handlers can call propagtion to stop events from propagting or passing the event onto the child node.
 
 
 8. Given the following HTML file, describe what would happen when a user clicks the "Alert" button? What change would you need to make to make our "handleClick" function fire?
@@ -90,3 +107,5 @@ What are three different `document` methods that you could use to select the `a`
 
       button.addEventListener('click', handleClick)
       ```
+When a user clicks the button it should send an alert with the message "I was clicked!" 
+In this case it will not because `script` tag that links our javascript and html to perform this function is placed in `head`. The DOM doesn't get a chance to load the element required for the script and the script cannot build the event listener because of this.