June 24, 2020
How to Perform Case-insensitive Sorting of Array in JavaScript
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div> <button id="btnAsc">Ascending</button> <button id="btnDesc">Descending</button> <ul></ul> </div> <script src="script.js"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div { width: 15%; margin: auto; } button { padding: 10px; } li { font-size: 20px; font-weight: bold; margin-left: -30px; list-style: none; } |
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
let users = ['Peter', 'Marks', 'cathy', 'James', 'Sam']; function addUsers(){ let template = users.map(user => `<li>${user}</li>`).join('\n'); document.querySelector('ul').innerHTML = template; } addUsers(); let btnAsc = document.querySelector('#btnAsc'); let btnDesc = document.querySelector('#btnDesc'); btnAsc.addEventListener('click', () => { users.sort((a,b) => a.toLowerCase().localeCompare(b.toLowerCase())); addUsers(); }); btnDesc.addEventListener('click', () => { users.sort((a,b) => a.toLowerCase().localeCompare(b.toLowerCase())); users.reverse(); addUsers(); }); |