Scribd
Upload
21 views2 pages

JavaScript Digit Sorter Tool

The document provides a JavaScript implementation for sorting the digits of a number in both ascending and descending order. It includes an HTML structure with input fields, buttons, and a dropdown menu for user interaction. The sorting functionality is executed through an event listener that processes the input and displays the result on the webpage.

Uploaded by

showman9279
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views2 pages

JavaScript Digit Sorter Tool

The document provides a JavaScript implementation for sorting the digits of a number in both ascending and descending order. It includes an HTML structure with input fields, buttons, and a dropdown menu for user interaction. The sorting functionality is executed through an event listener that processes the input and displays the result on the webpage.

Uploaded by

showman9279
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Objective : WAP in javascript to sort the data in ascending and descending order and

display it in html

Code Implementation :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort Digits of a Number</title>
<style>
button:hover {
cursor: pointer;
background-color: #5d3939;
}
</style>
</head>
<body style="background-color:rgb(58, 133, 133); width: 100vw; height:100vh; display:
flex; align-items:center; justify-content: center;">

<div style="display: flex; flex-direction:column; align-items: center; justify-content: center;


background-color:#6d8da58f; width: 70vw; height: 70vh; border-radius: 10px;">
<div>
<p style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:rgb(22, 35,
35); font-size:2vw;">
Enter a number to sort its digits:
</p>

<input id="inpt" style="background-color: #ffffff; font-family: 'Lucida Sans', 'Lucida


Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; width:
25vw; height:3vw; padding-left:2vw; border-radius:10px 0 0 10px; border-color: transparent;
outline-color:rgb(255, 255, 255);" type="number" placeholder="e.g. 132782509245">
<button id="btn" style="color: #fff; background-color: #2c0a1b5e; margin-left: -0.28vw;
border-radius: 0 10px 10px 0; width:5vw; height: 3.35vw; border-color:
transparent;">Click</button>

<select id="order" style="color: white; background-color: #971c1c92; padding: 1vw;


width:8vw; height: 3.5vw; border-radius: 10px;">
<option value="choose">Order</option>
<option value="assending">Ascending</option>
<option value="dessending">Descending</option>
</select>

<p style="font-size: 1.5vw; color: rgb(12, 27, 23);">Result: <span id="result"


style="color: #fff; font-size: 1.4vw; color: rgb(73, 11, 122);"></span> </p>

</div>
</div>
<script>
[Link]("btn").addEventListener("click", function() {
let inpt = [Link]("inpt").[Link]();
let order = [Link]("order").value;
let result = [Link]("result");

if (inpt === "") {


[Link] = "Please enter a number!";
return;
}

// Convert the input string into array of digits


let digits = [Link]("").map(d => parseInt(d));

// Sort digits
if (order === "assending") {
[Link]((a, b) => a - b);
} else {
[Link]((a, b) => b - a);
}

// Join back into number-like string


[Link] = [Link]("");
});
</script>
</body>
</html>

OutPut :

You might also like