diff --git a/E06.js b/E06.js new file mode 100644 index 0000000..f9d6cce --- /dev/null +++ b/E06.js @@ -0,0 +1,89 @@ +function convertCSVtoHTML(){ + + let title_input = document.getElementById("title-input").value; + let csv_input = document.getElementById("csv-input").value; + + let title = document.createTextNode(title_input); + + let table_title = document.getElementById("table_title"); + let table_content = document.getElementById("table_content"); + + table_title.innerHTML = ""; + table_content.innerHTML=""; + + table_title.style.borderTop = " .15rem solid black"; + table_title.style.borderRight = " .15rem solid black"; + table_title.style.borderLeft = " .15rem solid black"; + table_title.style.borderBottom = " .1rem solid black"; + + table_title.appendChild(title); + + let table = document.createElement("table"); + let tableCSVtoHTML = csv_input.split("\n"); + + tableCSVtoHTML.forEach(lines_of_table => { + + let line_word = lines_of_table.toString().split(","); + let line = document.createElement("tr"); + + line_word.forEach(words=>{ + + let word = document.createElement("td"); + let text = document.createTextNode(words); + word.appendChild(text); + line.appendChild(word); + + }) + + table.appendChild(line); + + }); + + table_content.appendChild(table); + +} + +function img_to_description(){ + + let imgs = [].slice.call(document.getElementsByTagName("img")); + + imgs.forEach(img => { + + let parent_of_img = img.parentElement; + let description = document.createTextNode(img.alt.toString()); + parent_of_img.removeChild(img); + parent_of_img.appendChild(description); + + }); +} + +function callGetByName(){ + + let tag = document.getElementById("inputTag").value; + getByName(document.body, tag); +} + +function getByName(node, elem){ + + let array_elements_tag_name = []; + + for(let i = 0; i < node.childNodes.length; i++){ + + let childNode = node.childNodes[i]; + + if(childNode.childNodes.length > 0){ + + getByName(childNode, elem); + } + if(childNode.tagName == elem){ + + array_elements_tag_name.push(childNode); + + } + + } + + console.log(array_elements_tag_name); + return array_elements_tag_name; +} + diff --git a/exemplo.csv b/exemplo.csv new file mode 100644 index 0000000..74a7529 --- /dev/null +++ b/exemplo.csv @@ -0,0 +1,19 @@ +QuotaAmount,StartDate,OwnerName,Username +150000,2016-01-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com +150000,2016-02-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com +150000,2016-03-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com +150000,2016-01-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com +150000,2016-02-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com +150000,2016-03-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com +150000,2016-01-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com +150000,2016-02-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com +150000,2016-03-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com +150000,2016-01-01,Catherine Brown,trailhead16.kojyepokybge@example.com +150000,2016-02-01,Catherine Brown,trailhead16.kojyepokybge@example.com +150000,2016-03-01,Catherine Brown,trailhead16.kojyepokybge@example.com +150000,2016-01-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com +150000,2016-02-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com +150000,2016-03-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com +150000,2016-01-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com +150000,2016-02-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com +150000,2016-03-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com \ No newline at end of file diff --git a/img/img02.png b/img/img02.png new file mode 100644 index 0000000..38d4da4 Binary files /dev/null and b/img/img02.png differ diff --git a/img/img03.png b/img/img03.png new file mode 100644 index 0000000..61f79cc Binary files /dev/null and b/img/img03.png differ diff --git a/img/img04.jpg b/img/img04.jpg new file mode 100644 index 0000000..20d9b7a Binary files /dev/null and b/img/img04.jpg differ diff --git a/img/img05.jpg b/img/img05.jpg new file mode 100644 index 0000000..baa04a7 Binary files /dev/null and b/img/img05.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..403ae90 --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + E-06 + + + + +
+ + E06-JavaScript-DOM +
+
+
+
+ +
+
+

Converter CSV para HTML Table

+
+
+ +
+ +
+
+
+
+ +
+

Formato CSV: sugestão de teste

+ +
+ +
+ +
+ + +
+
+ +
+ + +
+ +
+
+

Imagens

+
+
+ +
+
+ imagem 01 +
+
+ imagem 02 +
+
+ imagem 03 +
+
+ imagem 04 +
+
+ +
+ +
+ + +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..35a37b4 --- /dev/null +++ b/style.css @@ -0,0 +1,139 @@ +*{ + + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + + overflow-x: hidden; +} + + +.header{ + + text-align: center; + padding: 20px; + width: 100%; + color: black; + font-size: 35px; + font-weight: 400; + background-color: rgb(156, 97, 156); + border-bottom: 2px black solid; + border-top: 2px black solid; + margin-top: 20px; + +} + +#first_link{ + + text-decoration: none; +} + +.colunas{ + + text-align: center; + padding-left:4rem; + padding-right:4rem; + padding-top:2rem; + padding-bottom:1.5rem; + font-size: 18px; +} + +h1{ + + font-size: 24px; +} + +.title-area{ + + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.title-box{ + + padding: 12px; + background-color: rgb(156, 97, 156); + border-radius: 20px; + border: 2px solid black; + +} + +input{ + + margin-top: 20px; + width: 30%; + margin-bottom: 15px; +} + +.imgs{ + + margin-top: 20px; +} + + +.imgs img{ + + width: 90%; + margin-bottom: 20px; + border-radius: 15px; +} + +.button{ + + padding: 10px; + border-radius: 10px; + font-weight: 600; + font-size: 20px; + background-color: rgb(156, 97, 156); +} + +#table_title{ + + margin-top: 20px; + background-color: rgb(156, 97, 156); + font-weight: 600; + font-size: 22px; +} + +#down{ + margin-top: 30px; + justify-content: left; +} + +#down h1{ + font-size: 19px; +} + +.input_tag{ + + padding: 1rem; + width: 100%; +} + +.input_tag input{ + + padding: .3rem; + width: 100%; +} + + + + +tr, td{ + border: 1px solid black; +} + +table{ + width: 100%; +} + +td{ + + padding: 5px; +} + diff --git a/sugestion.html b/sugestion.html new file mode 100644 index 0000000..6f8aee6 --- /dev/null +++ b/sugestion.html @@ -0,0 +1,32 @@ + + + + + + + Sugestão + + + +

QuotaAmount,StartDate,OwnerName,Username
+ 150000,2016-01-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com
+ 150000,2016-02-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com
+ 150000,2016-03-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com
+ 150000,2016-01-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com
+ 150000,2016-02-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com
+ 150000,2016-03-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com
+ 150000,2016-01-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com
+ 150000,2016-02-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com
+ 150000,2016-03-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com
+ 150000,2016-01-01,Catherine Brown,trailhead16.kojyepokybge@example.com
+ 150000,2016-02-01,Catherine Brown,trailhead16.kojyepokybge@example.com
+ 150000,2016-03-01,Catherine Brown,trailhead16.kojyepokybge@example.com
+ 150000,2016-01-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com
+ 150000,2016-02-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com
+ 150000,2016-03-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com
+ 150000,2016-01-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com
+ 150000,2016-02-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com
+ 150000,2016-03-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com

+ + + \ No newline at end of file