garbage styling

5 years ago · 8e55fcba53
parent a64fae8028
commit 8e55fcba53
2 changed files with 19 additions and 6 deletions
--- a/app.js
+++ b/app.js
@ -28,7 +28,7 @@ const createRow = (datum) => {
        notesInput.value = datum.notes;
    }

-    document.querySelector('table').appendChild(newRow);
+    document.querySelector('tbody').appendChild(newRow);
 }

 document.querySelector('#new').addEventListener('click', () => {
@ -36,9 +36,10 @@ document.querySelector('#new').addEventListener('click', () => {
 })

 document.querySelector('#sort').addEventListener('click', () => {
-    const rows = document.querySelectorAll('tr');
+    const rows = document.querySelectorAll('tbody tr');
    const data = [];

+    console.log(rows);
    for(let row of rows) {
        const initiative = row.querySelector('input[type="number"]').value;
        const name = row.querySelector('input[type="text"]').value;
@ -51,7 +52,7 @@ document.querySelector('#sort').addEventListener('click', () => {
        return datum1.initiative - datum2.initiative;
    });

-    document.querySelector('table').innerHTML = "";
+    document.querySelector('tbody').innerHTML = "";
    for(let datum of sortedData){
        createRow(datum)
    }
--- a/index.html
+++ b/index.html
@ -3,11 +3,23 @@
    <head>
        <meta charset="utf-8">
        <title></title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    </head>
    <body>
-        <table></table>
-        <button id="new">New Creature</button>
-        <button id="sort">Sort</button>
+        <h1>Combat Tracker</h1>
+        <table class="striped">
+            <button class="btn" id="new">New Creature</button>
+            <button class="btn" id="sort">Sort</button>
+            <thead>
+                <tr>
+                    <th>initiative</th>
+                    <th>name</th>
+                    <th>notes</th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
        <script src="app.js" charset="utf-8"></script>
    </body>
 </html>