Working with numbers is a common task in day-to-day development and data analysis. Sometimes we need to truncate, round, round up, or round down numbers. In this article, we'll show you how to use HTML and JavaScript to create an enhanced number interceptor to help users accomplish these tasks with ease.
We'll build a simple web app where users can enter a number and specify the number of decimal places to keep, and choose different processing methods (truncation, rounding, rounding up, rounding down). When you click the button, the app will display the processed result.
HTML: The basic structure used to create a web page.
CSS: Used to beautify the interface.
JavaScript: Used to process user input and perform corresponding mathematical operations.
Implementation steps:
1 HTML structure
First, we create the basic HTML structure. It includes two input boxes for the user to enter numbers and decimal places, a selection box for the user to select the processing method, and a button to trigger the processing function.
HTML Content:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced digital interception tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h2>Enhanced digital interception tool</h2>
<input type="number" id="numberInput" placeholder="Please enter a number" step="any">
<input type="number" id="decimalPlaces" placeholder="Please enter the number of decimal places" min="0">
<select id="methodSelect">
<option value="truncate" > truncated</option>
<option value="round" > rounded</option>
<option value="ceil" > round up</option>
<option value="floor"> round down</option>
</select>
<button onclick="processNumber()" > process numbers</button>
<div id="result"></div>
<div id="error"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2 CSS Styles
Next, let's add some basic CSS styling to make the interface look more aesthetically pleasing and easy to manipulate.
CSS content:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
input, select, button {
margin-top: 10px;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
.result {
margin-top: 20px;
font-weight: bold;
}
.error {
color: red;
margin-top: 5px;
}
3 JavaScript logic
Finally, we write JavaScript code to process user input and perform the corresponding math operations.
JavaScript content:
// script.js
function processNumber() {
const numberInput = document.getElementById('numberInput').value;
const decimalPlaces = document.getElementById('decimalPlaces').value;
const method = document.getElementById('methodSelect').value;
Validate the input
if (!numberInput || !decimalPlaces) {
document.getElementById('result').textContent = '';
document.getElementById('error').textContent = 'Please enter all fields';
return;
}
const number = parseFloat(numberInput);
const places = parseInt(decimalPlaces);
if (isNaN(number) || isNaN(places)) {
document.getElementById('result').textContent = '';
document.getElementById('error').textContent = 'Please enter a valid number';
return;
}
let result;
const factor = Math.pow(10, places);
Processed according to the chosen method
switch (method) {
case 'truncate':
result = Math.trunc(number * factor) / factor;
break;
case 'round':
result = Math.round(number * factor) / factor;
break;
case 'ceil':
result = Math.ceil(number * factor) / factor;
break;
case 'floor':
result = Math.floor(number * factor) / factor;
break;
default:
result = 'unknown method';
}
Display the results
document.getElementById('result').textContent = 'Processing result: ${result}';
document.getElementById('error').textContent = '';
}
4. Function Description
Input validation:
Check if the user has filled in all the fields.
Make sure that you are entering a valid number.
Solution:
Truncate (Math.trunc): Remove the decimal part.
Rounding (Math.round): Determines whether to round up or down based on the first decimal place.
Round up (Math.ceil): Always round up to the nearest integer.
Round down (Math.floor): Always round down to the nearest integer.
The results showed:
The processed results are displayed in the results area.
If there is an error, the error message is displayed in the error message area.
5. Examples of use
Let's say the user enters the following:
Number: 123.4567
Number of decimal places: 2
Method: Rounding
After clicking on the "Process Numbers" button, the result area will display:
Result: 123.46
6. Summary
With the above steps, we have successfully created an enhanced digital interception tool. This gadget is not only capable of simple basic digital processing needs, but also provides a variety of processing methods for users to choose from.