<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort list</title>
<style>
* {
font-size: 40px;
font-family: 'Times New Roman', Times, serif;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90vh;
background-color: rgb(235, 209, 209);
border: 4px solid black;
}
.container {
border: 2px solid black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 20px;
}
.btn{
color: white;
background-color: black;
font-size: 40px;
border-radius: 10px;
}
.btn:hover{
cursor: pointer;
background-color: rgb(255, 255, 255);
color: black;
box-shadow: 5px 5px ;
}
</style>
</head>
<body>
<div class="container">
<p>Click on the button bellow to Sort the given list in alphabetical order</p>
<button class="btn" onclick="sortList()">Sort</button>
</div>
<ul id="sort">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>Swift</li>
<li>Bash</li>
</ul>
</body>
<script>
function sortList() {
var list, i, switching, listitems, shouldSwitch;
list = document.getElementById("sort");
switching = true;
while (switching) {
switching = false;
listitems = list.getElementsByTagName("li");
for (i = 0; i < (listitems.length - 1); i++) {
shouldSwitch = false;
if (listitems[i].innerHTML.toLowerCase() > listitems[i + 1].innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
listitems[i].parentNode.insertBefore(listitems[i + 1], listitems[i]);
switching = true;
}
}
</script>
</html>
