Post
Ask Question

Building Percentage Calculator with using JavaScript with Code

In this article, we will walk you through the process of creating an Enhanced Percentage Calculator using HTML, CSS, and JavaScript. This version will include better styling, input validation, and a loading animation, and be mobile-friendly. By the end of this article, you'll have a fully functional and visually appealing percentage calculator.

Step 1. Setting up HTML Structure.

First, we need to create the basic structure of our calculator using HTML. This includes input fields for the number and percentage, a button to trigger the calculation, a reset button to clear the form, and a place to display the result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Percentage Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="calculator">
        <h1>Percentage Calculator</h1>
        <form id="calcForm" action="#" method="POST">
            <label for="number">Number:</label>
            <input type="number" id="number" placeholder="Enter number" required>

            <label for="percent">Percentage (%):</label>
            <input type="number" id="percent" placeholder="Enter percentage" required>

            <div class="buttons">
                <button type="button" id="calculateButton" onclick="calculatePercentage()">Calculate</button>
                <button type="button" id="resetButton" onclick="resetForm()">Reset</button>
            </div>
        </form>

        <h2>Result:</h2>
        <p id="result">0</p>
        <div id="loading" class="loading" style="display: none;">Calculating...</div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2. Place the CSS in style tag.

Now, let's make the calculator visually appealing with CSS. We'll make it look modern with rounded corners, shadows, and transitions. We'll also ensure that it looks good on both desktop and mobile devices.

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Calculator Container */
.calculator {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 320px;
    text-align: center;
    transition: transform 0.3s ease;
}

.calculator:hover {
    transform: scale(1.05);
}

/* Heading */
h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

/* Labels for input fields */
label {
    font-size: 14px;
    color: #666;
    text-align: left;
    display: block;
    margin-bottom: 8px;
}

/* Styling Input fields */
input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
}

input:focus {
    border-color: #4CAF50;
}

/* Buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 48%;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

button:active {
    background-color: #388e3c;
}

button#resetButton {
    background-color: #f44336;
}

button#resetButton:hover {
    background-color: #e53935;
}

button#resetButton:active {
    background-color: #d32f2f;
}

/* Buttons container */
.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Result Styling */
h2 {
    margin-top: 30px;
    font-size: 20px;
}

p#result {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

/* Loading Animation */
.loading {
    font-size: 16px;
    color: #4CAF50;
    margin-top: 10px;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 500px) {
    .calculator {
        width: 90%;
    }

    h1 {
        font-size: 20px;
    }

    button {
        width: 100%;
        margin-top: 10px;
    }
}

Step 3. Place the javascript in the script tag.

The JavaScript will handle the calculation of the percentage, validate inputs, and show the result. Additionally, we'll implement a reset function to clear the form.

// Function to calculate the percentage
function calculatePercentage() {
    // Get input values
    let number = parseFloat(document.getElementById('number').value);
    let percent = parseFloat(document.getElementById('percent').value);

    // Validate inputs
    if (isNaN(number) || isNaN(percent)) {
        alert("Please enter valid numbers for both fields.");
        return;
    }

    // Show the loading message
    document.getElementById('loading').style.display = 'block';

    // Simulate calculation delay (optional)
    setTimeout(function() {
        // Calculate percentage
        let result = (number * percent) / 100;
        // Display result with two decimal places
        document.getElementById('result').textContent = result.toFixed(2);
        // Hide loading message
        document.getElementById('loading').style.display = 'none';
    }, 500); // Delay of 500ms to show loading
}

// Function to reset the form
function resetForm() {
    document.getElementById('calcForm').reset(); // Clear input fields
    document.getElementById('result').textContent = '0'; // Reset result
    document.getElementById('loading').style.display = 'none'; // Hide loading message
}

Here is a brief description of the above code used

  • Calculating the Percentage: The calculatePercentage() function retrieves user inputs for the number and percentage, validates them, performs the calculation, and displays the result with two decimal places.
  • Input Validation: The code uses the isNaN() function to check whether the inputs are valid numbers. If invalid inputs are detected, an alert is displayed, and the calculation is stopped.
  • Displaying the Result: After the calculation, the result is displayed with two decimal points using toFixed(2) for clarity.
  • Handling Loading Feedback: A loading message is shown while the calculation is processing, providing visual feedback to the user. This is done using the setTimeout() function to simulate a brief delay, after which the result is displayed, and the loading message is hidden.
  • Reset Function: The resetForm() function clears all input fields and resets the result to zero when triggered, allowing the user to perform a new calculation easily.

Output

Conclusion

Percentage Calculator is a well-designed and user-friendly tool that combines HTML, CSS, and JavaScript to perform accurate percentage calculations. The JavaScript code efficiently handles user inputs, validates them, and calculates the percentage while providing real-time feedback with a loading message and displaying the result clearly. The reset functionality ensures that users can easily start a new calculation without hassle. By integrating these features, the calculator offers a smooth and interactive experience, making it a valuable tool for anyone needing quick and reliable percentage calculations.


Similar Articles