How to build Neumorphism calculator using javascript, html, and css

Neumorphism is a design trend that involves creating soft, subtle gradients and shadows to give an interface a more organic, three-dimensional look. Here is an example of how you can build a neumorphic calculator using HTML, CSS, and JavaScript:

1. Create the HTML structure for the calculator. This will include the input fields for the numbers and the buttons for the different operations. Here is an example HTML structure:

<div id="calculator">
  <input type="text" id="result">
  <button type="button" class="operator" value="7">7</button>
  <button type="button" class="operator" value="8">8</button>
  <!-- more buttons for the other digits and operations -->
</div>

1. Add some neumorphic styling to the calculator using CSS. You can use CSS to create the soft gradients and shadows that are characteristic of neumorphism. Here is an example of some neumorphic CSS styling:

#calculator {
  display: flex;
  flex-wrap: wrap;
  width: 240px;
  height: 280px;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

input[type="text"] {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  border: none;
  background-color: #fff;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.1);
}

button[type="button"] {
  width: 60px;
  height: 60px;
  font-size: 18px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.1);
}

button[type="button"]:active {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.1);
}

1. Add the JavaScript code to make the calculator function. You can use JavaScript to listen for clicks on the buttons, retrieve the values of the buttons, and perform the calculations. Here is an example of the JavaScript code:

const buttons = document.querySelectorAll('.operator');
const resultField = document.querySelector('#result');

let result = '';

buttons.forEach(button => {
  button.addEventListener('click', () => {
    result += button.value;
    resultField.value = result;
  });
});

This code selects all elements with the class operator, which are the buttons on the calculator, and the element with the id of result, which is the input field where the result is displayed. It then sets up an event listener for the click event on each button, which appends the value of the button to the result variable and displays it in the result field.