loading...
Cover image for Neumorphism Calculator UI Design using HTML, CSS, JavaScript

Neumorphism Calculator UI Design using HTML, CSS, JavaScript

backlinkn profile image backlinkn ・6 min read

In this article, I will tell you how you can easily create a Neumorphism calculator using only HTML, CSS, and Java script programming code. I have designed many types of calculators on this site before. This calculator is a completely modern and UI design calculator which is now known as Neumorphism Calculator. These types of calculators are basically designed with the help of CSS programming code. Here a white page is shown in the form of a calculator using the shadow of the CSS programming code. These are basically made up of two themes, one is black and the other is white. The calculator I created in this article is made up of two themes. There is a button that allows you to use both light and white themes. This is a UI design calculator that is completely professional and responsive. It works beautifully on any device.
Neumorphism Calculator UI Design using HTML, CSS, JavaScript




Some special information about this Neumorphism calculator

  • Here basically I have used a very little amount of HTML code. I have made its design and response with the help of CSS code. JavaScript has helped make this calculator completely professional and effective.

  • You can download the three programming codes used here by clicking on the download button above.

  • It is basically made up of two themes i.e. white template and black template together here.

  • It is made fully responsive using some CSS programming code. As a result, it works just fine with any device and looks completely professional.

  • With the help of this calculator, you can find the solution to mathematics problems like addition, subtraction, multiplication, division, etc. Like a simple calculator, it has all the facilities and is designed in a completely modern way.

How to make this Neumorphism calculator

Hope you like this calculator and you are keen to make it. I will show you how to make it in this article. To create it, you first need to create an HTML file. Paste the following structure into that HTML file.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    Add CSS code
</style>
</head>
<body>
    Add HTML code
<script>
   Add JavaScript code
</script>

</body>
</html> 
Enter fullscreen mode Exit fullscreen mode

You can download the codes by clicking on the download button above. Then add HTML code in the place where the structure above is written HTML code. Add CSS code to the place where add CSS code is written. Add JavaScript code to the place where JavaScript is written.

We hope you understand the tutorial below and learn how to make it from there.

Make structure

The following codes have been used to construct this calculator. The following CSS codes have been used to design neumorphism.

 <div class='calculator' id='calc'>
</div>
Enter fullscreen mode Exit fullscreen mode
body {
  display: grid;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-items: center;
  font-family: 'Odibee Sans';
  font-size: 16px;
}

.display {
  border-radius: 12px;
  transition: .1s all ease-in-out;
  height: 60px;
  line-height: 60px;
  text-align: right;
  padding-right: 20px;
  width: 100%;
  font-size: 32px;
  letter-spacing: 4px;
}
                                                                                                                              /*00vw;height: 100vh;align-items: center;ustify-items: center;font-family: 'Odibee Sans';font-size: 16px;}isplay {border-radius: 12px;transition: .1s all ease-in-out;height: 60px;line-height: 60px;text-align: right;*/
.calculator {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "toggle toggle toggle toggle" "display display display display" "c signed percent divide" "seven eight nine times" "four five six minus" "one two three plus" "zero zero decimal equals";
  align-items: center;
  justify-items: center;
  grid-row-gap: 25px;
  grid-column-gap: 25px;
  border-radius: 20px;
  padding: 50px 40px 40px 40px;
}


Enter fullscreen mode Exit fullscreen mode

Alt Text
create the buttons

The following programming codes were originally used to create the buttons on this calculator. Here I have used a lot of buttons. The following HTML and CSS programming codes have been used to create those.

<div class='display'></div>
  <span class='c neumorphic'>C</span>
  <span class='signed neumorphic'>+/-</span>
  <span class='percent neumorphic'>%</span>
  <span class='divide neumorphic'>÷</span>
  <span class='seven neumorphic'>7</span>
  <span class='eight neumorphic'>8</span>
  <span class='nine neumorphic'>9</span>
  <span class='times neumorphic'>x</span>
  <span class='four neumorphic'>4</span>
  <span class='five neumorphic'>5</span>                                                                                                                              /*dius: 12px;transition: .1s all ease-in-out;height: 60px;line-height: 60px;text-align: right;*/
  <span class='six neumorphic'>6</span>
  <span class='minus neumorphic'>-</span>
  <span class='one neumorphic'>1</span>
  <span class='two neumorphic'>2</span>
  <span class='three neumorphic'>3</span>
  <span class='plus neumorphic'>+</span>
  <span class='zero neumorphic'>0</span>
  <span class='decimal neumorphic'>.</span>
  <span class='equals neumorphic'>=</span>

Enter fullscreen mode Exit fullscreen mode
.c, .signed, .percent, .divide, .seven, .eight, .nine, .times, .four, .five, .six, .minus, .one, .two, .three, .plus, .zero, .decimal, .equals {
  text-align: center;
  height: 60px;
  width: 60px;
  line-height: 60px;
}

.zero {
  width: 100%;
  border-radius: 12px;
}

.toggle {
  grid-area: toggle;
}
                                                                                                                              /*lign-items: center;ustify-items: center;font-family: 'Odibee Sans';font-size: 16px;}isplay {border-radius: 12px;transition: .1s all ease-in-out;height: 60px;line-height: 60px;text-align: right;*/
.display {
  grid-area: display;
}

.c {
  grid-area: c;
}

.signed {
  grid-area: signed;
}

.percent {
  grid-area: percent;
}

.divide {
  grid-area: divide;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}

.times {
  grid-area: times;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.minus {
  grid-area: minus;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}
                                                                                                                              /*display: grid;width: 100vw;height: 100vh;align-items: center;ustify-items: center;font-family: 'Odibee Sans';font-size: 16px;}isplay {border-radius: 12px;transition: .1s all ease-in-out;height: 60px;line-height: 60px;text-align: right;*/
.plus {
  grid-area: plus;
}

.zero {
  grid-area: zero;
}

.decimal {
  grid-area: decimal;
}

.equals {
  grid-area: equals;
}

.toggle {
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text
Make theme switch
Here I have used two types of themes Dark and Light. You will have a white theme in front of you when you open the calculator. The following HTML and CSS, JavaScript programming codes have been used to make this switch.

<div class='toggle'>
    <div class='theme-switch-wrapper'>
      <label class='theme-switch' for='checkbox'>
        <input id='checkbox' type='checkbox'>
        <div class='slider round'></div>
      </label>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode
.theme-switch-wrapper {
  display: block;
  float: right;
  align-items: center;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
    }
}

toggleSwitch.addEventListener('change', switchTheme, false);
Enter fullscreen mode Exit fullscreen mode

Alt Text
make this calculator functional

The following programming codes have been used to make this calculator fully functional.

var keys = document.querySelectorAll('#calc span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function(e) {
        var input = document.querySelector('.display');
        var inputVal = input.innerHTML;
        var btnVal = this.innerHTML;

        if (btnVal == 'C') {
            input.innerHTML = '';
            decimalAdded = false;
        } else if (btnVal == '=') {
            var equation = inputVal;
            var lastChar = equation[equation.length - 1];

            equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
                                                                                                                              /*display: grid;width: 100vw;height: 100vh;align-items: center;ustify-items: center;font-family: 'Odibee Sans';font-size: 16px;}isplay {border-radius: 12px;transition: .1s all ease-in-out;height: 60px;line-height: 60px;text-align: right;*/
            if (operators.indexOf(lastChar) > -1 || lastChar == '.')
                equation = equation.replace(/.$/, '');

            if (equation)
                input.innerHTML = eval(equation);

            decimalAdded = false;
        } else if (operators.indexOf(btnVal) > -1) {
            var lastChar = inputVal[inputVal.length - 1];

            if (inputVal != '' && operators.indexOf(lastChar) == -1)
                input.innerHTML += btnVal;

            else if (inputVal == '' && btnVal == '-')
                input.innerHTML += btnVal;


            if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
                input.innerHTML = inputVal.replace(/.$/, btnVal);
            }
                                                                                                                              /*display: grid;width: 100vw;height: 100vh;align-items: center;ustify-items: center;font-family: 'Odibee Sans';font-size: 16px;}isplay {border-radius: 12px;transition: .1s all ease-in-out;height: 60px;line-height: 60px;text-align: right;*/
            decimalAdded = false;
        } else if (btnVal == '.') {
            if (!decimalAdded) {
                input.innerHTML += btnVal;
                decimalAdded = true;
            }
        } else {
            input.innerHTML += btnVal;
        }

        // prevent page jumps
        e.preventDefault();
    }
}

Enter fullscreen mode Exit fullscreen mode

Alt Text
Hope you understand how to make this calculator. If you encounter any problems while trying to make it, please let me know in the comments. I will totally help you in all aspects to make this Neumorphism Calculator. Special thanks to you for reading to the end of the article.

   If you like this calculator, please like the article.
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
ekeijl profile image
Edwin

I didn't like flat design, neumorphism even less. There is so little contrast, this seems bad for accessibility. The design should make it clear that a button can be clicked, here the only difference is an inset/outset border.

Collapse
adam_cyclones profile image
Adam Crockett

Hey there is no Java code here as your introduction suggests I raise this in case it was a mistake.

Collapse
backlinkn profile image
backlinkn Author

I urge you to read the article again. It is never possible to build a calculator using only html and css code without JavaScript code. I'm using a lot of JavaScript code here.

Collapse
adam_cyclones profile image
Adam Crockett

You said Java, not JavaScript. I am aware you have used lots of JavaScript. You really have wrote "Java" around the first paragraph, Java is a programming language completely unrelated.

Is it possible without JavaScript, honestly it probably is.

codepen.io/programking/pen/jFtGK

Thread Thread
backlinkn profile image
backlinkn Author

I'm sorry for the inconvenience. While writing fast, I mistakenly wrote JavaScript to Java

Thread Thread
adam_cyclones profile image
Adam Crockett

It's no inconvenience, I'm a mod, so I'm trying to help.