From 3fa6cb3961a3b2e547d77f3120b64bffaef77a33 Mon Sep 17 00:00:00 2001 From: Eric-Catarina <102993694+Eric-Catarina@users.noreply.github.com> Date: Sun, 19 Jun 2022 13:51:15 -0300 Subject: [PATCH] Ex01 Eric js --- E06Eric.js | 34 +++++++++++++++++++++++++ sample1.txt | 8 ++++++ "site\303\211ric.html" | 40 +++++++++++++++++++++++++++++ style.css | 58 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 140 insertions(+) create mode 100644 E06Eric.js create mode 100644 sample1.txt create mode 100644 "site\303\211ric.html" create mode 100644 style.css diff --git a/E06Eric.js b/E06Eric.js new file mode 100644 index 0000000..f649fc6 --- /dev/null +++ b/E06Eric.js @@ -0,0 +1,34 @@ +function geraTabelaHTML() { + + let tabela = document.getElementById("Tabela") + let textoCsvDesformatado = document.getElementById("FormularioRecebeCSV").value + let textoCsvDesformatadoString = textoCsvDesformatado.toString() + let csvDivididoEmLinhas = textoCsvDesformatadoString.split("\n") + let linhaInicial = csvDivididoEmLinhas[0].split(",") + let todosElementosString = csvDivididoEmLinhas.toString() + let todosElementosSeparados = todosElementosString.split(",") + let numeroTotalElementos = todosElementosSeparados.length + let numeroDeColunas = linhaInicial.length + let numerodeLinhas = numeroTotalElementos / numeroDeColunas + let indiceTableRow = 0 + function geraTrs() { + for (let i = 1; i < numerodeLinhas; i++) { + let tabelasSecas = document.createElement("tr") + tabela.append(tabelasSecas) + } + } + function geraTabela() { + for (i = 0; i <= numeroTotalElementos; i++) { + if (i % numeroDeColunas == 0 && i != 0) { + indiceTableRow++ + } + let tableRowAtual = tabela.getElementsByTagName("tr")[indiceTableRow] + let textNodeAtual = document.createTextNode(todosElementosSeparados[i]) + let tableDataAtual = document.createElement("td") + tableDataAtual.append(textNodeAtual) + tableRowAtual.append(tableDataAtual) + } + } + geraTrs() + geraTabela() +} diff --git a/sample1.txt b/sample1.txt new file mode 100644 index 0000000..fac20cc --- /dev/null +++ b/sample1.txt @@ -0,0 +1,8 @@ +nome,idade +ulisses,18 +eric,16 +machado,10 +Amanda,17 +Benvas,89 +claudio,11 +cordeio,19 diff --git "a/site\303\211ric.html" "b/site\303\211ric.html" new file mode 100644 index 0000000..17d7425 --- /dev/null +++ "b/site\303\211ric.html" @@ -0,0 +1,40 @@ + + + + + + + E06Éric + + + + + +
+

Tabela CSV em HTML:

+ + + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5c613e8 --- /dev/null +++ b/style.css @@ -0,0 +1,58 @@ +*{ + margin: initial; +} +#header{ + + text-align: center; + background-color: #484D51; + width: 100%; + height: 200px; + color: #D2E4F1; + font-size: 2.5em; + + } + +td, table{ + + border: 2px solid #99CDA9; + + border-collapse: collapse ; + background-color: #E5F4E7; + text-align: center; + padding: 6px; + justify-content: center; + +} +body{ + background: #D2E4F1; +} +button{ + color: #484D51; + background-color: aliceblue; + height: 80px; + + border-radius: 8px; + + + + +} +textarea{ + background-color:aliceblue; + color: #576a77; + margin-left: 50px; + width: 300px; + height: 80px; + border-radius: 8px; +} +#information{ + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 20px; +} +#Tabela{ + justify-content: center; +} + +