# Design a Calculator using JavaScript with Neumorphism Effect/Soft UI

Last Updated : 02 Jun, 2023

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

 `` `` `<``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` `    ``<``link` `rel``=``"stylesheet"` `href``=``"style.css"``>` ``   `<``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)"``>`   `                ``` `                ``<``input` `class``=``"button mathbutton"` `                       ``type``=``"button"` `value``=``"/"` `                       ``onclick``=``"calculator.display.value +='/'"``>` `            ``` `        ``` `    ``` `` ``

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

Previous
Next