Working Calculator

Hello readers, today in this blog you will learn how to create a working calculator using the HTML and css only

I will show the source code using the code block and you can copy it yourself OR download the zip of the source code at the last section

Now, let's start the tutorial.First,you need to create a html file and this is the html code needed.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>calculator</title>
   <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
   <div class="wrapper">
      <form action="" name="forms">
      <input type="text" name="answer" class="output"/>
    <div class="btn-container">
     <div class="btns">
       <input type="button" value="AC" onclick="forms.answer.value = ''" class="red">
       <input type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)" class="red">
       <input type="button" value="%" onclick="forms.answer.value += '%'">
       <input type="button" value="/" onclick="forms.answer.value += '/'">
     </div>
     <div class="btns">
       <input type="button" value="7" onclick="forms.answer.value += '7'">
       <input type="button" value="8" onclick="forms.answer.value += '8'">
       <input type="button" value="9" onclick="forms.answer.value += '9'">
       <input type="button" value="*" onclick="forms.answer.value += '*'">
     </div>
     <div class="btns">
       <input type="button" value="4" onclick="forms.answer.value += '4'">
       <input type="button" value="5" onclick="forms.answer.value += '5'">
       <input type="button" value="6" onclick="forms.answer.value += '6'">
       <input type="button" value="-" onclick="forms.answer.value += '-'">
     </div>
     <div class="btns">
       <input type="button" value="1" onclick="forms.answer.value += '1'">
       <input type="button" value="2" onclick="forms.answer.value += '2'">
       <input type="button" value="3" onclick="forms.answer.value += '3'">
       <input type="button" value="+" onclick="forms.answer.value += '+'">
     </div>
     <div class="btns">
       <input type="button" value="0"  onclick="forms.answer.value += '0'">
       <input type="button" value="00" onclick="forms.answer.value += '00'">
       <input type="button" value="." onclick="forms.answer.value += '.'">
       <input type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)">
     </div>
   </div>
      </form>
   </div>
   <p>Download source code?</p>
   
</body>
</html>

After adding these html code, the calculator should be work. But we need to add some CSS code the make the calculator more beautiful.

You can also writing yours CSS code except of copy my css code

css code:

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body{
   background: #7436FF;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
div.wrapper{
   background: #FFF;
   width: 300px;
   height: 480px;
   margin-top: 30px;

border-radius: 15px;
   position: relative;
}
.output{
   position: absolute;
   top: 35px;
   margin-left: 5%;
   width: 90%;
   height: 85px;
   font-size: 35px;
   padding: 15px;
   text-align: right;
   color: #7436FF;
   outline: none;
   border: none;
   border-radius: 10px;
   background: #ECF0F3;
   box-shadow: inset 5px 5px 10px #b1b4b6,
            inset -5px -5px 10px #ffffff;
}
.btn-container{
   width: 100%;
   position: absolute;
   bottom: 15px;
   display: flex;
   flex-direction: column;
}
.btns{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}
.btns input{
   width: 20%;
   height: 55px;
   margin: 5px;
   border: none;
  border-radius: 50%;
background: linear-gradient(145deg, #fdffff, #d4d8db);
box-shadow:  5px 5px 12px #8e9092,
             -5px -5px 12px #ffffff;
}
.btns input:hover{
   border-radius: 50%;
background: linear-gradient(145deg, #d4d8db, #fdffff);
box-shadow:  5px 5px 12px #bfc2c5,
             -5px -5px 12px #ffffff;
}

That is all the tutorial today, if you are facing any problem, contact me using the comment below or go to contact us

Coding World

Working Calculator

You may like these posts

Post a Comment

Website Design - Login Form

Term and Condition

Profile Card Design Using HTML and CSS

How To Build Weather App Using HTML, CSS And JavaScript

Median UI Theme for Blogger