COLTEC-DAW · arthur-cordeiro · Jun 19, 2022 · Jun 19, 2022 · Jun 19, 2022 · Jun 19, 2022
diff --git a/E06.js b/E06.js
@@ -0,0 +1,89 @@
+function convertCSVtoHTML(){
+
+    let title_input = document.getElementById("title-input").value;
+    let csv_input = document.getElementById("csv-input").value;
+
+    let title = document.createTextNode(title_input);
+
+    let table_title = document.getElementById("table_title");
+    let table_content = document.getElementById("table_content");
+
+    table_title.innerHTML = "";
+    table_content.innerHTML="";
+
+    table_title.style.borderTop = " .15rem solid black";
+    table_title.style.borderRight = " .15rem solid black";
+    table_title.style.borderLeft = " .15rem solid black";
+    table_title.style.borderBottom = " .1rem solid black";
+
+    table_title.appendChild(title);
+
+    let table = document.createElement("table");
+    let tableCSVtoHTML = csv_input.split("\n");
+
+    tableCSVtoHTML.forEach(lines_of_table => {
+
+        let line_word = lines_of_table.toString().split(",");
+        let line = document.createElement("tr");
+
+        line_word.forEach(words=>{
+
+            let word = document.createElement("td");
+            let text = document.createTextNode(words);
+            word.appendChild(text);
+            line.appendChild(word);
+
+        })
+
+        table.appendChild(line);
+
+    });
+
+    table_content.appendChild(table);
+
+}
+
+function img_to_description(){
+
+    let imgs = [].slice.call(document.getElementsByTagName("img"));
+
+    imgs.forEach(img => { 
+
+        let parent_of_img = img.parentElement;
+        let description = document.createTextNode(img.alt.toString());
+        parent_of_img.removeChild(img);
+        parent_of_img.appendChild(description);
+
+    });
+}
+
+function callGetByName(){
+
+    let tag = document.getElementById("inputTag").value;
+    getByName(document.body, tag);
+}
+
+function getByName(node, elem){
+
+    let array_elements_tag_name = [];
+
+    for(let i = 0; i < node.childNodes.length; i++){
+
+        let childNode = node.childNodes[i];
+
+        if(childNode.childNodes.length > 0){
+
+            getByName(childNode, elem);
+        }
+        if(childNode.tagName == elem){
+
+            array_elements_tag_name.push(childNode);
+
+        }
+
+    }
+
+    console.log(array_elements_tag_name);
+    return array_elements_tag_name;
+}
+
diff --git a/exemplo.csv b/exemplo.csv
@@ -0,0 +1,19 @@
+QuotaAmount,StartDate,OwnerName,Username
+150000,2016-01-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com
+150000,2016-02-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com
+150000,2016-03-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com
+150000,2016-01-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com
+150000,2016-02-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com
+150000,2016-03-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com
+150000,2016-01-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com
+150000,2016-02-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com
+150000,2016-03-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com
+150000,2016-01-01,Catherine Brown,trailhead16.kojyepokybge@example.com
+150000,2016-02-01,Catherine Brown,trailhead16.kojyepokybge@example.com
+150000,2016-03-01,Catherine Brown,trailhead16.kojyepokybge@example.com
+150000,2016-01-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com
+150000,2016-02-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com
+150000,2016-03-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com
+150000,2016-01-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com
+150000,2016-02-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com
+150000,2016-03-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com
diff --git a/img/img02.png b/img/img02.png
diff --git a/img/img03.png b/img/img03.png
diff --git a/img/img04.jpg b/img/img04.jpg
diff --git a/img/img05.jpg b/img/img05.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,91 @@
+<!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">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>E-06</title>
+
+</head>
+<body>
+
+    <a href="index.html" id="first_link"><div class="header">
+
+        E06-JavaScript-DOM
+    </div></a>
+    <div class="content">
+        <div class="row">
+        <div class="colunas col-6">
+
+              <div class="title-area">
+                <div class="title-box">
+                 <h1>Converter CSV para HTML Table</h1>
+                </div>
+               </div>
+
+               <br>
+
+                <div class="title">
+                    <label for="title-input">Título da tabela:</label><br>
+                    <input type="text" id="title-input" name="title-input" value=""><br>
+                </div>
+
+                <div class="csv">
+                    <p>Formato CSV: <a href="sugestion.html" target="_blank">sugestão de teste</a></p>
+                    <textarea id="csv-input" name="csvInput" rows="15" cols="60"></textarea>
+                </div>
+
+                <div>
+                    <input type="submit" value="Criar Tabela" class="button" onclick="convertCSVtoHTML()">
+                </div>
+
+
+            <div id="table_title"></div>
+            <div id="table_content"></div>
+
+        </div>
+
+
+        <div class="colunas col-6">
+
+            <div class="title-area">
+                <div class="title-box">
+                 <h1>Imagens</h1>
+                </div>
+            </div>
+
+            <div class="imgs row">
+                <div class="img col-6">
+                    <img src="img/img02.png" alt="imagem 01">
+                </div>
+                <div class="img col-6">
+                    <img src="img/img03.png" alt="imagem 02">
+                </div>
+                <div class="img col-6">
+                    <img src="img/img04.jpg" alt="imagem 03">
+                </div>
+                <div class="img col-6">
+                    <img src="img/img05.jpg" alt="imagem 04">
+                </div>
+            </div>
+
+            <div>
+                <input type="submit" value="Descrição" class="button" onclick="img_to_description()">
+            </div>
+
+
+        </div>
+
+    </div>
+
+    </div>
+
+    <script src="E06.js"></script>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,139 @@
+*{
+
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+
+    overflow-x: hidden;
+}
+
+
+.header{
+
+    text-align: center;
+    padding: 20px;
+    width: 100%;
+    color: black;
+    font-size: 35px;
+    font-weight: 400;
+    background-color: rgb(156, 97, 156);
+    border-bottom: 2px black solid;
+    border-top: 2px black solid;
+    margin-top: 20px;
+
+}
+
+#first_link{
+
+    text-decoration: none;
+}
+
+.colunas{
+
+    text-align: center;
+    padding-left:4rem;
+    padding-right:4rem;
+    padding-top:2rem;
+    padding-bottom:1.5rem;
+    font-size: 18px;
+}
+
+h1{
+
+    font-size: 24px;
+}
+
+.title-area{
+
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.title-box{
+
+    padding: 12px;
+    background-color: rgb(156, 97, 156);
+    border-radius: 20px;
+    border: 2px solid black;
+
+}
+
+input{
+
+    margin-top: 20px;
+    width: 30%;
+    margin-bottom: 15px;
+}
+
+.imgs{
+
+    margin-top: 20px;
+}
+
+
+.imgs img{
+
+    width: 90%;
+    margin-bottom: 20px;
+    border-radius: 15px;
+}
+
+.button{
+
+    padding: 10px;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 20px;
+    background-color: rgb(156, 97, 156);
+}
+
+#table_title{
+
+    margin-top: 20px;
+    background-color: rgb(156, 97, 156);
+    font-weight: 600;
+    font-size: 22px;
+}
+
+#down{
+    margin-top: 30px;
+    justify-content: left;
+}
+
+#down h1{
+    font-size: 19px;
+}
+
+.input_tag{
+
+    padding: 1rem;
+    width: 100%;
+}
+
+.input_tag input{
+
+    padding: .3rem;
+    width: 100%;
+}
+
+
+
+
+tr, td{
+    border: 1px solid black;
+}
+
+table{
+    width: 100%;
+}
+
+td{
+
+    padding: 5px;
+}
+
diff --git a/sugestion.html b/sugestion.html
@@ -0,0 +1,32 @@
+<!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">
+    <title>Sugestão</title>
+</head>
+<body>
+
+   <p>QuotaAmount,StartDate,OwnerName,Username<br>
+    150000,2016-01-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com<br>
+    150000,2016-02-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com<br>
+    150000,2016-03-01,Chris Riley,trailhead9.ub20k5i9t8ou@example.com<br>
+    150000,2016-01-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com<br>
+    150000,2016-02-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com<br>
+    150000,2016-03-01,Harold Campbell,trailhead14.jibpbwvuy67t@example.com<br>
+    150000,2016-01-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com<br>
+    150000,2016-02-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com<br>
+    150000,2016-03-01,Jessica Nichols,trailhead19.d1fxj2goytkp@example.com<br>
+    150000,2016-01-01,Catherine Brown,trailhead16.kojyepokybge@example.com<br>
+    150000,2016-02-01,Catherine Brown,trailhead16.kojyepokybge@example.com<br>
+    150000,2016-03-01,Catherine Brown,trailhead16.kojyepokybge@example.com<br>
+    150000,2016-01-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com<br>
+    150000,2016-02-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com<br>
+    150000,2016-03-01,Kelly Frazier,trailhead7.zdcsy4ax10mr@example.com<br>
+    150000,2016-01-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com<br>
+    150000,2016-02-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com<br>
+    150000,2016-03-01,Dennis Howard,trailhead4.wfokpckfroxp@example.com</p>
+
+</body>
+</html>