Skip to content
Related Articles

Related Articles

Improve Article

Design a Calculator using JavaScript with Neumorphism Effect/Soft UI

  • Difficulty Level : Expert
  • Last Updated : 01 Oct, 2021
Geek Week

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :