From a43aedb3ed4c21b63f176a0949be24c2096ea2b1 Mon Sep 17 00:00:00 2001 From: EC2 Default User Date: Tue, 21 Jan 2020 09:11:45 +0000 Subject: [PATCH 1/3] completed short response and code challenge --- exercises/part-1/index.html | 10 +++++++++- exercises/part-1/index.js | 36 ++++++++++++++++++++++++++++++++++++ exercises/part-2/index.html | 6 +++++- exercises/part-2/index.js | 23 +++++++++++++++++++++++ short-response.md | 25 ++++++++++++++++++++++--- 5 files changed, 95 insertions(+), 5 deletions(-) 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..1e18ca3 100644 --- a/exercises/part-1/index.js +++ b/exercises/part-1/index.js @@ -0,0 +1,36 @@ +function renderDataTable(arr, el){ + const element = document.getElementById(el); + const thead = document.createElement('thead'); + const row = document.createElement('tr') + // loop for table heading + const keys = Object.keys(arr[1]); + for(let i = 0; i< keys.length; i++){ + element.appendChild(thead); + thead.appendChild(row); + const head = document.createElement('th'); + row.appendChild(head); + head.innerHTML = keys[i]; + } + // nested loop for table data + for(let i = 0; i < arr.length; i ++){ + const createRow = element.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}] + +renderDataTable(cities, '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..dae8d2a 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: +document.getElementbyTagName(‘a’) +document.getElementByClassName(‘primary’) +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. From e0b9bd3963d17daff4d7c1011f5a4715fee1c8ed Mon Sep 17 00:00:00 2001 From: EC2 Default User Date: Tue, 21 Jan 2020 09:15:27 +0000 Subject: [PATCH 2/3] changes to short response --- short-response.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/short-response.md b/short-response.md index dae8d2a..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. +- 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: @@ -14,9 +14,9 @@ ``` 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: -document.getElementbyTagName(‘a’) -document.getElementByClassName(‘primary’) -document.getElementById(‘about’) +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? @@ -47,10 +47,10 @@ document.getElementById(‘about’) 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. +- 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. @@ -68,7 +68,7 @@ This will then be appended into the ‘cat-list’ element in the dom which is 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. +- 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. @@ -76,11 +76,11 @@ This will then be appended into the ‘cat-list’ element in the dom which is a 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. +- 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. +- 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? @@ -108,4 +108,4 @@ There are different events a user can initiate to trigger a change in the DOM. W 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. +- 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. From 8511f6c82b6830a4aa9a3a3e9d8ae64b490dc7d9 Mon Sep 17 00:00:00 2001 From: EC2 Default User Date: Tue, 21 Jan 2020 22:13:19 +0000 Subject: [PATCH 3/3] updated part 1 table --- exercises/part-1/index.js | 47 +++++++++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/exercises/part-1/index.js b/exercises/part-1/index.js index 1e18ca3..63064c3 100644 --- a/exercises/part-1/index.js +++ b/exercises/part-1/index.js @@ -1,19 +1,25 @@ function renderDataTable(arr, el){ const element = document.getElementById(el); const thead = document.createElement('thead'); - const row = document.createElement('tr') + 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++){ - element.appendChild(thead); + 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 = element.insertRow(-1); + + const createRow = tbody.insertRow(-1); const valueArr = Object.values(arr[i]); for(let y = 0; y < keys.length; y++){ @@ -32,5 +38,38 @@ const animals = [ 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(cities, 'table'); +renderDataTable(fellows, 'table');