MASIGNASUKA101
3757417361466409779

Neumorphism Calculator UI design Using HTML, CSS, and JS

Neumorphism Calculator UI design Using HTML, CSS, and JS
Add Comments
Thursday, December 24, 2020
Neumorphism Calculator UI design Using HTML, CSS, and JS

Hello Reader, In this article, I am going to tell you how you can easily build a Neumorphism Calculator using only common programming languages ​​like HTML, CSS, and JavaScript. Responsive calculator, Casio company's calculator that I have designed a lot of calculators before. However, it is done using modern and professional Neumorphism designs. Like a simple calculator, it has all the facilities. You can easily do big mathematics calculations here very easily. All kinds of mathematics calculations like addition, subtraction, multiplication, division, etc. can be done. The night mode option has been added for the convenience of users. There is a button that, when clicked, will completely change the color of the calculator to black. There are a total of 21 buttons and they are designed in the shape of complete Neumorphism.

What is Neumorphism design?

 Neumorphism is a very popular design library today. This type of structure is currently widely used. CSS programming code plays a major role in creating these designs. Here some shadows are created using CSS code. Those shades are beautifully decorated and used to make different products. There are two types, one is dark and the other is light. In the meantime, I have shared many tutorials on this design and made many login forms, calculator, clocks, profile card, buttons, etc.

Some Neumorphism designs that you will definitely like.

How to add source code to make this calculator

 In this article, I will show you how to easily add it to any of your own projects. For this, you create an HTML and CSS file. Then download the HTML and CSS codes by clicking on the download button above. Copy the programming structure below and add it to your HTML file.

<!DOCTYPE html>
<html>
<head>
    <title> Neumorphism Calculator </title>
<link rel="stylesheet" href="stylesheet">
</head>
<body>
     Add HTML Code

     <script>
         Add Javascript Code
     </script>
</body>
</html>    

 

Add the JavaScript code to the structure where the add HTML code is written and the HTML code to the place where the add JavaScript is written. Then add the CSS codes to the CSS file. Using this method you can easily make this Neumorphism calculator. If you want to learn how to make it, follow the tutorial below.


Neumorphism Calculator UI design Using HTML, CSS, and JS

 How to make this Neumorphism calculator step by step

Here I am going to show you how you can learn to make it. Here I have shown you step by step which programming code has been used to create any element. This will allow you to learn how to make it easily and completely. Here the HTML code has been used to construct the structure of this calculator. CSS code has been used to design meanwhile. JavaScript code has helped make this calculator work.

Make structure

 The structure of this calculator has also been made using the following codes.

 <div class="main">
        <div class="heading">
</div>
</div>

* {
  margin0;
  padding0;
  font-family'Poppins'sans-serif;
}

html {
  --bg#f5f6f7;
  --color-text#9c9c9c;
  --color-orange#ff6a00;
  --color-shadow-4px -2px 4px 0px #ffffff,
                  4px 2px 6px 0px #DFE4EA;
  --color-inset-shadowinset -2px -2px 6px rgba(255,255,255,0.8),
                      inset 2px 2px 6px rgba(0,0,0,0.1);
  --color-equal-shadow-2px -2px 6px rgb(31692440.01),
                      2px 2px 6px rgba(0,0,0,0.3);
  --color-equal-inset-shadowinset -2px -2px 6px rgba(2551060,0.5),
                          inset 2px 2px 6px rgba(0,0,0,0.3); /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/

}
                                                                                                                   

html[data-theme='dark'] {
  --bg#131419;
  --color-text#fff;
  --color-orange#ff6a00;
  --color-shadow-3px -3px 10px rgba(255,255,255,0.05),
                  3px 3px 15px rgba(0,0,0,0.5);
  --color-inset-shadowinset -2px -2px 6px rgba(255,255,255,0.01),
                      inset 2px 2px 6px rgba(0,0,0,0.8);
  --color-equal-shadow-2px -2px 6px rgb(31692440.01),
                          2px 2px 6px rgba(0,0,0,0.8);
  --color-equal-inset-shadowinset -2px -2px 6px rgba(2551060,0.2),
                              inset 2px 2px 6px rgba(0,0,0,0.5);
}
body {
  background-colorvar(--bg);
}

.main {
  width300px;
  height560px;
  positionabsolute;
  top50%;
  left50%;
  transformtranslate(-50%-50%);
  border-radius10px;
  background-colorvar(--bg);
  box-shadowvar(--color-shadow);
  overflowhidden;
} /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/


.heading {
  height60px;
  displayflex;
  justify-contentspace-between;
  align-itemscenter;
  positionrelative;
  padding0 1.75rem;
}

.heading span {
  colorvar(--color-text);
  font-size1.125rem;
}

.heading span:nth-child(1),
.heading span:nth-child(3) {
  cursorpointer;
  font-size0.9375rem;
}

.heading span:nth-child(2) {
  margin-top5px;
}

.heading span:nth-child(2)::after {
  width115px;
  content'';
  positionabsolute;
  bottom-5%;
  border-bottom3px solid var(--color-orange);
  z-index100;
  left30%;
  border-radius0.625rem;
}

Add Buttons

 The buttons on this calculator are made using the following programming codes.

<div class="top-section">
                    <button class="operator" id="clear">C</button>
                    <button class="operator" id="backspace">
                        <i class="fa fa-backspace"></i><b>B</b>
                    </button>
                    <button class="operator" id="%">%</button>
                </div>
                <div class="middle-section">
                    <div>
                        <button class="number" id="7">7</button>
                        <button class="number" id="8">8</button>
                        <button class="number" id="9">9</button>
                    </div>
                    <div><!-- /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/
-->
                        <button class="number" id="4">4</button>
                        <button class="number" id="5">5</button>
                        <button class="number" id="6">6</button>
                    </div>
                    <div>
                        <button class="number" id="1">1</button>
                        <button class="number" id="2">2</button>
                        <button class="number" id="3">3</button>
                    </div>
                    <div>
                        <button class="number" id="00">00</button></td>
                        <button class="number" id="0">0</button></td>
                    </div>   
                </div>
            </div>
            <div class="side-section">
                <button class="operator" id="/">/</button>  
                <button class="operator" id="*">&times</button>  
                <button class="operator" id="-">-</button> 
                <button class="operator" id="+">+</button> 
                <button class="operator equal" id="=">=</button></td>
            </div>
        </div>

Design the buttons

 The following codes have helped to design the buttons here and arrange them in the form of Neumorphism.

#keyboard {
  padding1.875rem 1.25rem;
}

.operator,
.number {
  width45px;
  height45px;
  border-radius50%;
  bordernone;
  background-colorvar(--bg);
  font-weight900;
  font-size1.125rem;
  cursorpointer;
  box-shadowvar(--color-shadow);
}

.group {
  width185px;
  floatleft; /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/

}
                                                                                                                   

.top-section {
  heightauto;
  positionrelative;
  displayflex;
  justify-contentspace-around;
  padding0.25rem 0.375rem;
  border-radius1.875rem;
  justify-contentspace-between;
  margin-left0.625rem;
  backgroundvar(--bg);
  box-shadowvar(--color-shadow);
}

.top-section button {
  margin-top0.125rem;
}

.middle-section {
  heightauto;
  positionrelative;
  displayflex;
  justify-contentspace-between;
  flex-directioncolumn;
  align-itemscenter;
  padding0.25rem;
  border-radius1.875rem;
  margin-top0.125rem;
  margin-left0.20rem;
}

.middle-section button {
  margin0.1875rem 0.3125rem;
  colorvar(--color-text);
  font-weight600;
}
/*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/
.side-section {
  floatleft;
  height254px;
  positionrelative;
  displayflex;
  flex-directioncolumn;
  padding0.3125rem  0.25rem;
  border-radius1.875rem;
  justify-contentspace-between;
  margin-left0.625rem;
  backgroundvar(--bg);
  box-shadowvar(--color-shadow);
}

.side-section button {
  margin-left0.125rem;
}

.equal {
  background-colorvar(--color-orange);
  color#fff !important;
  box-shadowvar(--color-equal-shadow);
}

.operator {
  colorvar(--color-orange);
}

Design the output screen

 The following programming codes have been used to design the output screen. The screen that shows this method of calculation while performing some calculation is called the output screen. Some special kind of CSS programming code is used to make it.

#result {
  height30%;
  positionrelative;
  background-colorvar(--bg);
  border-top3px solid rgba(0000.05);
  border-bottom3px solid rgba(0000.05);
}

#history-value {
  positionabsolute;
  text-alignright;
  bottom30%;
  right5%;
  font-size2rem;
  colorvar(--color-text);
}

#output-value {
  positionabsolute;
  text-alignright;
  bottom2%;
  right5%;
  font-size2rem;
  colorvar(--color-text);
}

Add Javascript code

 JavaScript programming codes play the most significant role in building any calculator. 

function getHistory(){
    return document.getElementById('history-value').innerText;
}
function printHistory(num){
    document.getElementById("history-value").innerText=num;
}
function getOutput(){
    return document.getElementById("output-value").innerText;
}
function printOutput(num){
    if(num==""){
        document.getElementById("output-value").innerText=num;
    }else{
        document.getElementById("output-value").innerText=getFormattedNumber(num);
    } 
}                                                                                                                  /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/

function getFormattedNumber(num){
    if(num=="-"){
        return "";
    }
    var n = Number(num);
    var value = n.toLocaleString("en");
    return value;
}
function reverseNumberFormat(num){
    return Number(num.replace(/,/g,''));
}

var operator = document.getElementsByClassName("operator");
for(var i=0;i<operator.length;i++){
    operator[i].addEventListener('click',function(){
        if(this.id=="clear"){
            printHistory("");
            printOutput("");
        }                                                                                                                  /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/

        else if(this.id=="backspace"){
            var output = reverseNumberFormat(getOutput()).toString();
            if(output){
                output = output.substr(0,output.length-1);
                printOutput(output);
            }
        }
        else{
            var output = getOutput();
            var history = getHistory();
            if(output=="" && history!=""){

                if(isNaN(history[history.length-1])){
                    history = history.substr(0,history.length-1);
                }
            }                                                                                                                  /*middle-section {height: auto;position: relative;display: flex;justify-content: space-between;flex-direction: column;align-items: center;padding: 0.25remborder-radius: 1.875rem;margin-top: 0.125rem;margin-left: 0.20rem;}.middle-section button {margin: 0.1875rem 0.3125rem;color: var(--color-text);font-weight: 600;}*/

            if(output!="" || history!=""){
                output = output=="" ? output : reverseNumberFormat(output);
                history = history+output;
                if(this.id=="="){
                    var result=eval(history);
                    printOutput(result);
                    printHistory("");
                }

                else if(this.id=="%"){
                    var n = reverseNumberFormat(getOutput());
                    var percent = n / 100;
                    printOutput(percent.toFixed(4));
                }
                else{
                    history=history+this.id;
                    printHistory(history);
                    printOutput("");
                }
            }
        }
    });
}

var number = document.getElementsByClassName("number");
for(var i=0;i<number.length;i++){
    number[i].addEventListener('click',function(){
        var output=reverseNumberFormat(getOutput());
        //if output is a number
        if(output!=NaN){
            output=output+this.id;
            printOutput(output);
            
        }
    });
}

let checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change',function(){
    if(this.checked){
        document.documentElement.setAttribute('data-theme','dark');
    }else{
        document.documentElement.setAttribute('data-theme','light');
    }
})

 

These methods have been used to make it. Hopefully, the above tutorial has helped you to know and understand how to make a very beautifully designed Neumorphism calculator. If you have any problem then you can definitely let me know by commenting and I will help you completely.