Show sorting direction arrow

js/index.js

@@ -33,12 +33,24 @@ const render = (coins, sortBy = 'marketCap') => {
 	if (coins.length > 0) {
 		table.innerHTML = `
 			<thead>
-				<td>Name</td>
+				<td>
-				<td data-sort="marketCap">Market Cap</td>
+					Name
-				<td data-sort="hashRate">Proof-of-Work</td>
+				</td>
-				<td data-sort="confirmations">Equivalent Confs</td>
+				<td>
-				<td data-sort="estimatedTimeForConfs">Estimated Time</td>
+					<a data-sort="marketCap" ${sortBy === 'marketCap' && 'data-sort-active'}>Market Cap</a>
-				<td data-sort="multiplier">Difference</td>
+				</td>
+				<td>
+					<a data-sort="hashRate" ${sortBy === 'hashRate' && 'data-sort-active'}>Proof-of-Work</a>
+				</td>
+				<td>
+					<a data-sort="confirmations" ${sortBy === 'confirmations' && 'data-sort-active'}>Equivalent Confs</a>
+				</td>
+				<td>
+					<a data-sort="estimatedTimeForConfs" ${sortBy === 'estimatedTimeForConfs' && 'data-sort-active'}>Estimated Time</a>
+				</td>
+				<td>
+					<a data-sort="multiplier" ${sortBy === 'multiplier' && 'data-sort-active'}>Difference</a>
+				</td>
 			</thead>
 			<tbody>
 			${coins.map(coin => `

style.css

@@ -71,8 +71,26 @@ table.results tbody td:first-child img {
   width: 2em;
 }
 
-table.results thead td[data-sort] {
+table.results thead [data-sort] {
+  position: relative;
   cursor: pointer;
+  color: #333;
+}
+
+table.results thead [data-sort-active]:after {
+  content: '';
+  display: block;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #333;
+}
+table.results[data-sort-order="asc"] thead [data-sort-active]:after {
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid #333;
 }
 
 .footer {