From 32bc9e112dcd4bb81a1903943167aa44658fde40 Mon Sep 17 00:00:00 2001 From: Gabriel Benvindo Begnami Date: Thu, 16 Jun 2022 13:56:00 -0300 Subject: [PATCH 1/4] Lidando com Tabelas --- E06.js | 47 +++++++++++++++++++ index.html | 65 ++++++++++++++++++++++++++ styles.css | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ test.csv | 11 +++++ 4 files changed, 255 insertions(+) create mode 100644 E06.js create mode 100644 index.html create mode 100644 styles.css create mode 100644 test.csv diff --git a/E06.js b/E06.js new file mode 100644 index 0000000..8f5b0ac --- /dev/null +++ b/E06.js @@ -0,0 +1,47 @@ +function openModal() { + let modal = document.querySelector(".modal"); + + modal.style.display = "block"; +} + +function closeModal() { + let modal = document.querySelector(".modal"); + + modal.style.display = "none"; +} + +function createHTMLtable(titleText, csvData) { + let title = document.getElementById("title"); + let tableSpace = document.getElementById("tableSpace"); + + let table = document.createElement("table"); + let csvTable = csvData.split("\n"); + let h1 = document.createElement("h1"); + let text = document.createTextNode(titleText); + + h1.appendChild(text); + title.appendChild(h1); + + csvTable.forEach(line => { + let values = line.toString().split(","); + let tr = document.createElement("tr"); + + values.forEach(value => { + let td = document.createElement("td"); + td.appendChild(document.createTextNode(value)); + tr.appendChild(td); + }) + + table.appendChild(tr); + }) + + tableSpace.appendChild(table); +} + +function submitFunction() { + let titleInputValue = document.querySelector("#titleInput").value; + let csvInputValue = document.querySelector("#csvInput").value; + + createHTMLtable(titleInputValue, csvInputValue); + closeModal(); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e616dfe --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + + + E06-JavaScript + + +
+ +
+

CSV to HTML

+
+ +
Criar Tabela
+ +
+ +
+ +
+ +
+

+ Nova Tabela +

+
+ +
X
+ +
+ +
+
+ +
+
+
+
+ +
+

CSV:

+ +
+ + +
+
+ +
+ +
+ +
+
+
+
+ + + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b2ca43e --- /dev/null +++ b/styles.css @@ -0,0 +1,132 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: Verdana; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + margin: 0 auto; +} + +.header { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 70px; + + background-color: black; + color: white; + + margin-bottom: 20px; +} + +.button { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} + +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + animation: openingModal; + animation-duration: 1000ms; +} + +.modal-content { + background-color: #fefefe; + margin: auto; + border: 1px solid #888; + width: 30%; +} + +.modalHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px; + border-bottom: 1px solid black; +} + +.modalBody { + margin-top: 15px; + padding: 10px; +} + +.closeButton { + cursor: pointer; +} + +#titleInput { + width: 100%; + margin-bottom: 10px; +} + +#csvInput { + width: 100%; +} + +@keyframes openingModal { + from{opacity: 0;} + to{opacity: 1;} +} + +.main { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; +} + +.main > div { + margin: 5px; +} + +table { + border-collapse: collapse; + width: 100%; + min-width: 800px; +} + +td { + border: 1px solid black; + text-align: left; + padding: 15px; +} + +tr:first-child { + font-size: large; + background-color: black; + color: white; +} + +tr:nth-child(even) { + background-color: #dddddd; +} \ No newline at end of file diff --git a/test.csv b/test.csv new file mode 100644 index 0000000..cbdcc7d --- /dev/null +++ b/test.csv @@ -0,0 +1,11 @@ +name,role,country +Sarene,Help Desk Operator,Thailand +Olvan,Nurse Practicioner,China +Janos,Cost Accountant,China +Dolph,Assistant Manager,China +Ariela,Database Administrator I,Azerbaijan +Lane,Environmental Tech,Indonesia +Griselda,Senior Quality Engineer,Portugal +Manda,Physical Therapy Assistant,Brazil +Leslie,Information Systems Manager,Japan +Aleen,Cost Accountant,Canada \ No newline at end of file From 3cc27ad8468543daadc413bf9a7a4195870176ba Mon Sep 17 00:00:00 2001 From: Gabriel Benvindo Begnami Date: Thu, 16 Jun 2022 16:43:19 -0300 Subject: [PATCH 2/4] getByName --- E06.js | 12 ++++++++++++ index.html | 9 ++++++++- styles.css | 17 ++++++++++++++++- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/E06.js b/E06.js index 8f5b0ac..f950fd5 100644 --- a/E06.js +++ b/E06.js @@ -44,4 +44,16 @@ function submitFunction() { createHTMLtable(titleInputValue, csvInputValue); closeModal(); +} + +function getByName(node, elem, arrayAux) { + + for (var i = 0; i < node.childNodes.length; i++) { + let childNode = node.childNodes[i]; + + if(childNode.childNodes.length > 0) { getByName(childNode, elem, arrayAux); } + if(childNode.tagName == elem) { arrayAux.push(childNode); } + } + + return arrayAux; } \ No newline at end of file diff --git a/index.html b/index.html index e616dfe..63de1c3 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,9 @@

- +
+ +
@@ -58,6 +60,11 @@

+
+

Todos os direitos reservados

+

©Welcome121

+
+ diff --git a/styles.css b/styles.css index b2ca43e..4cd5961 100644 --- a/styles.css +++ b/styles.css @@ -23,7 +23,7 @@ body { justify-content: center; width: 100%; - height: 70px; + height: 100px; background-color: black; color: white; @@ -34,6 +34,7 @@ body { .button { background-color: #4CAF50; border: none; + border-radius: 5px; color: white; padding: 15px 32px; text-align: center; @@ -109,6 +110,20 @@ body { margin: 5px; } +.footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + height: 60px; + + border-top: 2px solid black; + position: absolute; + bottom: 0; +} + table { border-collapse: collapse; width: 100%; From 7012e1e383b91f0caeaf7faae576b0e6af7f8e20 Mon Sep 17 00:00:00 2001 From: Gabriel Benvindo Begnami Date: Thu, 16 Jun 2022 19:08:39 -0300 Subject: [PATCH 3/4] Um texto vale mais que mil imagens... --- E06.js | 29 +++++++++++----- index.html | 100 ++++++++++++++++++++++++++++++++--------------------- styles.css | 62 +++++++++++++++------------------ 3 files changed, 108 insertions(+), 83 deletions(-) diff --git a/E06.js b/E06.js index f950fd5..4a22e5f 100644 --- a/E06.js +++ b/E06.js @@ -11,18 +11,18 @@ function closeModal() { } function createHTMLtable(titleText, csvData) { - let title = document.getElementById("title"); - let tableSpace = document.getElementById("tableSpace"); - - let table = document.createElement("table"); - let csvTable = csvData.split("\n"); - let h1 = document.createElement("h1"); + let title = document.getElementById("tableTitle"); + let h1 = document.createElement("h5"); let text = document.createTextNode(titleText); h1.appendChild(text); title.appendChild(h1); - csvTable.forEach(line => { + let tableSpace = document.getElementById("tableSpace"); + let table = document.createElement("table"); + let csvTable = csvData.split("\n"); + + csvTable.forEach( (line) => { let values = line.toString().split(","); let tr = document.createElement("tr"); @@ -56,4 +56,17 @@ function getByName(node, elem, arrayAux) { } return arrayAux; -} \ No newline at end of file +} + +function imgToString(node) { + let images = document.getElementsByTagName("img"); + + images = [].slice.call(images); + images.forEach(image => { + let parent = image.parentElement; + let alt = document.createElement("p").appendChild(document.createTextNode(image.alt.toString())); + + parent.removeChild(image); + parent.appendChild(alt); + }); +} \ No newline at end of file diff --git a/index.html b/index.html index 63de1c3..961e8ab 100644 --- a/index.html +++ b/index.html @@ -11,60 +11,80 @@
-

CSV to HTML

+

E06

-
Criar Tabela
+
-
- -
- -
- -
-

- Nova Tabela -

-
- -
X
- -
+
-
-
+

CSS to HTML

-
-
-
-
- -
-

CSV:

- +
Nova tabela
+ +
+ +
+ +
+ +
+

+ Nova Tabela +

+
+ +
X
+
-
- +
+ + +
+
+
+
+ +
+

CSV:

+ +
+ +
+ +
+
- + +
+
- + +
+
+
-
+
-
-
-
-
+

Galeria de Imagens

-
-

Todos os direitos reservados

-

©Welcome121

-
+
Descrições
+
+ randow 01 + randow 02 +
+ +
+ randow 03 + randow 04 +
+ +
+ +
diff --git a/styles.css b/styles.css index 4cd5961..e095647 100644 --- a/styles.css +++ b/styles.css @@ -7,14 +7,9 @@ body { font-family: Verdana; } -.container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex-wrap: wrap; - - margin: 0 auto; +img { + margin: 10px; + border: 1px solid black; } .header { @@ -26,35 +21,36 @@ body { height: 100px; background-color: black; - color: white; + color: #4CAF50; margin-bottom: 20px; + border-bottom: 8px solid #4CAF50; } .button { background-color: #4CAF50; - border: none; border-radius: 5px; + border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; - margin: 4px 2px; + margin: 10px; cursor: pointer; } .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - padding-top: 100px; /* Location of the box */ + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ + width: 100%; + height: 100%; + overflow: auto; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ animation: openingModal; @@ -99,35 +95,31 @@ body { to{opacity: 1;} } -.main { +.column { display: flex; flex-direction: column; align-items: center; - margin-top: 50px; -} + justify-content: flex-start; -.main > div { - margin: 5px; + float: left; + width: 50%; + padding: 10px; } - -.footer { + +.row { display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - width: 100%; - height: 60px; + flex-direction: row; +} - border-top: 2px solid black; - position: absolute; - bottom: 0; +#tableTitle { + margin-top: 15px; + margin-bottom: 5px; } table { border-collapse: collapse; width: 100%; - min-width: 800px; + min-width: 500px; } td { From 47f78fba325ee6e44c8596d5aa0b0c0ae8be7bf9 Mon Sep 17 00:00:00 2001 From: Gabriel Benvindo Begnami Date: Sun, 19 Jun 2022 13:38:30 -0300 Subject: [PATCH 4/4] ajuste final --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 961e8ab..a9a26a2 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@

E06

-

CSS to HTML

+

CSV to HTML

Nova tabela
@@ -73,13 +73,13 @@

Galeria de Imagens

Descrições
- randow 01 - randow 02 + random 01 + random 02
- randow 03 - randow 04 + random 03 + random 04