How to Design a Calculator with Neumorphism Effect/Soft UI in JavaScript?


In this tutorial, we will be discussing how to design a calculator using JavaScript with a neumorphic effect, also known as a soft UI. Neumorphism is a design trend that has been growing in popularity in recent years and is characterized by its soft, rounded edges and light/dark shading.

Designing the Calculator

The first step in designing our calculator is to come up with a basic layout. We will be using a 12-column grid, with the following elements −

  • A input field for the user to enter numbers

  • A output field for the results of the calculations

  • A series of buttons for the various operations (add, subtract, multiply, divide, etc.)

Once we have our layout, we can start adding some CSS to give it a neumorphic look. We'll start by giving our input and output fields a light background color, and our buttons a dark background color. Then, we'll add some CSS3 box-shadow properties to create soft, rounded edges.

Adding the JavaScript

Now that our calculator looks the part, it's time to add some functionality with JavaScript. We'll start by creating a simple function that takes two input values and performs a calculation based on the operation that the user selects. This function will be passed to our event handlers for the various buttons.

Next, we'll write an event handler for each button that calls the appropriate function. For example, the event handler for the addition button will call the addition function.

Finally, we'll add a few lines of code to handle the input and output fields. When the user enters a value into the input field, we'll display it in the output field. And when the user clicks on a button, we'll perform the calculation and display the result in the output field.

Example

Full Working Code

And that's it! We now have a working neumorphic calculator designed with JavaScript. Here's the full code for reference −

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Neumorphic Calculator</title> <style> /* Basic Layout */ .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px; } /* Input Field */ .input { grid-column: 1 / span 12; background-color: #fafafa; border: none; padding: 20px; font-size: 16px; box-shadow: inset 5px 5px 10px #eaeaea, inset -5px -5px 10px #ffffff; } .input2 { grid-column: 1 / span 12; background-color: #fafafa; border: none; padding: 20px; font-size: 16px; box-shadow: inset 5px 5px 10px #eaeaea, inset -5px -5px 10px #ffffff; } /* Output Field */ .output { grid-column: 1 / span 12; background-color: #fafafa; border: none; padding: 20px; font-size: 16px; box-shadow: inset 5px 5px 10px #eaeaea, inset -5px -5px 10px #ffffff; } /* Button */ .button { grid-column: 1 / span 4; background-color: #424242; border: none; padding: 20px; font-size: 16px; color: #fff; cursor: pointer; box-shadow: 5px 5px 10px #b3b3b3, -5px -5px 10px #ffffff; } </style> </head> <body> <div class="container"> <input type="text" class="input" placeholder="Enter a value"> <input type="text" class="input2" placeholder="Enter a value"> <input type="text" class="output" placeholder="Result"> <button class="button">+</button> <button class="button">-</button> <button class="button">*</button> <button class="button">/</button> </div> <script> // Function to perform a calculation function calculate(num1, num2, operation) { switch (operation) { case '+': return num1 + num2; break; case '-': return num1 - num2; break; case '*': return num1 * num2; break; case '/': return num1 / num2; break; } } // Get the input and output fields const input = document.querySelector('.input'); const input2 = document.querySelector('.input2'); const output = document.querySelector('.output'); // Get the buttons const buttons = document.querySelectorAll('.button'); // Add event listeners to the buttons buttons.forEach(button => { button.addEventListener('click', () => { // Get the input values const num1 = parseFloat(input.value); const num2 = parseFloat(input2.value); // Perform the calculation const result = calculate(num1, num2, button.innerHTML); // Display the result output.value = result; }); }); // Add event listener to the input field input.addEventListener('input', () => { output.value = input.value; }); </script> </body> </html>

One of the great things about using JavaScript to create our calculator is that it is easily extensible. For example, we could add more functions for more complex calculations, or we could add event handlers to handle keyboard input.

In this tutorial, we have discussed how to design a calculator using JavaScript with a neumorphism effect. Neumorphism is a growing trend in design, and is characterized by its soft, rounded edges and light/dark shading. We have used CSS to give our calculator this look, and JavaScript to add functionality.

Updated on: 04-Aug-2022

176 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements