How to create a calculator using HTML and CSS.
Creating a basic calculator using HTML and CSS.
Creating a simple web calculator on your own is a basic thing. You can learn this on your own. Here you will learn “How To Create A Calculator In HTML” not “what is HTML” ?...Create the HTML Document.
# Starting a new project with text editor.
Now first of all, open the text editor, example are notepad which is built-in with the operating system, or notepad ++ and notepad lite which can be downloaded and installed to your PC and many others.
# Type the starting tag of HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title> standard calculator </title>
<meta charset="utf-8">
<link rel="stylesheet" href="cal.css"/> /* this line is link to
</head> to external CSS page*/
</html>Type in the basic starting tags of HTML, above are the starting tag you have to type to get more practice. Now, explaining the code The 1st <!DOCTYPE html > must be the very first thing in your HTML document, before the <html> tag, the <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. 2nd<html> & <head> tags are the base which packs the whole code between them. The 3rd is the <title> & tag which are used to give a title to your html website, app, age etc
<body>
<marquee><h2> <em>This is a calculator, that never tell lies and fast at presenting result.</em> </h2></marquee>
<div class="container">
<fieldset id="container">
<form name="calculator">Now its time to edit your body, i started with the <div class=”container”> that is a responsive width of row, creating enough room for your calculator to fit in. Inside it, I created 2 more tags fieldset and form. Fieldset tag is used to group related elements in a form, it is a tag that draws a box around the related elements. the form (inside this, i added input id="display" type="text" to display the result and set it to read only) and the keys are added at the form, you see some onclick event about which I will talk later.
# Add the Buttons.
Now we will add buttons that holds the numbers. the onclick function is an event listener that execute’s a JavaScript function when a button is clicked.
These are the codes for numbers, don’t worry they look huge but they are just exact same, you have to copy & paste the same line but only have to change the number and value. the value attribute (type=”button” value=”7" ) takes in the value to be displayed on the button of the calculator while the onclick takes in the text that is to be displayed on the screen of the calculator
<input type="text" id="display" name="display" readonly><input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
<input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
<input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
<br>
<input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
<input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
<input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
<br>
<input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
<input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
<input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
<input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
<br>
<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
<input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
The eval() function evaluates or executes an argument.
If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements.
# Create CSS.
There are many forms of CSS that can be used to design the above HTML such as —> Inline — by using the style attribute in HTML elements
- Internal — by using a <style> element in the <head> section
- External — by using an external CSS file.
The most common way to add CSS, is to keep the styles in separate CSS files, and that is the method used here in a new text editor save it what ever name you like .css and it should be in the same folder with the HTML file together. Go to the head section of your HTML page and link the CSS page using this code — > <link rel=”stylesheet” href=” name of your CSS file here”/>, when writing the name of your CSS page you must include .css to the name .
The CSS code
This set of code is known as CSS code that design’s the HTML page and the one we have here affects only the body of the HTML page, changing the background to a picture from the internet just get url link and paste it on the space for link in the CSS code.
body {
background: url(https://static.pexels.com/photos/220182/pexels-photo-220182.jpeg);
background-color: #424242;
font-family: ‘Aldrich’;font-size: 22px;
}This code is to design the class called container that was created in the Div tag in the HTML page, we can modify the height, width, alignment and display of the div container from this page, the justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis.
.container {
display: flex;
align-items: center;
justify-content: center;
height: 55vh;
width: 100vw;
}Below here, we have the codes that design the fildset tag that was created in the HTML with the id name container . NOTE →the (#) in #container{ is for locating the tag with an id name, while the periold (.) in .container { is for locating the tag with a class name container.
#container {
width: 300px;
padding: 8px 8px 20px 8px;
margin: 20px auto;
background-color: indigo;
border-radius: 50px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #C1C1C1;
border-left: 2px solid #C1C1C1;
box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
}The #display is locating the display text input in our form tag on the HTML page and this is possible because it also has an id called display. The text input has been modified in so many ways like the height, width, padding, margin, display, background color, font size and all sides of the border with there colors and many more. Type the codes below into your CSS page and you will see for yourself.
#display {
display: block;
margin: 15px auto;
height: 42px;
width: 174px;
padding: 0 10px;
border-radius: 4px;
border-top: 2px solid #C1C1C1;
border-right: 2px solid #C1C1C1;
border-bottom: 2px solid #FFF;
border-left: 2px solid #FFF;
background-color: #FFF;
box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
font-size: 28px;
color: #666;
text-align: right;
font-weight: 400;
}This locates an input class with the name button, and the buttons can be designed from this place
.button {
display: inline-block;
margin-left: 25px;
margin-right: 10px;
width: 42px;
height: 42px;
font-size: 20px;
font-weight: bold;
border-radius: 20px;
}The .mathButtons designs the mathematical symbol on the buttons changing their color, background color, borders and so many more depending on how you want your calculator to look
.mathButtons {
margin: 2px 2px 6px 2px;
color: lightblue;
text-shadow: -1px -1px 0px #44006F;
background-color: #7f7771;
border-top: 2px solid #C1C1C1;
border-right: 2px solid #C1C1C1;
border-bottom: 2px solid #181818;
border-left: 2px solid #181818;
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}the .digits represent a class that design the figures on the button of the calculator adding a little change to what is listed below
.digits {
color: #181818;
text-shadow: 1px 1px 0px #FFF;
background-color: #EBEBEB;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #C1C1C1;
border-left: 2px solid #C1C1C1;
border-radius: 4px;
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}The code below is hover settings for the buttons that their class name or id name is presented. by hover i mean when you move the mouse icon to the button it will change to another color, but when the mouse icon moves out from the button the button color will change back to its initial color
.digits:hover,
.mathButtons:hover,
#clearButton:hover {
background-color: #DEFEC8;
box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #AE5700;
border-left: 2px solid #AE5700;
}This is the design for the clear button written in C on a button, using the id name i am able to call up the button so that i can design the color, background, borders etc….
#clearButton {
color: #FFF;
text-shadow: -1px -1px 0px #44006F;
background-color: #D20000;
border-top: 2px solid #FF8484;
border-right: 2px solid #FF8484;
border-bottom: 2px solid #800000;
border-left: 2px solid #800000;
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}The marquee effect is an animation that allows the letters from one end of the page to the other end.
marquee{
color: chartreuse;Or click Run to see how it execute
