How to make a calculator with html and CSS

Intro to make a calculator

Hello guys,It’s me parwat and today i’m going to teach you how to make an amazing calculator with html, CSS and JavaScript. So, guys i think you are familiar with html CSS and java script but dont’t worry i will teach you to make calculator from scratch.

Intro to html,CSS and JavaScript

HTML stands for Hyper text Markup Language which is used to make website.It is one of the easiest programming language.

CSS stands for cascading style sheet which is used to hange the layout and formatting the site.

JavaScript is also the part of html which controls all the behavior of the elements.

Structure of HTML

It syntax is :-

<Html>

<head>

<title>structure of html<title>

</head>

<body>

<p>hello, world</p>

</body>

<html>

Structure of CSS and JavaScript

CSS :- <style> <style>

JavaScript :- <script> </script>


make a calculator with html and CSS

Table form code :-

Hints: you should make the structure yourself :-

<form name="calculator">
   <table>
      <tr>
         <td colspan="4">
            <input type="text" name="display" id="display" disabled>
           
         </td>
      </tr>
      <tr>
            <td><input type="button" name="one" value="1" onclick="calculator.display.value += '1'"></td>
            <td><input type="button" name="two" value="2" onclick="calculator.display.value += '2'"></td>
            <td><input type="button" name="three" value="3" onclick="calculator.display.value += '3'"></td>
            <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'"></td>
     </tr>
     <tr>
            <td><input type="button" name="four" value="4" onclick="calculator.display.value += '4'"></td>
            <td><input type="button" name="five" value="5" onclick="calculator.display.value += '5'"></td>
            <td><input type="button" name="six" value="6" onclick="calculator.display.value += '6'"></td>
            <td><input type="button" class="operator" name="minus" value="-" onclick="calculator.display.value += '-'"></td>
     </tr>
     <tr>
            <td><input type="button" name="seven" value="7" onclick="calculator.display.value += '7'"></td>
            <td><input type="button" name="eight" value="8" onclick="calculator.display.value += '8'"></td>
            <td><input type="button" name="nine" value="9" onclick="calculator.display.value += '9'"></td>
            <td><input type="button" class="operator" name="times" value="x" onclick="calculator.display.value += '*'"></td>
     </tr>
     <tr>
            <td><input type="button" id="clear" name="clear" value="c" onclick="calculator.display.value = ''"></td>
            <td><input type="button" name="zero" value="0" onclick="calculator.display.value += '0'"></td>
            <td><input type="button" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)"></td>
            <td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'"></td>
      
      </tr>
   </table>
</form>

CSS Code :-

<style>
body {
  background-color: #888;
}

table {
  margin: auto;
  background-color: #222;
  width: 295px;
  max-width: 295px;
  height: 325px;
  text-align: center;
  border-radius: 4px;
  padding-right: 10px;
}

input {
  outline: 0;
  position: relative;
  left: 5px;
  top: 5px;
  border: 0;
  color: #495069;
  background-color: #fff;
  border-radius: 4px;
  width: 60px;
  height: 50px;
  float: left;
  margin: 5px;
  font-size: 20px;
  box-shadow: 0 4px rgba(0,0,0,0.2);
  margin-bottom: 15px;
}

input:hover {
  border: 0 solid #000;
  color: #495069;
  background-color: #fff;
  border-radius: 4px;
  width: 60px;
  height: 50px;
  float: left;
  margin: 5px;
  font-size: 20px;
  box-shadow: 0 4px #b0d2cf;
}

input:active {
  top: 4px;
  border: 0 solid #000;
  color: #495069;
  background-color: #fff;
  border-radius: 4px;
  width: 60px;
  height: 50px;
  float: left;
  margin: 5px;
  font-size: 20px;
  box-shadow: none;
}

#display {
  width: 265px;
  max-width: 270px;
  font-size: 26px;
  text-align: right;
  background-color: #bcbd95;
  float: left;
}

#display:hover {
  width: 270px;
  font-size: 26px;
  text-align: right;
  background-color: #bcbd95;
  box-shadow: 0 4px rgba(0,0,0,0.2);
}

#display:active {
  top: 5px;
  width: 270px;
  font-size: 26px;
  text-align: right;
  background-color: #bcbd95;
  box-shadow: 0 4px rgba(0,0,0,0.2);
}

.operator {
  background-color: #cee9ea;
  position: relative;
}

.operator:hover {
  background-color: #cee9ea;
  box-shadow: 0 4px #b0d2cf;
}

.operator:active {
  top: 4px;
  box-shadow: none;
}

#clear {
  float: left;
  position: relative;
  display: block;
  background-color: #ff9fa8;
}

#clear:hover {
  float: left;
  display: block;
  background-color: #F297A0;
  margin-bottom: 15px;
  box-shadow: 0 4px #CC7F86;
}

#clear:active {
  float: left;
  top: 4px;
  display: block;
  background-color: #F297A0;
  margin-bottom: 15px;
  box-shadow: none;
}

</style>

hey guys this was only the simple calculator design by me and i think you will liked it and learn something from this and can try to make more awesome than me. We tried to make simple code for you to make easy understand. Don’t copy the code try to make and write the code by looking this above code by yourself.If you want the more code of html css and javascript you can comment down below with what you want to make from me.I and my team will of-course help you to show the code of different web applications and other things.

upcoming courses for you free vs paid

we are trying to make a course for you.if you want us to make a free course for you, you can comment down below and we are a;ways ready to make a understandable course for and make professional to you.This post was just to make calculator without video but on upcoming days we will try to upload videos on youtube too.

similar course :

watch online movies :

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply