A basic calculator built with HTML, CSS, and JavaScript

This is a basic calculator, as you can see it appears like a calculator placed on a surface.

The entire design was achieved using HTML, CSS, BOOTSTRAP and JavaScript( JQuery).

I will explain each section of the design and what css, bootstrap or JavaScript properties were used to achieve them.

The calculator box

The full calculator body was centralized using the bootstrap class called text-center, if you have a div inside a bigger div and you want to centralize the inner div all you need is to call the bootstrap class in the bigger div and it's content will automatically be centralized as shown below.

<div class="container text-center">
     
 </div>

With this whatever you place inside this div will automatically be centralized assuming you've added bootstrap in your project.

The box shadow and little curve by the edges.

The shadow was achieved using the css property box-shadow and the curve was also achieved using the css property border-radius. while using the box-shadow you need to put into consideration the browsers compatibility, below is how i applied it considering various browsers;

border-radius:5%;
   -moz-box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
    -webkit-box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
 box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset 1px -1px 12px 0.1px #89847e;

The heading

The appearance of the heading at the top is an html font family applied to it, here is how this was applied

font-family: 'Brush Script MT', cursive;

The input box

The input box has been made to appear like a real calculator screen using, using css properties as, background-color, width, height, margin and font-size.

The buttons

The look of the buttons were also achieved using similar properties as the ones used for the calculator box, such as the box-shadow, border-radius and others.

Functionality

The entire calculator functionality with the mathematical operations was built using the JavaScript framework called JQuery.

You can view the full calculator demo on my Codepen profile here JavaScript Calculator.

You can also study the code from my git hub

Thank you and stay tuned for more.