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.

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

HTML

Copy Code


<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

Copy Code


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

body {
  background: #e0e0e0;
  font-family: 'Montserrat', sans-serif;
}
.container {
  width: 320px;
  height: 490px;
border-radius: 20px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
  margin: 0 auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}
.container .result {
  width: 100%;
  height: 100px;
border-radius: 10px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
}
.container .result p {
  font-size: 25pt;
  overflow-y: auto;
  text-align: right;
  color: #00000;
  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;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
}
.button:hover{
  color: #3498db;
border-radius: 20px;
background: #d11a1a;
box-shadow:  5px 5px 10px #a31414,
             -5px -5px 10px #ff2020;
 
}

/*  Big Button */
.container .buttons .zero {
  grid-column: 1/ 3;
  width: 100%;
  font-size: 20px;
  color: #00000;
  border-radius: 10px;
border-radius: 18px;
background: #e0e0e0;
box-shadow:  5px 5px 10px #c1c1c1,
             -5px -5px 10px #ffffff;
}

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

}

JAVASCRIPT

Copy Code


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";
})

Have a nice day.

A Simple and Working Calculator Using Javascript And Neumorphism CSS

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

4 Comments

Leave a Reply Cancel reply