Neumorphistic-styled Calculator With HTML, CSS, and Javascript

calculator-js is a project for a Neumorphistic-style calculator, built with HTML, CSS, and JavaScript.

neumorphism calculator, neumorphism css examples, neumorphism text, neumorphism code css, neumorphism button, small calculator

How to make use of it:

1. Load the necessary Bootstrap 5 stylesheet into the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Generate the HTML for the calculator.

<div class="row g-3 p-2">
  <input id="result" type="text" class="neumorphistic-borders py-4 form-control text-end col-12 mb-3" placeholder="0" disabled />
  <div class="col-6">
    <a id="clear" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-bold">C</a>
  </div>
  <div class="col-3">
    <a id="division" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-bolder">÷</a>
  </div>
  <div class="col-3">
    <a id="multiplication" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-bold">×</a>
  </div>
  <div class="col-3">
    <a id="seven" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">7</a>
  </div>
  <div class="col-3">
    <a id="eight" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">8</a>
  </div>
  <div class="col-3">
    <a id="nine" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">9</a>
  </div>
  <div class="col-3">
    <a id="minus" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-bold">–</a>
  </div>
  <div class="col-3">
    <a id="four" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">4</a>
  </div>
  <div class="col-3">
    <a id="five" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">5</a>
  </div>
  <div class="col-3">
    <a id="six" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">6</a>
  </div>
  <div class="col-3">
    <a id="plus" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-bold">+</a>
  </div>
  <div class="col-9">
    <div class="row g-3">
      <div class="col-4">
        <a id="one" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">1</a>
      </div>
      <div class="col-4">
        <a id="two" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">2</a>
      </div>
      <div class="col-4">
        <a id="three" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">3</a>
      </div>
      <div class="col-8">
        <a id="zero" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-regular">0</a>
      </div>
      <div class="col-4">
        <a id="point" type="button" class="w-100 h-100 py-2 neumorphistic-borders fw-bold">.</a>
      </div>
    </div>
  </div>
  <div class="col-3">
    <a id="equals" type="button" class="w-100 h-100 py-2 neumorphistic-soft-borders fw-bold">=</a>
  </div>
</div>

3. Additional CSS Styles for the calculator.

:root {
  --white-background: #e2e2e2;
  --dark-shadow: #b5b5b5;
  --light-shadow: #ffffff;
  --text-color: #333;
}

body {
  background-color: var(--white-background);
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.neumorphistic-borders {
  border: none;
  background: var(--white-background);
  border-radius: 14px;
  box-shadow: 6px 6px 12px var(--dark-shadow), -6px -6px 12px var(--light-shadow);
}

.neumorphistic-soft-borders {
  border: none;
  background: var(--white-background);
  border-radius: 14px;
  box-shadow: 6px 6px 12px var(--dark-shadow), -6px -6px 12px var(--light-shadow);
}

#result {
  border-radius: 13px;
  background: var(--white-background) !important;
  box-shadow: inset 5px 5px 10px var(--dark-shadow), inset -5px -5px 10px var(--light-shadow);
  font-size: x-large;
}

div>a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--text-color);
}

div>a:hover {
  color: var(--text-color);
}

div>a:active {
  border: none;
  background: var(--white-background);
  box-shadow: inset 6px 6px 12px var(--dark-shadow), inset -6px -6px 12px var(--light-shadow);
}

4. The main text to enable the calculator.