Open In App

Design a Calculator using JavaScript with Neumorphism Effect/Soft UI

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will learn how to create a working calculator with the Neumorphism effect using HTML, CSS, and JavaScript. Basic mathematical operations such as addition, subtraction, multiplication, and division can be performed using this calculator.

Approach: Neumorphism is a contemporary approach to decorating web-elements and creating a 3D effect on any web page. HTML and CSS can be used to create this animation effect. Neumorphism can be implemented using the CSS box-shadow feature. It is used to give an element a dark and light shadow on one side. The background appears to be tied to the neutral user interface elements as if they are extruded from or inset into it. Some have termed them “soft UI” because of how soft shadows are used to create the illusion, and the styling is almost three-dimensional.

HTML code: In this section, we will make the layout of the Neumorphism Calculator.

HTML




<!-- Filename: 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">
    <title>Neumorphism Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="container">
        <div class="cal-box">
            <form name="calculator">
                <input type="text" id="display" placeholder="0" readonly>
                <br>
                <input class="button"
                        type="button"
                        value="7"
                        onclick="calculator.display.value +='7'">
                <input class="button"
                       type="button"
                       value="8"
                       onclick="calculator.display.value +='8'">
                <input class="button"
                       type="button"
                       value="9"
                       onclick="calculator.display.value +='9'">
                <input class="button mathbutton"
                       type="button"
                       value="+" onclick="calculator.display.value +='+'">
                <br>
                <input class="button"
                       type="button"
                       value="4"
                       onclick="calculator.display.value +='4'">
                <input class="button"
                       type="button"
                       value="5"
                       onclick="calculator.display.value +='5'">
                <input class="button"
                       type="button"
                       value="6"
                       onclick="calculator.display.value +='6'">
                <input class="button mathbutton"
                       type="button"
                       value="-"
                       onclick="calculator.display.value +='-'">
                <br>
                <input class="button"
                       type="button"
                       value="1"
                       onclick="calculator.display.value +='1'">
                <input class="button"
                       type="button"
                       value="2"
                       onclick="calculator.display.value +='2'">
                <input class="button"
                       type="button"
                       value="3"
                       onclick="calculator.display.value +='3'">
                <input class="button mathbutton"
                       type="button"
                       value="x" onclick="calculator.display.value +='*'">
                <br>
                <input class="button clearButton"
                       type="button"
                       value="C"
                       onclick="calculator.display.value =''">
                <input class="button"
                       type="button"
                       value="0"
                       onclick="calculator.display.value +='0'">
                <input class="button mathbutton"
                       type="button"
                       value="="
                       onclick="calculator.display.value =eval(calculator.display.value)">
 
                <!-- eval() evaluates arithmetic expressions in display box -->
                <input class="button mathbutton"
                       type="button" value="/"
                       onclick="calculator.display.value +='/'">
            </form>
        </div>
    </div>
</body>
</html>


CSS code: In this section, we will use some CSS properties to design the Neumorphism Calculator.

CSS




/* filename: style.css */
body {
    background-color: rgb(214, 214, 214);
}
 
.container {
    width: 250px;
    height: 400px;
    margin: 80px auto;
    border-radius: 10px;
    background-color: rgb(214, 214, 214);
 
    /* box-shadow is used to achieve Neumorphism
    by using a light shadow and a dark shadow*/
    box-shadow: 5px 5px 10px #b6a9a9,
        -5px -5px 10px #ffffff;
}
 
.cal-box {
    width: 200px;
    margin: 20px auto;
}
 
#display {
    border: none;
    outline: none;
    color: black;
    text-align: right;
    font-weight: 600;
    padding: 15px;
    margin: 30px 0 20px 0;
    background: transparent;
 
    /* Inset shadow gives the appearance that
      the element is being pressed into it.*/
    box-shadow: inset 2px 2px 5px #babecc,
        inset -5px -5px 10px #ffffff;
}
 
.button {
    margin: 15px 0 0 5px;
    width: 42px;
    height: 42px;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    background-color: rgb(214, 214, 214);
 
    /* box-shadow is used to achieve Neumorphism
    by using a light shadow and a dark shadow */
    box-shadow: 5px 5px 10px #b6acac,
        -5px -5px 10px #faf4f4;
    display: inline-block;
}
 
.button:active {
 
    /* When the button is pressed, the inset
    shadow provides the impression that the
    element is being pressed into it */
    box-shadow: inset 1px 1px 2px #babecc,
        inset -1px -1px 2px #fff;
}
 
.clearButton {
    color: white;
    background-color: red;
}
 
.mathbutton {
    color: white;
    background-color: black;
}


Output:

HTML, CSS, and JavaScript working Calculator using Neumorphism Effect/Soft UI



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads