Working Calculator Using Javascript And Neumorphism CSS

A Simple and Working Calculator Using Javascript And Neumorphism CSS

Reads 1,385

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

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: #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

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

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


Have a nice day.

Founder & CEO of Swiftspeed Appcreator. I enjoy sharing my experiences in the digital world and helping businesses solve more problems with software development. Connect with me on LinkedIn @ Akinola Abdulakeem and Twitter @Kynsofficial

3 Comments

  2. Ajao Abd'Hameed says:

    Great work sir

    Reply

Leave a Reply

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