How to Design a Calculator Web Application Using HTML, CSS And JavaScript - MyTechiest

byManoj Kumawat •
0
Hi Guys, In this article, We will create a web-based calculator application using HTML, CSS & JavaScript. If you are a beginner to JavaScript then you can also create this application easily. Just follow the steps given below to create a web-based calculator application.





First of all, We will design a UI for our calculator application using HTML and CSS, and then write a JavaScript code.
Step - 1:  Create a index.html file.

HTML
<!DOCTYPE html>
<html>
<head>
 <title>Calculator Application</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
          crossorigin="anonymous">
 <script type="text/javascript" src="js/index.js"></script>
  <style>
      
    .card{
        width: 400px;
        margin-top: 10vh;
        overflow: hidden;
    }

    #cal{
        width: 100%;
        height: 100%;
    }

  </style>
</head>
<body>

<div class="container">
 <center><h1>Calculator Application</h1></center>
 <div class="card">
  <div id="result">
  <input type="txt" id="cal">
  </div>
  
  <div class="card-body">
   <!----Row - 1 ---->  
   <div class="row">
    <button class="col" onclick="clr()">AC</button>
    <button class="col" onclick="">+/-</button>
    <button class="col" onclick="dis('%')">%</button>
    <button class="col" onclick="dis('/')" style="background-color: blue; color: white">/</button>
   </div>   
   <!-----End Row ---->
   <!----Row - 2 ---->  
   <div class="row">
    <button class="col" onclick="dis('7')">7</button>
    <button class="col" onclick="dis('8')">8</button>
    <button class="col" onclick="dis('9')">9</button>
    <button class="col" onclick="dis('*')" style="background-color: blue; color: white">x</button>
   </div>
   <!-----End Row ---->
   <!----Row - 3 ---->  
   <div class="row">
    <button class="col" onclick="dis('4')">4</button>
    <button class="col" onclick="dis('5')">5</button>
    <button class="col" onclick="dis('6')">6</button>
    <button class="col" onclick="dis('-')" style="background-color: blue; color: white">-</button>
   </div>
   <!-----End Row ---->
   <!----Row - 4 ---->  
   <div class="row">
    <button class="col" onclick="dis('1')">1</button>
    <button class="col" onclick="dis('2')">2</button>
    <button class="col" onclick="dis('3')">3</button>
    <button class="col" onclick="dis('+')" style="background-color: blue; color: white">+</button>
   </div>
   <!-----End Row ---->
   <!----Row - 5 ---->  
   <div class="row">
    <button class="col-6" onclick="dis('0')">0</button>
    <button class="col" onclick="dis('.')">.</button>
    <button class="col" onclick="solve()" style="background-color: blue; color: white">=</button>
   </div>
   <!-----End Row ---->
  </div>
 </div>
</div>

</body>
</html>

Step - 2: Create index.js file.
Javascript
function dis(val) {
 // body...
 var s =  .value+=val;
 console.log(val);
 console.log(s);
}

function solve() {
 // body...
 let x = document.querySelector('#cal').value;
 let y = eval(x);
 document.querySelector('#cal').value = y;
}

function clr() {
 // body...
 document.querySelector('#cal').value = "";
}

Congratulations! you have completed your first project in JavaScript code.
Tags:
إرسال تعليق (0)
أحدث أقدم