Working Calculator Using Javascript And Neumorphism CSS

A Simple and Working Calculator Using Javascript And Neumorphism CSS

Hi, let’s play around today by creating a Simple and Working Calculator Using Javascript And Neumorphism CSS. If you don’t know to code and you are willing to learn, you can start from scratch.

Working Calculator Using Javascript And Neumorphism CSS

SOURCE CODE of A Simple and Working Calculator Using Javascript And Neumorphism CSS

HTML

                    

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Neumorphism calculator design</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">
    <div class="result">
      <p id="result-box">0</p>
    </div>


    <div class="buttons">
      <div class="button action-btn" id="clear"> AC </div>
      <div class="button action-btn"> MC</div>
      <div class="button num-button  action-btn"> %</div>
      <div class="button num-button  calc-action-btn"> /</div>
      <div class="button num-button seven">7</div>
      <div class="button num-button eight">8</div>
      <div class="button num-button  nine">9</div>
      <div class="button num-button  calc-action-btn">*</div>
      <div class="button num-button  four">4</div>
      <div class="button num-button  five">5</div>
      <div class="button num-button  six">6</div>
      <div class="button num-button  calc-action-btn">-</div>
      <div class="button num-button  one">1</div>
      <div class="button num-button  two">2</div>
      <div class="button num-button  three">3</div>
      <div class="button num-button  calc-action-btn">+</div>
      <div class="button num-button  zero">0</div>
      <div class="button num-button  point">.</div>
      <div class="button calc-action-btn" id="total">=</div>
    </div>

  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
  <script src="./script.js"></script>

</body>

</html>

CSS

                    

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body {
  background: #e01c1c;
  font-family: 'Montserrat', sans-serif;
}
.container {
  width: 320px;
  height: 490px;
border-radius: 20px;
background: linear-gradient(145deg, #bc1717, #e01c1c);
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}
.container .result {
  width: 100%;
  height: 100px;
border-radius: 10px;
background: #d11a1a;
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
}
.container .result p {
  font-size: 25pt;
  overflow-y: auto;
  text-align: right;
  color: #fff;
  padding-right: 10px;
  
}

.container .buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}
.container .buttons .button, .container .buttons .num-button  {
  cursor: grab;
  text-align: center;
  width: 60px;
  font-size:18px;
  height: 60px;
  display: grid;
  place-content: center;
  border-radius: 20px;
background: linear-gradient(145deg, #bc1717, #e01c1c);
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
}
.button:hover{
  color: #3498db;
border-radius: 20px;
background: #d11a1a;
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
 
}


/*  UTILITIES*/
.container .buttons .zero {
  grid-column: 1/ 3;
  width: 100%;
  font-size: 20px;
  color: #fff;
  border-radius: 10px;
background: #d11a1a;
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
}

 
.action-btn {
  color: grey;
  font-weight: bold;
}
.calc-action-btn{
  color: #fff;
  font-size: 60px;
  font-weight: bold;
 
}

JAVASCRIPT

                    

let btns = document.querySelectorAll(".num-button");
let allBtns = document.querySelectorAll(".button");
let resultBox = document.querySelector("#result-box");
let clearBtn = document.querySelector('#clear');

let total = document.querySelector("#total");

let btnSpread = [...btns];
let allBtnSpread = [...allBtns];

// For Number Inputs
btnSpread.forEach((button, i) => {
  button.addEventListener("click", () => {
    // Inner Values for calculator

    if (resultBox.innerHTML == "0") {
      resultBox.innerHTML = "";
    }

    let value = btns[i].innerHTML;
    resultBox.innerHTML += value;
  });
});


// Function to evalute Strings
function evaluate(fn) {
    return new Function('return ' + fn)();
}

// To calculate All Input
total.addEventListener('click', ()=> {
let allInputs = resultBox.innerHTML;

resultBox.innerHTML = evaluate(allInputs);

console.log(evaluate(allInputs));
})

// Clear all Inputs
clearBtn.addEventListener('click', ()=> {
    resultBox.innerHTML = "0";
})

You can follow me on Twitter using the tweet below to learn this step by step.


Have a nice day.

3 Comments

  1. Ajao Abd'Hameed says:

    Great work sir

Leave a Reply

Your email address will not be published. Required fields are marked *