mahuntington
/
combat-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

garbage styling

Browse Source
master
Matt Huntington 5 years ago
parent a64fae8028
commit 8e55fcba53
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File

7
app.js
Unescape View File

@ -28,7 +28,7 @@ const createRow = (datum) => {
notesInput.value = datum.notes; notesInput.value = datum.notes;
} }
document.querySelector('table').appendChild(newRow); document.querySelector('tbody').appendChild(newRow);
} }
document.querySelector('#new').addEventListener('click', () => { document.querySelector('#new').addEventListener('click', () => {
@ -36,9 +36,10 @@ document.querySelector('#new').addEventListener('click', () => {
}) })
document.querySelector('#sort').addEventListener('click', () => { document.querySelector('#sort').addEventListener('click', () => {
const rows = document.querySelectorAll('tr'); const rows = document.querySelectorAll('tbody tr');
const data = []; const data = [];
console.log(rows);
for(let row of rows) { for(let row of rows) {
const initiative = row.querySelector('input[type="number"]').value; const initiative = row.querySelector('input[type="number"]').value;
const name = row.querySelector('input[type="text"]').value; const name = row.querySelector('input[type="text"]').value;
@ -51,7 +52,7 @@ document.querySelector('#sort').addEventListener('click', () => {
return datum1.initiative - datum2.initiative; return datum1.initiative - datum2.initiative;
}); });
document.querySelector('table').innerHTML = ""; document.querySelector('tbody').innerHTML = "";
for(let datum of sortedData){ for(let datum of sortedData){
createRow(datum) createRow(datum)
} }

18
index.html
Unescape View File

@ -3,11 +3,23 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head> </head>
<body> <body>
<table></table> <h1>Combat Tracker</h1>
<button id="new">New Creature</button> <table class="striped">
<button id="sort">Sort</button> <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> <script src="app.js" charset="utf-8"></script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save