Design a Calculator using JavaScript with Neumorphism Effect/Soft UI

01 Oct, 2021
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 of 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.
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.
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
adnanirshad158
sagartomar9927
Blogathon-2021
CSS-Basics
CSS-Properties
HTML-Questions
javascript-math
JavaScript-Questions
Blogathon
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form