how to create and design Percentage Calculator Tool ?

Here is a Percentage Calculator using PHP, where users can calculate percentages for different scenarios such as “Percentage of a number,” “Percentage increase,” and “Percentage decrease.”

1. PHP Code for Percentage Calculator Tool

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Simple Percentage Calculator to find percentage, percentage increase, and percentage decrease.">
    <meta name="keywords" content="Percentage Calculator, PHP, Calculate Percentage, Increase, Decrease">
    <title>Percentage Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        form {
            margin-top: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], select, input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        .result {
            font-size: 18px;
            text-align: center;
            color: #333;
        }
        .error {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Percentage Calculator</h1>
    <p>Choose the type of calculation, enter the values, and calculate the percentage.</p>

    <form method="post">
        <label for="calculation_type">Select Calculation Type:</label>
        <select id="calculation_type" name="calculation_type" required>
            <option value="percentage_of_number">Percentage of a Number</option>
            <option value="percentage_increase">Percentage Increase</option>
            <option value="percentage_decrease">Percentage Decrease</option>
        </select>

        <label for="value1">Value 1:</label>
        <input type="text" id="value1" name="value1" placeholder="Enter first value" required>

        <label for="value2">Value 2:</label>
        <input type="text" id="value2" name="value2" placeholder="Enter second value" required>

        <input type="submit" name="calculate_percentage" value="Calculate Percentage">
    </form>

    <?php
    if (isset($_POST['calculate_percentage'])) {
        $calculation_type = $_POST['calculation_type'];
        $value1 = $_POST['value1'];
        $value2 = $_POST['value2'];

        // Validate input
        if (!is_numeric($value1) || !is_numeric($value2)) {
            echo "<div class='error'>Please enter valid numeric values.</div>";
        } elseif ($value1 <= 0 || $value2 <= 0) {
            echo "<div class='error'>All values must be greater than zero.</div>";
        } else {
            $result = 0;
            switch ($calculation_type) {
                case 'percentage_of_number':
                    // Formula: (value1 / 100) * value2
                    $result = ($value1 / 100) * $value2;
                    echo "<div class='result'><p><strong>$value1%</strong> of <strong>$value2</strong> is <strong>$result</strong>.</p></div>";
                    break;

                case 'percentage_increase':
                    // Formula: ((value2 - value1) / value1) * 100
                    $result = (($value2 - $value1) / $value1) * 100;
                    echo "<div class='result'><p><strong>Percentage Increase:</strong> $result%</p></div>";
                    break;

                case 'percentage_decrease':
                    // Formula: ((value1 - value2) / value1) * 100
                    $result = (($value1 - $value2) / $value1) * 100;
                    echo "<div class='result'><p><strong>Percentage Decrease:</strong> $result%</p></div>";
                    break;
            }
        }
    }
    ?>
</div>

</body>
</html>

2. How the Percentage Calculator Works

Input:
Users select the type of percentage calculation:
- Percentage of a Number: What is X% of Y?
- Percentage Increase: By what percentage did Y increase from X?
- Percentage Decrease: By what percentage did Y decrease from X?
Users then enter the two values for calculation.
Processing:
Depending on the selected type of calculation, the appropriate formula is applied:
- Percentage of a Number:
  [
  \text{Result} = \left(\frac{\text{value1}}{100}\right) \times \text{value2}
  ]
- Percentage Increase:
  [
  \text{Result} = \left(\frac{\text{value2} – \text{value1}}{\text{value1}}\right) \times 100
  ]
- Percentage Decrease:
  [
  \text{Result} = \left(\frac{\text{value1} – \text{value2}}{\text{value1}}\right) \times 100
  ]
Output:
The result is displayed based on the calculation, either as a percentage increase, percentage decrease, or a percentage of a number.

3. Integrating the Percentage Calculator into WordPress

Method 1: Creating a Custom Plugin

Steps:

Create a Plugin Folder:

Go to /wp-content/plugins/ and create a folder called percentage-calculator.

Create the Plugin File:

Inside the percentage-calculator folder, create a file named percentage-calculator.php.
Add the following PHP code:

<?php
/*
Plugin Name: Percentage Calculator
Description: A simple tool to calculate percentage of a number, percentage increase, and percentage decrease.
Version: 1.0
Author: Your Name
*/

// Function to display the Percentage Calculator
function percentage_calculator_shortcode() {
    ob_start(); // Start output buffering
    ?>

    <div class="container">
        <h1>Percentage Calculator</h1>
        <p>Choose the type of calculation, enter the values, and calculate the percentage.</p>

        <form method="post">
            <label for="calculation_type">Select Calculation Type:</label>
            <select id="calculation_type" name="calculation_type" required>
                <option value="percentage_of_number">Percentage of a Number</option>
                <option value="percentage_increase">Percentage Increase</option>
                <option value="percentage_decrease">Percentage Decrease</option>
            </select>

            <label for="value1">Value 1:</label>
            <input type="text" id="value1" name="value1" placeholder="Enter first value" required>

            <label for="value2">Value 2:</label>
            <input type="text" id="value2" name="value2" placeholder="Enter second value" required>

            <input type="submit" name="calculate_percentage" value="Calculate Percentage">
        </form>

        <?php
        if (isset($_POST['calculate_percentage'])) {
            $calculation_type = $_POST['calculation_type'];
            $value1 = $_POST['value1'];
            $value2 = $_POST['value2'];

            // Validate input
            if (!is_numeric($value1) || !is_numeric($value2)) {
                echo "<div class='error'>Please enter valid numeric values.</div>";
            } elseif ($value1 <= 0 || $value2 <= 0) {
                echo "<div class='error'>All values must be greater than zero.</div>";
            } else {
                $result = 0;
                switch ($calculation_type) {
                    case 'percentage_of_number':
                        // Formula: (value1 / 100) * value2
                        $result = ($value1 / 100) * $value2;
                        echo "<div class='result'><p><strong>$value1%</strong> of <strong>$value2</strong> is <strong>$result</strong>.</p></div>";
                        break;

                    case 'percentage_increase':
                        // Formula: ((value2 - value1) / value1) * 100
                        $result = (($value2 - $value1) / $value1) * 100;
                        echo "<div class='result'><p><strong>Percentage Increase:</strong> $result%</p></div>";
                        break;

                    case 'percentage_decrease':
                        // Formula: ((value1 - value2) / value1) *

 100
                        $result = (($value1 - $value2) / $value1) * 100;
                        echo "<div class='result'><p><strong>Percentage Decrease:</strong> $result%</p></div>";
                        break;
                }
            }
        }
        ?>
    </div>

    <?php
    return ob_get_clean(); // Return the output
}

// Register the shortcode [percentage_calculator]
add_shortcode('percentage_calculator', 'percentage_calculator_shortcode');
?>

Activate the Plugin:

Go to the WordPress Admin Dashboard > Plugins and activate the Percentage Calculator plugin.

Add the Shortcode:

To display the tool on any post or page, use the shortcode:

   [percentage_calculator]

This Percentage Calculator Tool is simple and can be easily integrated into any website to help users with different types of percentage calculations.