From 7b11b514ea9acce1e79e8f8bb9ca78f0fc509bdb Mon Sep 17 00:00:00 2001 From: HannahLLS <87147025+HannahLLS@users.noreply.github.com> Date: Wed, 22 Jun 2022 17:15:27 -0300 Subject: [PATCH] Atividade E10 : JavaScript & HTML e DOM --- Pagina.html | 54 +++++++++++++++++ functions.js | 44 ++++++++++++++ style.css | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 264 insertions(+) create mode 100644 Pagina.html create mode 100644 functions.js create mode 100644 style.css diff --git a/Pagina.html b/Pagina.html new file mode 100644 index 0000000..bee889d --- /dev/null +++ b/Pagina.html @@ -0,0 +1,54 @@ + + + + + + + Documento + + + + +
+ +
+

CONVERSOR DE CSV PARA TABELA HTML

+
+ +
+
+
+

Converter tabela

+
+ +
+ +
+ +
+ +
+

Nome da tabela

+

Tabela formato CSV:

+
+ +
+
+ +
+
+

Coverter imagem

+
+ +
+ img_1 | +
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/functions.js b/functions.js new file mode 100644 index 0000000..6c45479 --- /dev/null +++ b/functions.js @@ -0,0 +1,44 @@ +function HTMLtabela() { + + let CSV_text = document.getElementById("CSV_text").value.toString(); + let tabelaArea = document.getElementById("tabelaArea"); + let tabelaLinhas = CSV_text.split("\n"); + + let tabelaNome = document.createElement("h2"); + let tabela = document.createElement("Tabela"); + + tabelaNome.appendChild( document.createTextNode( document.getElementById( "tabelaNome" ).value.toString() ) ) + tabelaArea.appendChild(tabelaNome); + + tabelaLinhas.forEach( (linhas) => { + let column = line.toString().split(", "); + let tabelaLine = document.createElement("tr"); + + column.forEach( (element) => { + let tabelaElement = document.createElement("td"); + tabelaLinhas.appendChild(tabelaElement); + tabelaElement.appendChild(document.createTextNode(element)); + } ) + + tabela.appendChild(tabelaLinhas); + + } ) + +} + +function getElementsByTagName(tag) { + +} + +function imageToText() { + let Images = document.getElementsByTagName("img"); + let ImagesList = [...Images] + console.log(ImagesList); + ImagesList.forEach( (image) => { + + let imageDescription = document.createElement("p"); + imageDescription.appendChild( document.createTextNode( image.alt.toString() ) ); + image.parentElement.appendChild(imageDescription); + image.parentElement.removeChild(image); + } ) +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f17b923 --- /dev/null +++ b/style.css @@ -0,0 +1,166 @@ +* { + margin: 0; + padding: 0; +} + +.container { + width: 100vw; + height: 100vh; + + display: flex; + align-items: center; + flex-direction: column; + background-color: #999; + color: #999; +} + +.header { + width: 100%; + padding: 35px; + text-align: center; + + border-bottom: 4px solid #0527bb; + background-color: rgb(36, 35, 35); +} + +.main { + width: 100%; + height: 100%; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.CSV { + width: 100%; + height: 100%; + + display: flex; + align-items: center; + flex-direction: column; + + border: 4px solid #3607b6; +} + +.IMG { + width: 100%; + height: 100%; + + display: flex; + align-items: center; + flex-direction: column; + + border: 2px solid #4605bd; +} + +.button_CSV, .button_IMG { + width: 20%; + + padding: 1%; + margin-top: 100px; + margin-bottom: 100px; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + font-size: small; + text-align: center; + + border: 5px; + border-radius: 5px; + + background-color: #0f90cc; + color: black; +} + +.content_CSV { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + width: 70%; + padding: 1%; + + color: black; + +} + +#content_IMG { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + + width: 90%; + padding: 1%; + + color: black; + +} + +#tabelaArea { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + width: 90%; + padding: 2%; + + border-radius: 3px; + + color: black; + + text-align: center; +} + +#tabelaInfo { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + width: 90%; + padding: 2%; +} + + +#CSV_text { + display: flex; + width: 30%; + height: 100px; +} + +#tabelaName { + display: flex; +} + +.button_CSV:hover, .button_IMG:hover { + box-shadow: 0px 0px 90px rgb(8, 8, 8); + transition: all 0.2s ease-in; + transform: scale(1.1); +} + +tabela { + border: 2px solid black; + border-radius: 10px; + border-collapse: collapse; + width: 100%; + text-align: center; + } + +td { + border: 2px solid rgb(5, 24, 77); + text-align: center; + padding: 8px; + } + +img { + min-width: 90px; + max-width: 90px; +}