Close Menu
    JavaScript

    How to make Neumorphism Calculator with Dark Light Theme in HTML CSS & JavaScript

    Coding StellaBy Updated:No Comments6 Mins Read

    Hello folks! Today, let’s build something practical and cool – a Neumorphism Calculator with Dark and Light themes using HTML, CSS, and JavaScript.

    In this tutorial, we’re not just creating a calculator; we’re diving into the world of Neumorphism design, giving our project a sleek and modern look. With the help of JavaScript, we’ll add the flexibility to switch between Dark and Light themes. Whether you’re a seasoned coder or just starting out, this is a great way to boost your skills and add a touch of style to your web creations.

    Why Neumorphism, you ask? Well, it’s all about that soft, subtle design that mimics physical objects. So, let’s explore HTML for structure, CSS for style, and JavaScript for dynamic theme switching.

    Join me on this coding adventure into the realm of Neumorphism calculators. We’ll play with HTML, CSS, and JavaScript to create something practical and visually appealing.

    HTML :

    This HTML code defines a simple calculator webpage with a neumorphic design. It includes buttons for digits, basic arithmetic operations, and a clear button. The JavaScript file “script.js” likely handles the calculator’s functionality. The design uses the Montserrat font and includes a dark/light mode toggle.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Neumorphism Calculator Dark/Light | CodingStella</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&amp;display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="toggleBtn"></div>
<div class="calculator">
  <div class="buttons">
    <h2 id="value"></h2>
    <span id="clear">Clear</span>
    <span>/</span>
    <span>*</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>-</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span id="plus">+</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>0</span>
    <span>00</span>
    <span>.</span>
    <span id="equal">=</span>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

    CSS :

    The provided code code defines the styles for a neumorphic calculator webpage. It includes general styles such as font, body layout, and background color. The calculator has neumorphic buttons with shadows and a distinctive design for clear, plus, and equal buttons. Additionally, there’s a dark mode with adjusted colors, and a toggle button at the top right switches between dark and light modes.

    /* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #edf1f4;
}

.calculator {
  position: relative;
  width: 340px;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fffb;
}

.calculator .buttons {
  position: relative;
  display: grid;
}

.calculator .buttons #value {
  position: relative;
  grid-column: span 4;
  user-select: none;
  overflow: none;
  width: 100%;
  text-align: end;
  color: #5166d6;
  height: 100px;
  line-height: 100px;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 20px #fff;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 0 20px;
  font-size: 2em;
  font-weight: 500;
}

.calculator .buttons span {
  position: relative;
  padding: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 20px #fff;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  min-width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: #666;
  border: 2px solid #edf1f4;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff;
}

.calculator .buttons span:active {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px #fff;
  color: #f44336;
}

.calculator .buttons span#clear {
  grid-column: span 2;
  background-color: #f44336;
  color: #fff;
  border: 2px solid #edf1f4;
}

.calculator .buttons span#plus {
  grid-row: span 2;
  background-color: #31a935;
  color: #fff;
  border: 2px solid #edf1f4;
}

.calculator .buttons span#equal {
  grid-row: span 2;
  background-color: #2196f3;
  color: #fff;
  border: 2px solid #edf1f4;
}

.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff,
    inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.toggleBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #555;
  cursor: pointer;
  border: 2px solid #edf1f4;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff;
}

.dark {
  background: #282c2f;
}

.dark .calculator {
  background: #33393e;
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.25),
    -15px -15px 20px rgba(255, 255, 255, 0.1);
}

.dark .calculator .buttons #value {
  background: #33393e;
  color: #eee;
  box-shadow: inset 15px 15px 20px rgba(0, 0, 0, 0.5),
    inset -15px -15px 20px rgba(255, 255, 255, 0.1);
}

.dark .calculator .buttons span {
  color: #eee;
  border: 2px solid #333;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25),
    -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.dark .calculator .buttons span:active {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.25),
    inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.dark .calculator .buttons span#clear,
.dark .calculator .buttons span#plus,
.dark .calculator .buttons span#equal {
  border: solid 2px #333;
}

.dark .calculator .buttons span#clear:active,
.dark .calculator .buttons span#plus:active,
.dark .calculator .buttons span#equal:active {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.dark .toggleBtn {
  background: #edf1f4;
  border: 2px solid #333;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25),
    -5px -5px 10px rgba(255, 255, 255, 0.25);
}

    JavaScript:

    This JavaScript code adds functionality to the neumorphic calculator. It selects the calculator buttons, individual button elements, the display value, and the dark mode toggle button. It then adds click event listeners to the buttons. If the button pressed is “=”, it evaluates the mathematical expression displayed; if it’s “Clear,” it clears the display; otherwise, it appends the button’s value to the display.

    The code also toggles the “dark” class on the body element when the dark mode toggle button is clicked.

    let buttons = document.querySelector(".buttons");
let btn = document.querySelectorAll("span");
let value = document.getElementById("value");
let toggleBtn = document.querySelector(".toggleBtn");
let body = document.querySelector("body");

for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function () {
    if (this.innerHTML == "=") {
      value.innerHTML = eval(value.innerHTML);
    } else {
      if (this.innerHTML == "Clear") {
        value.innerHTML = "";
      } else {
        value.innerHTML += this.innerHTML;
      }
    }
  });
}

toggleBtn.onclick = function () {
  body.classList.toggle("dark");
};

    We’ve successfully built a Neumorphism Calculator with Dark and Light theme using HTML, CSS, and JavaScript. This sleek and modern project combines practicality with style. Whether you’re a seasoned coder or a beginner, you now have a cool addition to your portfolio. Keep coding and exploring the world of web development – great job, everyone!

    If you run into any hiccups with your project, worry not. You can easily grab the source code for this project. Just hit the Download button to get started on your coding adventure. Happy coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply