Making Simple Calculator with Php Bootstrap and Google Fonts

calculator php

In this article, we will make a simple calculator with using php, bootstrap and google fonts. With this activity, we will learn basic form and php operations, creating container and button images with bootstrap, and creating impressive writings via using google fonts and css. You can access all of the source code from the page you have reached by clicking on the screenshot above (To view the source code, right click on the page> View source). 

Let's do this event in 4 stages.

1. Creating a web page with a form:

In this section, we create basic skeleton of our page. No action will take place on the page we have created at this stage. We just prepare a dysfunctional form page. You can access the page by clicking the picture above and view the screenshot.

2. Formatting form elements with Bootstrap:

Bootstrap is a css framework developed to format your web page elements. Bootstrap 4 was used in this study. To use Bootstrap, you must add the following code between head tags of your web page.

<link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

After adding this code you can use Bootstrap features at yout html elements. For example we used container and button features at this examle with these codes:

<div class="container rounded bg-warning" style="margin-top: 50px; width:200px">

We implenented container class to div with code above.

<button type="submit" class="btn btn-primary" name="operation" value="plus">

We used Bootstrap class at button with this code.

3. Beautify the title using Google Fonts and add shadow with css

As you can see in the picture above, we gave a nice font to our title and added a shadow with css. We added the font from Google Fonts. To add this type of font, you need to go to Google Fonts website, get the link of the font you want and add it to between head tags of your page. For example, in this study, we added the font related to the following link to the page:

<link href="" rel="stylesheet">

In order to use the font we added, we can format your text with the css code as below.

<span class="mb-0 h1" style="text-shadow: #474747 1px 2px 1px; font-family: 'Lobster', cursive;'; width:200px">Hesap Makinesi</span>

The font used here is "Lobster". You can add it to your article as above. We added the shadow to the text with the text-shadow feature in the css code. Here the css is used internally to the page. It is generally recommended to use external css in web page design.

4. Adding calculator function with php code

Until this stage, we made the visual design of the page. We will add a calculator function to the page with the php code we will add. 

Following php code added to the page submits the data coming from the form to the addition, subtraction, multiplication or division operations according to the button pressed and prints the result on the screen. In here code added same page.


	// If the submit button has been pressed
		// Check number values
		if(is_numeric($_POST['number1']) && is_numeric($_POST['number2']))
			// Calculate total
			if($_POST['operation'] == 'plus')
				$result = $_POST['number1'] + $_POST['number2'];
			if($_POST['operation'] == 'minus')
				$result = $_POST['number1'] - $_POST['number2'];
			if($_POST['operation'] == 'multip')
				$result = $_POST['number1'] * $_POST['number2'];
			if($_POST['operation'] == 'divide')
				$result = $_POST['number1'] / $_POST['number2'];

			// Print total to the browser
			echo "<div  class='row'><span class='mb-0 h1' style='text-shadow: #474747 1px 2px 1px; font-family: 'Lobster', cursive;'; width:200px'>Result: $result </span></div>	</div>";

		} else {
			// Print error message to the browser
			echo 'Numeric values are required	</div>';


With this calculator example, we learned how to use basic Bootstrap, format writings with Google Fonts and css, and process form elements with php codes. You can make many different designs by using these features. Stay healty.

Letlhogonolo Pooe