Build a Mini Arithmetic Calculator Widget (Add,Subtract,Divide,Multiply) in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

index.html

 

 

<html>
  <head>
    <title>
  </title>
  </head>
      <body>
        <div class="container">Simple Calculator
     <br>  
          <input type= "text" id= "number1" class= "firstnumber" placeholder= "number">
          <input type= "text" id= "number2" class="2nd number" placeholder= "number">
          <br>
          <button id= "add" class= "plus" value="sum" onClick="sum()">+</button>
          <button id= "subtract" class= "subtract" value="subtract" onClick="subtract()">-</button>
          <button id= "multiply" class= "multiplication" value="times" onClick="multiply()">x</button>
          <button id= "divide" value="divide" onClick="divide()" class= "divi" >/</button>
                 </div>
       
      </body>
      </html>
      
.container {
  font-size: 40px;
  align-items: center;
  height: 150px;
  margin: auto;
  width: 50%;
  border-style: solid;
  background-color: grey;
  padding: 30px;
  text-align: center;
}
button {
  border: 5px solid #2d4047;
  height: 40px;
  width:40px;
  border-radius: 100px;
  align-text: center;
  font-size: 20px;
  margin-right: 30px;
  margin-top: 20px;
  background: #f9fbfc;
}
input {
  border: 5px solid #57676d;
  width: 50px;
  height: 25px;
  text-align: center;
  background: #f9fbfc;
  
}
.plus {
  background: #af351a;
}
.subtract {
  background: #b57bed; 
}
.multiplication {
  background: #e5e577;
}
.divi {
  background: #76b3e2;
}


var firstNum, secondNum, result;
function setValues() {//this code grabs the numbers that the user inputs
firstNum = Number(document.getElementById("number1").value);  
secondNum = Number(document.getElementById("number2").value);
}
function sum() {
  setValues();
  result = firstNum + secondNum;
  alert(result);//getting results only to 6 decimal places
}

function subtract() {
  setValues();
  result = firstNum - secondNum;
  alert(result.toFixed(2));//toFixed gets result to 2 decimal places
}

function multiply() {
  setValues();
  result = firstNum * secondNum;
  alert(result.toFixed(2));
}

function divide() {
  setValues();
  result = firstNum / secondNum;
  alert(result.toFixed(2));
}

Leave a Reply