Creating a Custom Calculator with HTML, CSS, and JavaScript | Step-by-Step Tutorial
Learn how to build a functional and stylish calculator from scratch using HTML, CSS, and JavaScript. Follow this step-by-step tutorial to create your own calculator web application that can perform basic arithmetic operations. Enhance your coding skills and web development knowledge with this hands-on project.
VIDEO
What You'll Learn:
HTML Structure: We'll start by setting up the basic HTML structure of our calculator. You'll learn how to create buttons for numbers and operations, as well as a display area to showcase the calculations.
CSS Styling: Next, we'll dive into the world of CSS to make your calculator visually appealing and responsive. You'll discover how to style buttons, create a clean layout, and ensure that your calculator looks great on various screen sizes.
JavaScript Logic: The heart of your calculator lies in its functionality. We'll use JavaScript to implement the logic behind the arithmetic operations. You'll learn how to capture button clicks, perform calculations, and display the results accurately.
User Interaction: Enhance the user experience by adding interactivity. You'll understand how to provide visual feedback when buttons are pressed and create a seamless user interaction flow.
Error Handling: Every good calculator should handle errors gracefully. We'll show you how to prevent and manage errors that might occur during calculations, ensuring a smooth user experience.
By the end of this tutorial, you'll have a fully functional calculator that you can proudly showcase in your portfolio. Plus, you'll have gained valuable insights into HTML, CSS, and JavaScript, setting the stage for your future web development endeavors.
Join us on this coding adventure and create a custom calculator that's not only practical but also a testament to your growing web development skills. Don't miss out – hit that play button and let's get started!
Html Code:
<!DOCTYPE html >
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
<link rel ="stylesheet" href ="style.css" >
<link href ='https://unpkg.com/boxicons@2.0.7/
css/boxicons.min.css' rel ='stylesheet' >
<title >Calculator</title >
</head >
<body >
<div class ='calculator' id ='calc' >
<div class ='toggle' >
<div class ='theme-switch-wrapper' >
<label class ='theme-switch' for ='checkbox' >
<input id ='checkbox' type ='checkbox' >
<div class ='slider round' ></div >
</label >
</div >
</div >
<div class ='display' ></div >
<span class ='c neumorphic' >C</span >
<span class ='signed neumorphic' >+/-</span >
<span class ='percent neumorphic' >%</span >
<span class ='divide neumorphic' >÷</span >
<span class ='seven neumorphic' >7</span >
<span class ='eight neumorphic' >8</span >
<span class ='nine neumorphic' >9</span >
<span class ='times neumorphic' >x</span >
<span class ='four neumorphic' >4</span >
<span class ='five neumorphic' >5</span >
<span class ='six neumorphic' >6</span >
<span class ='minus neumorphic' >-</span >
<span class ='one neumorphic' >1</span >
<span class ='two neumorphic' >2</span >
<span class ='three neumorphic' >3</span >
<span class ='plus neumorphic' >+</span >
<span class ='zero neumorphic' >0</span >
<span class ='decimal neumorphic' >.</span >
<span class ='equals neumorphic' >=</span >
</div >
</body >
<script src ="script.js" ></script >
</html >
Css Code:
@import url ("https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" );
:root {
--body-bg-color : # e0e5ec ;
--bg-color : # e0e5ec ;
--primary-font-color : rgba (144 , 152 , 168 , 1 );
--secondary-font-color : rgba (51 , 64 , 89 , 1 );
--soft-high-light : rgba (255 , 255 , 255 , 0.43 );
--dark-high-light : rgba (217 , 210 , 200 , 0.51 );
}
[ data-theme = dark ] {
--bg-color : # 131419 ;
--primary-font-color : # c7c7c7 ;
--secondary-font-color : # 03a9f4 ;
--soft-high-light : rgba (255 , 255 , 255 , 0.05 );
--dark-high-light : rgba (0 , 0 , 0 , 0.51 );
}
* {
box-sizing: border-box;
}
body {
background: var (--body-bg-color );
color: var (--primary-font-color );
}
.calculator {
background: var (--bg-color );
color: var (--primary-font-color );
}
.display {
box-shadow: 6px 6px 16px 0 var (--dark-high-light ),
-6px -6px 16px 0 var (--soft-high-light ),
inset 6px 6px 5px 0 var (--dark-high-light ),
inset -6px -6px 5px 0 var (--soft-high-light );
border: 5px solid var (--soft-high-light );
color: var (--secondary-font-color );
}
.neumorphic {
box-shadow: 6px 6px 16px 0 var (--dark-high-light ),
-6px -6px 16px 0 var (--soft-high-light );
border-radius: 50% ;
transition: 0.1s all ease-in-out;
border: 1px solid var (--soft-high-light );
}
.neumorphic:hover {
box-shadow: inset 6px 6px 5px 0 var (--dark-high-light ),
inset -6px -6px 5px 0 var (--soft-high-light );
color: var (--secondary-font-color );
}
/*
GRID LAYOUT & NON NEUMORPHIC
*/
body {
display: grid;
width: 100vw ;
height: 100vh ;
align-items: center;
justify-items: center;
font-family: "Odibee Sans" ;
font-size: 16px ;
}
.display {
border-radius: 12px ;
transition: 0.1s all ease-in-out;
height: 60px ;
line-height: 60px ;
text-align: right;
padding-right: 20px ;
width: 100% ;
font-size: 32px ;
letter-spacing: 4px ;
}
.calculator {
box-shadow: 0 0 16px rgba (0 , 0 , 0 , 0.1 );
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
grid-template-areas: "toggle toggle toggle toggle"
"display display display display" "c signed percent divide"
"seven eight nine times" "four five six minus" "one two three plus"
"zero zero decimal equals" ;
align-items: center;
justify-items: center;
grid-row-gap: 25px ;
grid-column-gap: 25px ;
border-radius: 20px ;
padding: 50px 40px 40px 40px ;
}
.c ,
.signed ,
.percent ,
.divide ,
.seven ,
.eight ,
.nine ,
.times ,
.four ,
.five ,
.six ,
.minus ,
.one ,
.two ,
.three ,
.plus ,
.zero ,
.decimal ,
.equals {
text-align: center;
height: 60px ;
width: 60px ;
line-height: 60px ;
}
.zero {
width: 100% ;
border-radius: 12px ;
}
.toggle {
grid-area: toggle;
}
.display {
grid-area: display;
}
.c {
grid-area: c;
}
.signed {
grid-area: signed;
}
.percent {
grid-area: percent;
}
.divide {
grid-area: divide;
}
.seven {
grid-area: seven;
}
.eight {
grid-area: eight;
}
.nine {
grid-area: nine;
}
.times {
grid-area: times ;
}
.four {
grid-area: four;
}
.five {
grid-area: five;
}
.six {
grid-area: six;
}
.minus {
grid-area: minus;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.plus {
grid-area: plus;
}
.zero {
grid-area: zero;
}
.decimal {
grid-area: decimal;
}
.equals {
grid-area: equals;
}
.toggle {
width: 100% ;
}
.theme-switch-wrapper {
display: block;
float: right;
align-items: center;
}
.theme-switch {
display: inline-block;
height: 34px ;
position: relative;
width: 60px ;
}
.theme-switch input {
display: none;
}
.slider {
box-shadow: 6px 6px 16px 0 var (--dark-high-light ),
-6px -6px 16px 0 var (--soft-high-light ),
inset 6px 6px 5px 0 var (--dark-high-light ),
inset -6px -6px 5px 0 var (--soft-high-light );
background-color: inherit;
bottom: 0 ;
cursor: pointer;
left: 0 ;
position: absolute;
right: 0 ;
top: 0 ;
transition: 0.4s ;
border: 2px solid rgba (255 , 255 , 255 , 0.2 );
}
.slider:before {
background-color: var (--bg-color );
box-shadow: 0px 0px 5px rgba (0 , 0 , 0 , 0.2 );
bottom: 4px ;
content: "" ;
height: 22px ;
left: 4px ;
position: absolute;
transition: 0.4s ;
width: 22px ;
}
input :checked + .slider {
background-color: var (--bg-color );
box-shadow: 6px 6px 16px 0 var
(--dark-high-light ), -6px -6px 16px 0 var
(--soft-high-light ), inset 6px 6px 5px 0 var (--dark-high-light ),
inset -6px -6px 5px 0 var (--soft-high-light );
}
input :checked + .slider:before {
background-color: var (--secondary-font-color );
}
input :checked + .slider:before {
transform: translateX (26px );
}
.slider.round {
border-radius: 34px ;
}
.slider.round:before {
border-radius: 50% ;
}
Javascript Code:
var keys = document.querySelectorAll ('#calc span' );
var operators = ['+' , '-' , 'x' , '÷' ];
var decimalAdded = false ;
for (var i = 0 ; i < keys.length ; i++ ) {
keys[i].onclick = function (e) {
var input = document.querySelector ('.display' );
var inputVal = input.innerHTML ;
var btnVal = this .innerHTML ;
if (btnVal == 'C' ) {
input.innerHTML = '' ;
decimalAdded = false ;
} else if (btnVal == '=' ) {
var equation = inputVal;
var lastChar = equation[equation.length - 1 ];
equation = equation.replace (/x/ g , '*' ).replace (/÷/ g , '/' );
if (operators.indexOf (lastChar) > - 1 || lastChar == '.' )
equation = equation.replace (/ . $ / , '' );
if (equation)
input.innerHTML = eval (equation);
decimalAdded = false ;
} else if (operators.indexOf (btnVal) > - 1 ) {
var lastChar = inputVal[inputVal.length - 1 ];
if (inputVal != '' && operators.indexOf (lastChar) == - 1 )
input.innerHTML += btnVal;
else if (inputVal == '' && btnVal == '-' )
input.innerHTML += btnVal;
if (operators.indexOf (lastChar) > - 1 && inputVal.length > 1 ) {
input.innerHTML = inputVal.replace (/ . $ / , btnVal);
}
decimalAdded = false ;
} else if (btnVal == '.' ) {
if (! decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true ;
}
} else {
input.innerHTML += btnVal;
}
// prevent page jumps
e.preventDefault ();
}
}
const toggleSwitch = document.querySelector ('.theme-switch input[type="checkbox"]' );
function switchTheme (e) {
if (e.target .checked ) {
document.documentElement .setAttribute ('data-theme' , 'dark' );
} else {
document.documentElement .setAttribute ('data-theme' , 'light' );
}
}
toggleSwitch.addEventListener ('change' , switchTheme, false );
.png)
