diff --git a/E06.js b/E06.js new file mode 100644 index 0000000..4a22e5f --- /dev/null +++ b/E06.js @@ -0,0 +1,72 @@ +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("tableTitle"); + let h1 = document.createElement("h5"); + let text = document.createTextNode(titleText); + + h1.appendChild(text); + title.appendChild(h1); + + 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"); + + 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(); +} + +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; +} + +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 new file mode 100644 index 0000000..a9a26a2 --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + + + + + E06-JavaScript + + +
+ +
+

E06

+
+ +
+ +
+ +

CSV to HTML

+ +
Nova tabela
+ +
+ +
+ +
+ +
+

+ Nova Tabela +

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

CSV:

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

Galeria de Imagens

+ +
Descrições
+ +
+ random 01 + random 02 +
+ +
+ random 03 + random 04 +
+ +
+ +
+ + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e095647 --- /dev/null +++ b/styles.css @@ -0,0 +1,139 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: Verdana; +} + +img { + margin: 10px; + border: 1px solid black; +} + +.header { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 100px; + + background-color: black; + color: #4CAF50; + + margin-bottom: 20px; + border-bottom: 8px solid #4CAF50; +} + +.button { + background-color: #4CAF50; + border-radius: 5px; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 10px; + cursor: pointer; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + 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; + 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;} +} + +.column { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + float: left; + width: 50%; + padding: 10px; +} + +.row { + display: flex; + flex-direction: row; +} + +#tableTitle { + margin-top: 15px; + margin-bottom: 5px; +} + +table { + border-collapse: collapse; + width: 100%; + min-width: 500px; +} + +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