top of page
Writer's pictureRahul Kumar
Jul 12, 20222 min read

Calculator using HTML, CSS and JavaScript

So Today! We will learn coding project. That is Calculator.

We are not making this lecture difficult. So, This is simple and clear concept of making Calculator Web Application.


Now,

Requirements:

  1. 1 PC/Laptop.

  2. Some Basic knowledge of HTML, CSS and JavaScript.

So, 1st We need to install code editor (Visual Studio Code) Download Here.


After installing code Editor.

We start building Calculator.


First create file folder with the name of "calculator".



After this, we need to import our folder to code editor. I am using Visual code editor.

You can simply drag and drop your folder to code editor.



After that we will create all index files inside this calculator folder.

So, Create all these file inside calculator folder.

Location of files:

calculator/index.html
calculator/styles.css
calculator/index.js

After that we can start writing our codes.


index.html : Start write HTML code in index.html.

<!DOCTYPE html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
<div id="result">
    <!-- <span class="result-text">Result......</span> -->
<input class="result-text" type="text" placeholder="Result.....">
</div>
<br>
<div id="rows">
    <button class="button">C</button>
    <button class="button">AC</button>
    <button class="button">%</button>
    <button class="button">/</button>
    </div>
    <div id="rows">
    <button class="button">7</button>
    <button class="button">8</button>
    <button class="button">9</button>
    <button class="button">*</button>
</div>
<div id="rows">
    <button class="button">4</button>
    <button class="button">5</button>
    <button class="button">6</button>
    <button class="button">+</button>
</div>
<div id="rows">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button class="button">-</button>
</div>
<div id="rows">
    <button class="button">.</button>
    <button class="button">0</button>
    <button class="button">.</button>
    <button class="button">=</button>
</div>

        
    </div>
    <script src="/index.js"></script>
</body>
</html>

styles.css : Start write CSS code in styles.css.


body{
    background-color: aquamarine;
    display: flex;
    justify-content: center;
    margin: 10%;
}
#container{
    height: 410px;
    width: 300px;
    background-color: white;
    border-style: solid;
    border-color: black;
    /* display: flex;
    justify-content: center;
    padding-top:1%; */
}
/* #result{
    width: 280px;
    height:50px;
} */
.result-text{
    color:#000000;
    width: 280px;
    height: 50px;
    margin-top: 5px;
    margin-left: 6px;
}

/*Buttons*/
#rows{
    width: 95%;
    height: 16%;
    margin-left: 8px;
background-color: red;
}
.button{
    width: 55px;
    height: 50px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

index.js : Start write JavaScript code in index.js.

let string = "";
let buttons = document.querySelectorAll('.button');
Array.from(buttons).forEach((button)=>{
button.addEventListener('click', (e)=>{
   if(e.target.innerHTML == "="){
     string = eval(string);
     document.querySelector('.result-text').value = string;
      }
     else if(e.target.innerHTML == "C"){
        string = " ";
        document.querySelector('.result-text').value = string;
         }
         else if(e.target.innerHTML == "AC"){
            string = " ";
            document.querySelector('.result-text').value = string;
             }
    else{ 
     console.log(e.target);
    string = string + e.target.innerHTML;
    document.querySelector('.result-text').value = string;
         }
});
});


Result :



Do you like this JavaScript Project?

  • Yes

  • No



235 views

コメント

bottom of page