Last active
July 7, 2025 05:19
-
-
Save bliotti/e8014086f1005550c513cf5badf5e1f2 to your computer and use it in GitHub Desktop.
Apple Trade-In Values – sortable https://htmlpreview.github.io/?https://gist.githubusercontent.com/bliotti/e8014086f1005550c513cf5badf5e1f2/raw/tradein.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Apple Trade-In Values</title> | |
| <style> | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| th, td { | |
| padding: 8px 12px; | |
| border: 1px solid #ccc; | |
| } | |
| th { | |
| cursor: pointer; | |
| background-color: #f2f2f2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Apple Trade-In Values</h2> | |
| <table id="tradeInTable"> | |
| <thead> | |
| <tr> | |
| <th onclick="sortTable(0)">Category</th> | |
| <th onclick="sortTable(1)">Device</th> | |
| <th onclick="sortTable(2)">Estimated Trade-In Value</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Paste table rows dynamically --> | |
| </tbody> | |
| </table> | |
| <script> | |
| const data = [ | |
| ["iPhone","iPhone 15 Pro Max","Up to $630"], | |
| ["iPhone","iPhone 15 Pro","Up to $500"], | |
| ["iPhone","iPhone 15 Plus","Up to $440"], | |
| ["iPhone","iPhone 15","Up to $400"], | |
| ["iPhone","iPhone 14 Pro Max","Up to $455"], | |
| ["iPhone","iPhone 14 Pro","Up to $380"], | |
| ["iPhone","iPhone 14 Plus","Up to $300"], | |
| ["iPhone","iPhone 14","Up to $290"], | |
| ["iPhone","iPhone SE (3rd gen)","Up to $100"], | |
| ["iPhone","iPhone 13 Pro Max","Up to $370"], | |
| ["iPhone","iPhone 13 Pro","Up to $300"], | |
| ["iPhone","iPhone 13","Up to $250"], | |
| ["iPhone","iPhone 13 mini","Up to $200"], | |
| ["iPhone","iPhone 12 Pro Max","Up to $280"], | |
| ["iPhone","iPhone 12 Pro","Up to $220"], | |
| ["iPhone","iPhone 12","Up to $170"], | |
| ["iPhone","iPhone 12 mini","Up to $120"], | |
| ["iPhone","iPhone SE (2nd gen)","Up to $50"], | |
| ["iPhone","iPhone 11 Pro Max","Up to $180"], | |
| ["iPhone","iPhone 11 Pro","Up to $150"], | |
| ["iPhone","iPhone 11","Up to $130"], | |
| ["iPhone","iPhone XS Max","Up to $120"], | |
| ["iPhone","iPhone XS","Up to $90"], | |
| ["iPhone","iPhone XR","Up to $100"], | |
| ["iPhone","iPhone X","Up to $60"], | |
| ["iPhone","iPhone 8 Plus","Up to $60"], | |
| ["iPhone","iPhone 8","Up to $45"], | |
| ["Apple Watch","Apple Watch Ultra 2","Up to $385"], | |
| ["Apple Watch","Apple Watch Series 9","Up to $150"], | |
| ["Apple Watch","Apple Watch Ultra","Up to $295"], | |
| ["Apple Watch","Apple Watch Series 8","Up to $120"], | |
| ["Apple Watch","Apple Watch SE (2nd gen)","Up to $75"], | |
| ["Apple Watch","Apple Watch Series 7","Up to $85"], | |
| ["Apple Watch","Apple Watch Series 6","Up to $70"], | |
| ["Apple Watch","Apple Watch SE (1st gen)","Up to $50"], | |
| ["Apple Watch","Apple Watch Series 5","Up to $45"], | |
| ["Apple Watch","Apple Watch Series 4","Up to $30"], | |
| ["Mac","MacBook Pro","Up to $770"], | |
| ["Mac","MacBook Air","Up to $380"], | |
| ["Mac","MacBook","Up to $60"], | |
| ["Mac","iMac","Up to $295"], | |
| ["Mac","iMac Pro","Up to $385"], | |
| ["Mac","Mac mini","Up to $260"], | |
| ["Mac","Mac Studio","Up to $1140"], | |
| ["Mac","Mac Pro","Up to $550"], | |
| ["iPad","iPad Pro","Up to $710"], | |
| ["iPad","iPad Air","Up to $450"], | |
| ["iPad","iPad","Up to $185"], | |
| ["iPad","iPad mini","Up to $190"], | |
| ]; | |
| const tbody = document.querySelector("#tradeInTable tbody"); | |
| data.forEach(row => { | |
| const tr = document.createElement("tr"); | |
| row.forEach(cell => { | |
| const td = document.createElement("td"); | |
| td.textContent = cell; | |
| tr.appendChild(td); | |
| }); | |
| tbody.appendChild(tr); | |
| }); | |
| function sortTable(n) { | |
| const table = document.getElementById("tradeInTable"); | |
| let switching = true, dir = "asc", switchcount = 0; | |
| while (switching) { | |
| switching = false; | |
| const rows = table.rows; | |
| for (let i = 1; i < rows.length - 1; i++) { | |
| let shouldSwitch = false; | |
| let x = rows[i].getElementsByTagName("TD")[n]; | |
| let y = rows[i + 1].getElementsByTagName("TD")[n]; | |
| let xVal = x.innerHTML.toLowerCase(); | |
| let yVal = y.innerHTML.toLowerCase(); | |
| if (n === 2) { xVal = parseFloat(xVal.replace(/[^\d.]/g, '')) || 0; yVal = parseFloat(yVal.replace(/[^\d.]/g, '')) || 0; } | |
| if ((dir === "asc" && xVal > yVal) || (dir === "desc" && xVal < yVal)) { | |
| shouldSwitch = true; | |
| break; | |
| } | |
| } | |
| if (shouldSwitch) { | |
| rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); | |
| switching = true; | |
| switchcount++; | |
| } else if (switchcount === 0 && dir === "asc") { | |
| dir = "desc"; | |
| switching = true; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://htmlpreview.github.io/?https://gist.githubusercontent.com/bliotti/e8014086f1005550c513cf5badf5e1f2/raw/tradein.html
<script src="https://gist.github.com/bliotti/e8014086f1005550c513cf5badf5e1f2.js"></script>