Archives May 2023

Sample Calculator Program

An HTML form is shown in the following example code to display the calculator program:

<form method="post" action="">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 justify-content-center">
                <div class="col text-center mb-3 mb-md-5">
                        <label for="Operand1" class="form-label fs-3">First Number</label>
                        <input id="Operand1" name="Operand1" type="number" step="any" class="form-control form-control-custom" value="<?php echo isset($Operand1)?$Operand1:''; ?>">
                </div>
                <div class="col text-center mb-3 mb-md-4">
                        <label for="Operand2" class="form-label fs-3">Second Number</label>
                        <input id="Operand2" name="Operand2" type="number" step="any" class="form-control form-control-custom" value="<?php echo isset($Operand2)?$Operand2:''; ?>">
                </div>
        </div>
        <div class="row justify-content-center mb-3">
                <div class="col-auto">
                        <input class="btn btn-success fs-2" type="submit" name="Calculate" value="+">
                        <input class="btn btn-success fs-2" type="submit" name="Calculate" value="-">
                        <input class="btn btn-success fs-2" type="submit" name="Calculate" value="x">
                        <input class="btn btn-success fs-2" type="submit" name="Calculate" value="/">
                </div>
        </div>
</form>

<?php if(isset($Result) && is_numeric($Result)){?><!-- Display Result -->
<div class="row justify-content-center">
        <div class="col text-center">
                <label for="Result" class="fs-4">Result</label>
                <input id="Result" name="Result" type="number" step="any" class="form-control form-control-custom" value="<?php echo $Result; ?>">
        </div>
</div>
<?php } if(isset($Error)){?><!-- Display Error Messages -->
<div class="row justify-content-center">
        <div class="col">
                <div class="alert alert-danger shadow-sm" role="alert">Error: <?php echo $Error; ?></div>
        </div>
</div>
<?php } ?>

Output:

Download Code

Once the form is submitted, the PHP $_POST super global variable receives all input values. After that, it validates the input and displays it if an error occurs. Then, comparison and arithmetic operators within the conditional statements are used to calculate the expected value.

PHP Code:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $Operand1=$_POST['Operand1'];
    $Operand2=$_POST['Operand2'];
    $Operator=$_POST['Calculate'];

    /*Validation begins from here.*/
    if($Operand1 == '' || $Operand2 == ''){
        $Error = "The input values are required.";
    }
    elseif (filter_var($Operand1, FILTER_VALIDATE_FLOAT) === false || filter_var($Operand2, FILTER_VALIDATE_FLOAT) === false) {
        $Error = "The input value must be a number only.";
    }
    elseif($Operator=="/" && ($Operand1 == 0 || $Operand2 == 0)){
        $Error = "Cannot divide by zero.";
    }
    else{
        /*Calculation begins from here.*/
        if($Operator=="+")
            $Result=$Operand1+$Operand2;
        else if($Operator=="-")
            $Result=$Operand1-$Operand2;
        else if($Operator=="x")
            $Result=$Operand1*$Operand2;
        else if($Operator=="/")
            $Result=$Operand1/$Operand2;
    }
} ?>
PHP Age Calculator Program code

PHP Age calculator program demo code

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $DOB = $_POST['DOB'];
    $ToDate = $_POST['ToDate'];
    if (empty($DOB) || empty($ToDate)) {
        $Error = "Both input values are required.";
    } else {
        $bday = date_create_from_format('Y-m-d', $DOB);
        $today = date_create_from_format('Y-m-d', $ToDate);
        if (!$bday || !$today) {
            $Error = "Both input values must be a valid date.";
        } else {
            $DOB = $bday->format('d F Y');
            $ToDate = $today->format('d F Y');
            $age = date_diff(date_create($DOB), date_create($ToDate));
            $Result = "Birth Date: <strong>$DOB</strong><br>";
            $Result .= "Age <strong>{$age->y} Years, {$age->m} Months, {$age->d} Days</strong> as on <strong>{$ToDate}</strong>";
        }
    }
}
?>

Output:

Code Download
Marquee Tag

Here’s are some example of how to use <marquee> tag in HTML:

Scroll Up

Example:

<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>

Output:

This is a sample scrolling text that has scrolls in the upper direction.

Scroll Down

Example:

<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to down.

Scroll Left to Right

Example:

<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to right.

Scroll Right to Left

Example:

<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to left.

Scrolling Speed

Marquee speed can be changed using the “scrollmount” attribute. For example, if you are using scrollmount="1" then it sets the marque to scroll very slowly, and as you increase the “scrollmount,” the scrolling speed will also increase.

Example:

<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>

Output:

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Blinking Text within Marquee

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <title>Example of a blinking text using CSS within a marquee</title>
        <style>
            .blink {
                animation: blinker 1.5s linear infinite;
                color: red;
                font-family: sans-serif;
            }
            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }
        </style>
    </head>

    <body>
        <marquee class="blink">This is an example of blinking text using CSS within a marquee.</marquee>
    </body>

</html>

This is an example of blinking text using CSS within a marquee.

Output:

Example of a blinking text using CSS within a marquee This is an example of blinking text using CSS within a marquee. This is an example of blinking text using CSS within a marquee.
UPI Payment Button Generator
<a href="upi://pay?pa=9002325970@ybl&pn=MAHABUL ALAM&cu=INR" id="__UPI_BUTTON__" style="background: #ff912f;border: 2px solid #8a4100;padding: 10px;text-decoration: none;color: white;font-size: larger;border-radius: 10px;">Pay using UPI</a>

DEMO SAMPLE

Pay using UPI Read More