How to create Dynamic PHP Calculator by using HTML ,CSS and PHP

Hello there, visitors! Thank you for visiting my other blog. In this blog, I'll show you How to create Dynamic PHP Calculator by using HTML ,CSS and PHP; previously, I showed you how to Neumorphism Sign In Page with HTML and CSS, and now I'll show you how to create Dynamic PHP Calculator .

These projects are utilised by Polytechnic diploma students and other engineering students such as B.E., B.tech, M.E., M.tech, and other developers to complete their microprojects and build something new.

I'll go through the HTML programming language (Hypertext Markup Language, HTML) and how it's used to produce a display that displays various information on the internet.

PHP (Hypertext Preprocessor) is a computer language that is commonly used to build and maintain websites. Because the PHP script is executed inside the HTML script, it is frequently utilised in conjunction with HTML. PHP stands for Personal Home Page Tools, and it was designed for the first time in 1994 by Rasmus Lerdorf.

CSS (Cascading Style Sheet) is a computer language that is used to enhance the appearance of a display.

What is the best way to make a PHP Calculator?

We can make a basic calculator in PHP with very little coding and by following a few steps. This course is for PHP beginners and those who want to learn PHP. This application can be created in less than 10 minutes if you have a good understanding of PHP.

I create this program in HTML, CSS and PHP . First, I had created a form with method="POST" then I added action with the same name of the program file. I had saved this program named calculator.php So, I had placed action="calculator.php" in the form tag. Example: <form method="post" action="calculator.php">

Then I had created two text input and one option menu using HTML, CSS and PHP. Gave the first input name ‘number1‘ and for the second input ‘number2‘. Example: <input name="first" type="number" /> & gave name for selection section. Example: <select name="operation"> Then gave value for options (i.e. plus, minus ) & submit button. Example: <option value="add"> & <input name="submit" type="submit" value="Calculate" />.

You might like this:

Source Code Of Simple PHP Calculator Program.

Who was still talking about when I shared the source code for this basic PHP calculator? Because this is a fairly short software, I only created one file for it. I am confident that just by glancing at the source code, you will be able to thoroughly comprehend the entire software. Because this code is so straightforward and uncomplicated.

Create a file called "calculator.php" and paste the code below into it. Simply copy and paste.

Document

HTML/PHP CODE:

                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>PHP calculator</title>
                    <link rel="stylesheet" href="style.css">
                </head>
                
                <body>
                    <div class="container">
                        <div class="wrapper">
                            <div class="left">
                                <img src="left.svg" alt="">
                            </div>
                            <div class="right">
                                <h3>PHP calculator</h3>
                                <form action=""  method="POST">
                                    <input type="number" class="input" name="first" required placeholder="Enter Number" id="">
                                    <input type="number" class="input" name="second" required placeholder="Enter Number" id="">
                                    <div class="select">
                                        <select name="operation" class="input" id="select">
                                            <option value="option">-Select-</option>
                                            <option value="add">Addition</option>
                                            <option value="sub">Substraction</option>
                                            <option value="mul">Multiplication</option>
                                            <option value="div">Division</option>
                                        </select>
                                    </div>
                                    <input type="submit" name="submit" class="btn" value="Calculate">
                                </form>
                            </div>
                        </div>
                        <div class="result">
                            <div class="text">
                                     <?php  
                                        if(isset($_POST['submit'])){
                                            $num1 = $_POST['first'];
                                            $num2 = $_POST['second'];
                                            $operation = $_POST['operation'];
                
                                            switch($operation){
                                                case "add": 
                                                    $result = $num1 + $num2;
                                                    echo "The Addition of {$num1} and {$num2} is {$result}";
                                                    break;
                                                case "sub": 
                                                    $result = $num1 - $num2;
                                                    echo "The Substraction of {$num1} and {$num2} is {$result}";
                                                    break;
                                                case "mul": 
                                                    $result = $num1 * $num2;
                                                    echo "The Multiplication of {$num1} and {$num2} is {$result}";
                                                    break;
                                                case "div": 
                                                    $result = $num1 / $num2;
                                                    echo "The Division of {$num1} and {$num2} is {$result}";
                                                    break;  
                                                default:
                                                echo "Invalid Selection";              
                                            }
                                        }
                                     ?>
                                 
                            </div>
                        </div>
                    </div>
                </body>
                
                </html>

CSS CODE:

                * {
                    margin: 0px;
                    padding: 0px;
                    box-sizing: border-box;
                }
                
                body {
                    width: 100%;
                    height: 100vh;
                    background-color: blueviolet;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                body .container {
                    background-color: rgb(226, 222, 222);
                    width: 70%;
                    height: auto;
                    padding: 10px;
                    border-radius: 5px;
                    border-top-left-radius: 30px;
                    border-bottom-right-radius: 30px;
                }
                
                .container .wrapper {
                    height: 350px;
                    display: flex;
                }
                
                .container .wrapper .left,
                .right {
                    width: 50%;
                    /* border: 2px solid red; */
                }
                
                .container .wrapper .left img {
                    width: 100%;
                    height: 100%;
                }
                
                .container .wrapper .right {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                }
                
                .container .wrapper .right h3 {
                    border-bottom: 4px solid red;
                    margin-bottom: 30px;
                }
                
                .container .wrapper .right .input {
                    background-color: transparent;
                    outline: none;
                    border: none;
                    border-bottom: 3px solid red;
                    height: 30px;
                    /* width: 100%; */
                    margin: 10px;
                }
                
                .container .wrapper .right .btn {
                    border: 1px solid black;
                    left: 50%;
                    border: none;
                    border-radius: 20px;
                    position: absolute;
                    transform: translateX(-50%);
                    padding: 10px 30px;
                    margin: 20px 0;
                    color: white;
                    font-weight: 500;
                    background-color: blueviolet;
                    cursor: pointer;
                    transition: all 0.5s ease;
                }
                
                .container .wrapper .right .btn:hover {
                    background-color: black;
                }
                
                .container .result {
                    /* border: 2px solid white; */
                    height: 50px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    border: 2px osolid red;
                    justify-content: center;
                }
                
                .container .result .text {
                    position: absolute;
                    font-weight: 800;
                    text-align: center;
                }
                
                @media only screen and (max-width:1220px) {
                    .container .wrapper .right .input {
                        width: 100%;
                    }
                }
                
                @media only screen and (max-width:700px) {
                    .container .wrapper .left {
                        display: none;
                    }
                    .container .wrapper .right {
                        width: 100%;
                    }
                }

Download

How to create Dynamic PHP Calculator by using HTML ,CSS and PHP

Source Code Of Simple PHP Calculator Program.

Post a Comment

Contact Form