diff --git a/exercises/part-1/index.html b/exercises/part-1/index.html index 800bea1..ef14602 100644 --- a/exercises/part-1/index.html +++ b/exercises/part-1/index.html @@ -2,9 +2,17 @@ + + + - + + + +
+ + diff --git a/exercises/part-1/index.js b/exercises/part-1/index.js index e69de29..63064c3 100644 --- a/exercises/part-1/index.js +++ b/exercises/part-1/index.js @@ -0,0 +1,75 @@ +function renderDataTable(arr, el){ + const element = document.getElementById(el); + const thead = document.createElement('thead'); + const row = document.createElement('tr'); + const tbody = document.createElement('tbody'); + + + // loop for table heading + element.appendChild(thead); + const keys = Object.keys(arr[1]); + for(let i = 0; i< keys.length; i++){ + + thead.appendChild(row); + const head = document.createElement('th'); + row.appendChild(head); + head.innerHTML = keys[i]; + } + // nested loop for table data + element.appendChild(tbody); + for(let i = 0; i < arr.length; i ++){ + + const createRow = tbody.insertRow(-1); + const valueArr = Object.values(arr[i]); + + for(let y = 0; y < keys.length; y++){ + const newCells = createRow.insertCell(y); + newCells.append(valueArr[y]); + + } + } +} + + +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 fellows = [{ + Name: 'Enmanuel', + Age: 19, + Tag: '@edln', + 'Favorite Color': 'blue', + }, + { + Name: 'Devonte', + Age: 20, + Tag: '@the_engineer', + 'Favorite Color': 'purple', + }, + { + Name: 'Laisha', + Age: 19, + Tag: '@newJnewMe', + 'Favorite Color': 'pink', + }, + { + Name: 'Cielo', + Age: 19, + Tag: '@enElCielo', + 'Favorite Color': 'yellow', + }, + { + Name: 'Paul', + Age: 21, + Tag: '@paully', + 'Favorite Color': 'red', + }, +]; + + +renderDataTable(fellows, 'table'); diff --git a/exercises/part-2/index.html b/exercises/part-2/index.html index c31081a..af2141f 100644 --- a/exercises/part-2/index.html +++ b/exercises/part-2/index.html @@ -5,8 +5,12 @@ Part 2 - Events +
-

Joe

+

Joe

+ + + diff --git a/exercises/part-2/index.js b/exercises/part-2/index.js index e69de29..340858c 100644 --- a/exercises/part-2/index.js +++ b/exercises/part-2/index.js @@ -0,0 +1,23 @@ +const name = document.getElementById('name'); +const contact = document.getElementById('contact'); + + +name.addEventListener('click', function(e){ + event.preventDefault(); + const input = document.createElement('input'); + input.setAttribute('id', 'input') + + const save = document.createElement('button'); + save.setAttribute('id','save_button'); + save.innerText = 'Save'; + contact.appendChild(input); + contact.appendChild(save); + + save.addEventListener('click', function(e){ + name.innerHTML = input.value; + + }) + +}) + + diff --git a/short-response.md b/short-response.md index 9ff85aa..56417c9 100644 --- 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 DOM is a tree of nodes and every node in the DOM contains an object. It is helpful because it allows us to manipulate and access nodes in the tree to change the DOM in any way we would like. 2. Given some HTML that looks like this: @@ -12,8 +12,11 @@ About Our Listings ``` - What are three different `document` methods that you could use to select the `a` element and store it into a variable? +-You are able to manipuate or use the ‘a’ element with: +1. document.getElementbyTagName(‘a’) +2. document.getElementByClassName(‘primary’) +3. document.getElementById(‘about’) 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? @@ -44,6 +47,10 @@ What are three different `document` methods that you could use to select the `a` catList.append(catListItem); }) ``` +- We are storing the form with the id ‘new-cat’ in the variable ‘catForm’ +- Then we are adding an event listener to ‘catForm’ that takes in a callback function when that will execute when the form is submitted +- In the callback function, will create a new ‘li’ element in the doc that will have the input value the user inputs as inner text. +- This will then be appended into the ‘cat-list’ element in the dom which is an unordered 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,11 +68,22 @@ What are three different `document` methods that you could use to select the `a` console.log("Logging...") }) ``` +- In the js file, if the lines that prevent the default and stop propagation were removed the behavior of the button would remian the same. + + 7. When developing web applications, what are some examples of events that a user might initiate? Describe at least five. -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? +There are different events a user can initiate to trigger a change in the DOM. We can add event listeners to listen to specific ‘events’ that occur to different elements, for example: +- mouse events: mousedown, mouseup, click, dblclick, mousemove ect. These event will be tirggered is a user ‘clicks’ on an element with their mouse, or finger dependin gon the device they are using. +- Touch events: touchstart, touchmove, touchend, and touchcancel. These events happen with touch sensitive surfaces that a user can be using to interact with dom elements. Touches are represented by the Touch object +- keyboard events: keydown, keypress, and keyup. These keyboard events refer to a key a user is pressing and different keys that are initiated on the keyboard can be specified. +- form events: focus, blur, change, and submit. These events describe how a user might interact with a form on the DOM. +- window events: scroll, resize, hashchange, load, and unload. These events describe how a user can interact with a webpage and are also events that can be used to trigger a change in the DOM. + + +8. Given the following HTML file, describe what would happen when a user clicks the "Alert" button? What change would you need to make our "handleClick" function fire? ```html @@ -90,3 +108,4 @@ What are three different `document` methods that you could use to select the `a` button.addEventListener('click', handleClick) ``` +- The ‘handleClick’ function works perfectly but in the HTML the script tag should go under the body. This is to make sure that in the JS file, we are able to get elements from the DOM because the HTML would be fully loaded.