The-Marcy-Lab-School · Devonte202 · Jan 21, 2020
diff --git a/exercises/part-1/index.html b/exercises/part-1/index.html
@@ -1,10 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
   <meta charset="UTF-8">
-  <title></title>
+  <title>Rendering Tables in js</title>
 </head>
 <body>
-
+  <table>
+    <thead id='tableHead'></thead>
+    <tbody id='tableBody'></tbody>
+  </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,29 @@
+const el = document.getElementsByTagName('html')
+const animals = [{name: 'Martin', species: 'Elephant'}, {name: 'Grace', species: 'Tiger'}]
+const cities = [{city_name: 'New York', state: 'NY', population: 8000000}, {city_name: 'San Fransisco', state: 'CA', population: 900000}]
+
+const renderDataTable = function(arr, element){
+    const tableHead = document.getElementById('tableHead')
+    const tableBody = document.getElementById('tableBody')
+
+    let tr = document.createElement('tr')
+
+    for(let item in Object.keys(arr[0])){
+        let th = document.createElement('th')
+        th.innerText = Object.keys(arr[0])[item]
+        tr.appendChild(th)
+        tableHead.appendChild(tr)
+    }
+
+    for (let obj in cities){
+        tr = document.createElement('tr')
+        for(let item in Object.values(arr[0])){
+           let td = document.createElement('td')
+           td.innerText = Object.values(arr[obj])[item]
+           tr.appendChild(td)
+           tableHead.appendChild(tr)
+        }
+    }
+}
+
+document.body.addEventListener("load", renderDataTable(animals, el));
diff --git a/exercises/part-2/index.html b/exercises/part-2/index.html
@@ -8,5 +8,7 @@
     <div id="contact">
       <p id="name">Joe</p>
     </div>
+    <button id='alert'>Click to Alert!</button>
+    <script type="text/javascript" src="index.js"></script>
   </body>
 </html>
diff --git a/exercises/part-2/index.js b/exercises/part-2/index.js
@@ -0,0 +1,15 @@
+let contact = document.getElementById('contact')
+let name = document.getElementById('name')
+let form = document.createElement('form')
+form.innerHTML = `
+                 <input id='newName' type="text" name="newName"/>
+                 <input type="submit" value="Submit"/>`
+
+name.addEventListener('dblclick', function(e){
+    contact.appendChild(form)
+})
+
+form.addEventListener('submit', function(e){
+    e.preventDefault()
+    name.innerText = document.getElementById("newName").value
+})
diff --git a/short-response.md b/short-response.md
@@ -3,6 +3,7 @@
 
 1. In your own words, answer the following questions: what is the Document Object Model? Why is it useful?
 
+  The document object model is essentially a visual representation of the HTML document and what's on it. It's useful because it gives developers the abiity to target specific HTML elements to affect using JavaScript.
 
 2. Given some HTML that looks like this:
 
@@ -15,6 +16,10 @@
 
 What are three different `document` methods that you could use to select the `a` element and store it into a variable?
 
+getElementById
+getElementByTagName
+querySelector
+
 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
@@ -31,7 +36,7 @@ What are three different `document` methods that you could use to select the `a`
       <script src="index.js" charset="utf-8"></script>
       ```
 
-      ```js
+      ```javascript
       const catForm = document.getElementById('new-cat');
 
       catForm.addEventListener('submit', function(){
@@ -44,6 +49,7 @@ What are three different `document` methods that you could use to select the `a`
         catList.append(catListItem);
       })
       ```
+  What the code is doing here is saving the input in the form to a variable called name. Then adding that name to the the innerText of an li element it's created. Then it appends that li element to the ul element called cat-list.
 
 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.
 
@@ -61,9 +67,15 @@ What are three different `document` methods that you could use to select the `a`
         console.log("Logging...")
       })
       ```
+  The first two lines within the event listener can be removed. This is because there is no default behavior to the button that needs to be prevented and there is no propogation of this event that needs to be stopped.
 
 7. When developing web applications, what are some examples of events that a user might initiate? Describe at least five.
-
+
+  'dblclick'
+  'keydown'
+  'click'
+  'load'
+  'submit'
 
 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 +102,4 @@ What are three different `document` methods that you could use to select the `a`
 
       button.addEventListener('click', handleClick)
       ```
+  This button in html is saved to a variable and then a function that returns an alert is created. Then a click event listener is added to the button with a callback function of the function created before it. So when the button is pressed, the the page alerts.