The-Marcy-Lab-School · CieloRaymundo · Jan 21, 2020
diff --git a/exercises/part-1/index.css b/exercises/part-1/index.css
@@ -0,0 +1,12 @@
+table {
+    border: 1px black solid;
+    border-collapse: collapse;
+}
+
+table th {
+    border: 1px black solid;
+}
+
+table td {
+    border: 1px black solid;
+}
diff --git a/exercises/part-1/index.html b/exercises/part-1/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title></title>
+  <title>Table</title>
+  <link rel="stylesheet" href="index.css" type="text/css" />
 </head>
-<body>
-
+<body id = "body">
+  <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,41 @@
+function renderDataTable(arrObj, el){
+    const body = document.getElementById('body');
+    const table = document.createElement('table');
+    table.setAttribute("id", el);
+
+    const thead = document.createElement('thead');
+    const tbody = document.createElement('tbody'); 
+
+    for (let i = 0; i < Object.keys(arrObj[0]).length; i++){
+        const keys = Object.keys(arrObj[0]);
+        const th = document.createElement('th');
+        th.innerHTML = keys[i];
+
+        thead.appendChild(th);
+        table.appendChild(thead);
+    }
+
+    for (let i = 0; i < arrObj.length; i++){
+        const values = Object.values(arrObj[i]);
+        const tr = document.createElement('tr');
+
+        for (let j = 0; j < values.length; j++){
+            const td = document.createElement('td');
+            td.innerHTML = values[j];
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+        table.appendChild(tbody);
+    }
+
+    body.appendChild(table);
+}
+
+
+const animals = [{name: 'Martin', species: 'Elephant'}, {name: 'Grace', species: 'Tiger'}]
+const el = document.getElementById('animals')
+renderDataTable(animals, el)
+
+const cities = [{city_name: 'New York', state: 'NY', population: 8000000}, {city_name: 'San Fransisco', state: 'CA', population: 900000}]
+const el1 = document.getElementById('cities')
+renderDataTable(cities, el1)
diff --git a/exercises/part-2/index.html b/exercises/part-2/index.html
@@ -8,5 +8,6 @@
     <div id="contact">
       <p id="name">Joe</p>
     </div>
+    <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,27 @@
+document.getElementById("name").addEventListener("dblclick",addSubmit);
+
+function addSubmit(){
+    const  contact = document.getElementById('contact');
+    const form = document.createElement('form');
+    const input = document.createElement('input');
+    const button = document.createElement('input');
+
+    input.setAttribute("type", "text");
+    input.setAttribute("id", "newInput");
+    button.setAttribute("type", "submit");
+    button.setAttribute("id", "bttn");
+
+    contact.appendChild(form);
+    form.appendChild(input);
+    form.appendChild(button);
+}
+
+const contact = document.getElementById("contact");
+
+contact.addEventListener("submit",changeHead);
+
+function changeHead(e){
+     e.preventDefault();
+    let newHead = document.getElementById("newInput").value;
+    document.getElementById("name").innerHTML = `${newHead}`;
+}
diff --git a/short-response.md b/short-response.md
@@ -2,7 +2,7 @@
 ## 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 like a skeleton or outline of the html elements in a webpage
 
 2. Given some HTML that looks like this:
 
@@ -14,6 +14,12 @@
       ```
 
 What are three different `document` methods that you could use to select the `a` element and store it into a variable?
+  ```javascript
+  let aVar = document.getElementById("about");
+  let aVar1 = document.getElementByClassName("primary");
+  let aVar2 = document.getElementByTagName("a");
+
+  ```
 
 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?
 
@@ -45,6 +51,8 @@ What are three different `document` methods that you could use to select the `a`
       })
       ```
 
+When the submit button is clicked then the user input element is saved to the variable "input", while it's value is  being saved to the variable "name". Later in the unordered list a new list element is created and it's text is changed to the value the user had inputed and then it's added to the list. In other words, the input that the user has submitted on the form will now be part of the cat list and be visible on the page.
+
 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.
 
       ```html
@@ -61,9 +69,11 @@ What are three different `document` methods that you could use to select the `a`
         console.log("Logging...")
       })
       ```
+You can remove stopPropagation since having it doesn't really effect the parent elements
 
 7. When developing web applications, what are some examples of events that a user might initiate? Describe at least five.
 
+click, exit, back, key pressing, refresh
 
 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 +100,4 @@ What are three different `document` methods that you could use to select the `a`
 
       button.addEventListener('click', handleClick)
       ```
+When you click the button the page would simply alert "I was clicked!". To make this better you can add a picture to the body of a picture of a cute animal that says "Thanks for clicking me!  :)"