COLTEC-DAW · gbegnami · Jun 16, 2022 · Jun 16, 2022 · Jun 16, 2022 · Jun 19, 2022
diff --git a/E06.js 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);
+    });
+} 
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>E06-JavaScript</title>
+</head>
+<body>
+    <div class="container">
+
+        <div class="header">
+            <h1>E06</h1>
+        </div>
+
+        <div class="row">
+
+            <div class="column">
+
+                <h1>CSV to HTML</h1>
+
+                <div onclick="openModal()" class="button">Nova tabela</div>
+
+                <div class="modal">
+
+                    <div class="modal-content">
+
+                        <div class="modalHeader">
+
+                            <div class="modalTitle">
+                                <h3>
+                                    Nova Tabela
+                                </h3>
+                            </div>
+
+                            <div onclick="closeModal()" class="closeButton">X</div>
+
+                        </div>
+
+                        <div class="modalBody">
+                            <form class="newTableForm" onsubmit="submitFunction(); return false">
+
+                                <div class="titleInput">
+                                    <label for="titleInput">Título da tabela:</label><br>
+                                    <input type="text" id="titleInput" name="titleInput" value=""><br>
+                                </div>
+
+                                <div class="csvInput">
+                                    <p>CSV: </p>
+                                    <textarea id="csvInput" name="csvInput" rows="10" cols="50"></textarea>
+                                </div>
+
+                                <div>
+                                    <input type="submit" value="Submit" class="button">
+                                </div>
+                            </form>
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <div id="tableTitle"></div>
+                <div id="tableSpace"></div>
+
+            </div>
+
+            <div class="column">
+
+                <h1>Galeria de Imagens</h1>
+
+                <div onclick="imgToString(document)" class="button">Descrições</div>
+
+                <div>
+                    <img src="https://picsum.photos/200/300" alt="random 01">
+                    <img src="https://picsum.photos/201/300" alt="random 02">
+                </div>
+
+                <div>
+                    <img src="https://picsum.photos/202/300" alt="random 03">
+                    <img src="https://picsum.photos/203/300" alt="random 04">
+                </div>
+
+            </div>
+
+        </div>
+
+        <script src="./E06.js"></script>
+    </div>
+</body>
+</html>
diff --git a/styles.css 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;
+}
diff --git a/test.csv 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