Swordeflux/calculation.php

## calculation.php
<?php
// GET URL value. Example: http://localhost/calculation.php?amount=50
$AMOUNT = $_GET["amount"];

// Flexible rate charged by PayPal
$FLEXIBLE_RATE = '0.039';
$FLAT_RATE     = '2';

// Calculate flexible value from amount
$PERCENT_FEE = $AMOUNT * $FLEXIBLE_RATE;

// Calculate total fee charged (flexible + fixed)
$TOTAL_FEE   = $PERCENT_FEE + $FLAT_RATE;

// Calculate total amount
$TOTAL_PAY = $AMOUNT + $TOTAL_FEE;
?>

<table class="table table-bordered">
<tr>
    <th>Description</th>
    <th>Value (RM)</th>
</tr>
<tr>
    <td>Amount that seller need</td>
    <td><?php echo $AMOUNT; ?></td>
</tr>

<tr>
    <td>PayPal Fee (3.9% + RM 2)<br>Note: Rate for monthly sales volume less than 12K MYR</td>
    <td><?php echo round($TOTAL_FEE, 2); ?></td>
</tr>

<tr>
    <td>Total amount buyer need to pay</td>
    <td><b><?php echo round($TOTAL_PAY, 2); ?></b></td>
</tr>

## index.php
<!DOCTYPE html>
<html>
<head>
    <title>Paypal Fee Calculator</title>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <link href="style.css" rel='stylesheet' type='text/css'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" >
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="XGEA TECH" name="author">
    <meta content="PayPal Fee Calculator (MYR)" name="description">
</head>
<body>
    <div class="outer">
        <div class="middle">
            <div class="container">
                <img src="paypal.svg" width="100%" height="auto">
                <div class="content">
                    <h1>PayPal Fee Calculator (MYR)</h1>
                    <br>
                    <div id="input">
                        <input id="amount" class="form-control" type="number" placeholder="Enter Amount (MYR)">
                        <br>
                        <button type="button" id="calculate-button" class="btn btn-primary btn-lg btn-block">Calculate</button>
                    </div>
                    <div id="result" style="display: none;"></div>
                    <div id="reset" style="display: none;">
                        <button type="button" id="reset-button" class="btn btn-primary btn-lg btn-block">Calculate Another</button>
                    </div>
                </div>
            </div>
            <br>
            Build 1.0
            <br>
            Copyright &#169; 2018 - XGEA
            <br>
        </div>
    </div>
<script>
    $("#calculate-button").click(function calculation(){
        var amount = $('#amount').val();
        if($.trim($('#amount').val()) == ''){
            alert('Amount cannot be empty!');
        }
        else {
            $('#result').load('calculation.php?amount=' +amount);
        }
    })
    $(document).ajaxComplete(function(calculation) {
        $('#input').hide();
        $("#result").show();
        $("#reset").show();
    });
</script>
<script>
    $("#reset-button").click(function reset(){
        $('#input').show();
        $("#result").hide();
        $("#reset").hide();
    });
</script>
</body>
</html>

## style.css
body {
    margin: 0px;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #121212;
}

.middle {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
    font-family: monospace;
    color: #FFF;
}

.content {
    background-color: #FAFAFA;
    padding: 30px;
    color: #000;
}
	<?php
	// GET URL value. Example: http://localhost/calculation.php?amount=50
	$AMOUNT = $_GET["amount"];

	// Flexible rate charged by PayPal
	$FLEXIBLE_RATE = '0.039';
	$FLAT_RATE = '2';

	// Calculate flexible value from amount
	$PERCENT_FEE = $AMOUNT * $FLEXIBLE_RATE;

	// Calculate total fee charged (flexible + fixed)
	$TOTAL_FEE = $PERCENT_FEE + $FLAT_RATE;

	// Calculate total amount
	$TOTAL_PAY = $AMOUNT + $TOTAL_FEE;
	?>

	<table class="table table-bordered">
	<tr>
	<th>Description</th>
	<th>Value (RM)</th>
	</tr>
	<tr>
	<td>Amount that seller need</td>
	<td><?php echo $AMOUNT; ?></td>
	</tr>

	<tr>
	<td>PayPal Fee (3.9% + RM 2)<br>Note: Rate for monthly sales volume less than 12K MYR</td>
	<td><?php echo round($TOTAL_FEE, 2); ?></td>
	</tr>

	<tr>
	<td>Total amount buyer need to pay</td>
	<td><b><?php echo round($TOTAL_PAY, 2); ?></b></td>
	</tr>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Paypal Fee Calculator</title>
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<link href="style.css" rel='stylesheet' type='text/css'>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" >
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="XGEA TECH" name="author">
	<meta content="PayPal Fee Calculator (MYR)" name="description">
	</head>
	<body>
	<div class="outer">
	<div class="middle">
	<div class="container">
	<img src="paypal.svg" width="100%" height="auto">
	<div class="content">
	<h1>PayPal Fee Calculator (MYR)</h1>
	<br>
	<div id="input">
	<input id="amount" class="form-control" type="number" placeholder="Enter Amount (MYR)">
	<br>
	<button type="button" id="calculate-button" class="btn btn-primary btn-lg btn-block">Calculate</button>
	</div>
	<div id="result" style="display: none;"></div>
	<div id="reset" style="display: none;">
	<button type="button" id="reset-button" class="btn btn-primary btn-lg btn-block">Calculate Another</button>
	</div>
	</div>
	</div>
	<br>
	Build 1.0
	<br>
	Copyright © 2018 - XGEA
	<br>
	</div>
	</div>
	<script>
	$("#calculate-button").click(function calculation(){
	var amount = $('#amount').val();
	if($.trim($('#amount').val()) == ''){
	alert('Amount cannot be empty!');
	}
	else {
	$('#result').load('calculation.php?amount=' +amount);
	}
	})
	$(document).ajaxComplete(function(calculation) {
	$('#input').hide();
	$("#result").show();
	$("#reset").show();
	});
	</script>
	<script>
	$("#reset-button").click(function reset(){
	$('#input').show();
	$("#result").hide();
	$("#reset").hide();
	});
	</script>
	</body>
	</html>
	body {
	margin: 0px;
	}

	.outer {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #121212;
	}

	.middle {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 18px;
	font-family: monospace;
	color: #FFF;
	}

	.content {
	background-color: #FAFAFA;
	padding: 30px;
	color: #000;
	}