Create Calculator with HTML
CSS and JavaScript
HTML, CSS, and JavaScript are used to design the JavaScript Calculator. HTML creates basic structure of the calculator. CSS properties applies styles on the calculator and JavaScript adds the calculation functionality.
Video Tutorial of Calculator
Calculator [Source Codes]
To Create Calculator with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="style.css">
- <title>Calculator</title>
- </head>
- <body>
- <div class="container">
- <div class="calculator">
- <input type="text" id="inputBox" placeholder="0">
- <div>
- <button class="button operator">AC</button>
- <button class="button operator">DEL</button>
- <button class="button operator">%</button>
- <button class="button operator">/</button>
- </div>
- <div>
- <button class="button">7</button>
- <button class="button">8</button>
- <button class="button">9</button>
- <button class="button operator">*</button>
- </div>
- <div>
- <button class="button">4</button>
- <button class="button">5</button>
- <button class="button">6</button>
- <button class="button operator">-</button>
- </div>
- <div>
- <button class="button">1</button>
- <button class="button">2</button>
- <button class="button">3</button>
- <button class="button operator">+</button>
- </div>
-
- <div>
- <button class="button">00</button>
- <button class="button">0</button>
- <button class="button">.</button>
- <button class="button equalBtn">=</button>
- </div>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
-
- body{
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #282A35;
- }
-
- .calculator{
- border: 5px solid #717377;
- padding: 20px;
- border-radius: 16px;
- background: #f2f2f2;
- box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
-
- }
-
- input{
- width: 320px;
- border: none;
- padding: 24px;
- margin: 0px;
- background: #282A35;
- font-size: 45px;
- text-align: right;
- cursor: pointer;
- color: #ffffff;
- }
-
- input::placeholder{
- color: #ffffff;
- }
-
- button{
- border: none;
- width: 60px;
- height: 60px;
- margin: 10px;
- border-radius: 50%;
- background:#282A35;
- color: #ffffff;
- font-size: 25px;
- }
-
- .equalBtn{
- background-color: #1FA1EE;
- }
- .equalBtn:hover{
- background-color: #785BF8;
- }
- .operator{
- color: #43D7FF;
- }
Now paste the following codes into your script.js file
- let input = document.getElementById('inputBox');
- let buttons = document.querySelectorAll('button');
-
- let string = "";
- let arr = Array.from(buttons);
- arr.forEach(button => {
- button.addEventListener('click', (e) =>{
- if(e.target.innerHTML == '='){
- string = eval(string);
- input.value = string;
- }
-
- else if(e.target.innerHTML == 'AC'){
- string = "";
- input.value = string;
- }
- else if(e.target.innerHTML == 'DEL'){
- string = string.substring(0, string.length-1);
- input.value = string;
- }
- else{
- string += e.target.innerHTML;
- input.value = string;
- }
-
- })
- })
If you face any difficulties while creating Calculator or your code is not working as expected, you can download the source code files by clicking download button.