Calculator Using JavaScript

Calculator Using JavaScript

December 6, 2022

Calculator Using JavaScript: A Beginner Web Project

Creating a calculator using JavaScript, HTML, and CSS is a great project to reinforce your front-end development skills. In this blog, we’ll walk through how you can build a clean and functional calculator web app from scratch.

Why Build a Calculator?

A calculator project is perfect for beginners because it:

  • Strengthens your understanding of HTML forms and input fields
  • Demonstrates how to use JavaScript to evaluate expressions
  • Introduces basic event handling and DOM manipulation
  • Encourages clean and minimal CSS styling for UI design

Tools & Technologies Used

  • HTML5 – for building the structure
  • CSS3 – for styling the layout and calculator buttons
  • JavaScript (ES6) – for performing operations and controlling the UI logic

Project Features

  • Basic arithmetic operations: Addition, Subtraction, Multiplication, Division
  • Clear (C) and Clear Entry (CE) buttons
  • Decimal support
  • Keyboard-like responsive button layout
  • Inline expression evaluation using eval()

Code Breakdown

HTML Structure:The calculator form uses an input field (<input name="answer">) for user expression and a series of buttons (<button>) to simulate a physical calculator interface.

CSS Styling:
The CSS classes like .calculator, .btns-cntnr, and .indi-btn are used to style the layout, arrange buttons in a grid, and give a polished look to the UI.

JavaScript Logic:
Each button uses the onclick event to append its value to the input field. The evaluation is handled via:

form.answer.value = eval(form.answer.value);

Note: Using eval() in production apps is discouraged due to security concerns. Consider using Function() or writing your own expression parser for advanced applications.

Code Snippets

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" href="static/favicon/favicon.png" type="image/x-icon">
    <title>Project Calculator</title>

    <link rel="stylesheet" href="static/styles/variable.css">
    <link rel="stylesheet" href="static/styles/global.css">
    <link rel="stylesheet" href="static/styles/header.css">
    <link rel="stylesheet" href="static/styles/main.css">
</head>

<body>
    <header>
        <div class="h-s">
            Project - Calculator
        </div>
    </header>

    <div class="wrapper">
        <div class="calculator">
            <form action="javascript:void(0)" name="form" onsubmit="form.answer.value = eval(form.answer.value)">
                <div class="output-cntnr">
                    <input id="calc" type="text" name="answer" placeholder="0">
                </div>
                <div class="btns-cntnr">
                    <!--  -->
                    <button type="button" class="indi-btn" value="%" onclick="form.answer.value += '%'">%</button>
                    <button type="button" class="indi-btn" value="C" >C</button>
                    <button type="button" class="indi-btn" value="CE" onclick="form.answer.value = ' ' ">CE</button>
                    <button type="button" class="indi-btn" value="/" onclick="form.answer.value += '/'">/</button>
                    <!--  -->
                    <button type="button" class="indi-btn" value="7" onclick="form.answer.value += '7'">7</button>
                    <button type="button" class="indi-btn" value="8" onclick="form.answer.value += '8'">8</button>
                    <button type="button" class="indi-btn" value="9" onclick="form.answer.value += '9'">9</button>
                    <button type="button" class="indi-btn" value="x" onclick="form.answer.value += '*'">*</button>
                    <!--  -->
                    <button type="button" class="indi-btn" value="4" onclick="form.answer.value += '4'">4</button>
                    <button type="button" class="indi-btn" value="5" onclick="form.answer.value += '5'">5</button>
                    <button type="button" class="indi-btn" value="5" onclick="form.answer.value += '5'">5</button>
                    <button type="button" class="indi-btn" value="-" onclick="form.answer.value += '-'">-</button>
                    <!--  -->
                    <button type="button" class="indi-btn" value="1" onclick="form.answer.value += '1'">1</button>
                    <button type="button" class="indi-btn" value="2" onclick="form.answer.value += '2'">2</button>
                    <button type="button" class="indi-btn" value="3" onclick="form.answer.value += '3'">3</button>
                    <button type="button" class="indi-btn" value="+" onclick="form.answer.value += '+'">+</button>
                    <!--  -->
                    <button type="button" class="indi-btn" value="+-" >+-</button>
                    <button type="button" class="indi-btn" value="0" onclick="form.answer.value += '0'">0</button>
                    <button type="button" class="indi-btn" value="." onclick="form.answer.value += '.'">.</button>
                    <button type="button" class="indi-btn" value="=" onclick="form.answer.value = eval(form.answer.value)">=</button>
                    <!--  -->
                </div>
            </form>
        </div>
    </div>
</body>

</html>

 

global.css

::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background-color: inherit;
}

::-webkit-scrollbar-thumb {
    background-color: #9c9c9c70;
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9c9c9cab;
}

* {
    margin: 0;
    box-sizing: border-box;
    user-select: none;
    user-zoom: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--ghost_white);
}

main {
    flex-grow: 1;
}

header,
footer {
    flex-grow: 0;
    flex-shrink: 0;
}

button {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: 0.1s;
    color: inherit;
    font-size: inherit;
}

 

header.css

header {
    width: 100%;
    background-color: var(--teal_blue);
    color: var(--white);
}

.h-s {
    padding: 0.6rem; 
    padding-bottom: 0.8rem;
    font-weight: 500;
    font-size: 1.5rem;
    text-transform: capitalize;
    width: fit-content;
}

 

main.css

.wrapper {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 1px;
}

.calculator {
    box-shadow: 8px 8px 10px 1px #bebebe86;
    background-color: var(--spanish_blue);
    padding: 10px;
    width: 350px;
    max-width: 95%;
}

@media only screen and (max-width: 499px) {
    .calculator {
        box-shadow: none;
    }   
}

.output-cntnr {
    width: 100%;
}

.output-cntnr input {
    width: 100%;
    background-color: none;
    outline: none;
    border-radius: 0px;
    border: none;
    padding: 10px;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.btns-cntnr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.btns-cntnr .indi-btn {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    background-color: var(--white);
    padding: 5px;
    font-size: 19px;
}

.btns-cntnr .indi-btn:hover {
    background-color: #f9f9f9ee;
}

 

variable.css

:root {
    --ghost_white: #f7f8fc;
    --spanish_blue: #4d96b1;
    --teal_blue: #256D85;
    --white: #ffffff;
}

 

How to Run

  1. Clone or download the project folder
  2. Open index.html in any modern web browser
  3. Start clicking the calculator buttons to perform calculations

Live Demo & Source Code

GitHub Repository

Conclusion

Building a calculator using JavaScript helps you practice fundamental web development concepts in a fun and interactive way. You can further enhance it by adding keyboard support, history logs, and advanced operations.

Comments ()