giuseppe998e/dead-simple-js-calculator.html

## dead-simple-js-calculator.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dead simple JS Calculator</title>
    <style>
      body {
        background-color: whitesmoke;
        margin: 0;
        height: 100vh;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        font-size: 2.5em;
      }
    </style>

    <!-- Calculator CSS / START -->
    <style>
      .calc {
        --c-size: 2em;
        --c-gap: .4em;

        max-width: calc((var(--c-size) + var(--c-gap) * 2) * 4);

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--c-gap);

        justify-items: center;
      }

      .calc > * {
        height: var(--c-size);
        background: #fff;
        border-radius: 1em;
        font-size: 1em;
      }

      .calc > input {
        width: calc(var(--c-size) * 3);
        padding: 0 .75em;
        text-align: right;
        border: none;

        grid-column: 1 / 4;
      }

      .calc > button {
        width: var(--c-size);
        text-align: center;
        border: none;
      }

      .calc > button:nth-child(4n + 2) {
        background: #4a90e2;
        color: #fff;
      }

      .calc > button:active {
        background: red;
        color: #fff;
      }
    </style>
    <!-- Calculator CSS / END -->

  </head>
  <body>
    <div class="container">

      <!-- Calculator HTML / START -->
      <div class="calc">
        <input type="text" />
        <button>C</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>÷</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>×</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>-</button>
        <button>.</button>
        <button>0</button>
        <button>=</button>
        <button>+</button>
      </div>
      <!-- Calculator HTML / END -->

    </div>

    <!-- Calculator JS / START -->
    <script>
      (function () {
        const display = document.querySelector(".calc > input")
        document.querySelectorAll(".calc > button").forEach((e) => {
          if ("=" === e.innerText)
            e.onclick = () =>
              (display.value = eval(
                display.value
                  .replace(/÷/g, "/")
                  .replace(/×/g, "*")
                  .replace(/[^\d-/*+.]/g, "")
              ))
          else if ("C" === e.innerText) e.onclick = () => (display.value = "")
          else e.onclick = () => (display.value += e.innerText)
        })
      })()
    </script>
    <!-- Calculator JS / END -->

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Dead simple JS Calculator</title>
	<style>
	body {
	background-color: whitesmoke;
	margin: 0;
	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;
	}

	.container {
	font-size: 2.5em;
	}
	</style>

	<!-- Calculator CSS / START -->
	<style>
	.calc {
	--c-size: 2em;
	--c-gap: .4em;

	max-width: calc((var(--c-size) + var(--c-gap) * 2) * 4);

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--c-gap);

	justify-items: center;
	}

	.calc > * {
	height: var(--c-size);
	background: #fff;
	border-radius: 1em;
	font-size: 1em;
	}

	.calc > input {
	width: calc(var(--c-size) * 3);
	padding: 0 .75em;
	text-align: right;
	border: none;

	grid-column: 1 / 4;
	}

	.calc > button {
	width: var(--c-size);
	text-align: center;
	border: none;
	}

	.calc > button:nth-child(4n + 2) {
	background: #4a90e2;
	color: #fff;
	}

	.calc > button:active {
	background: red;
	color: #fff;
	}
	</style>
	<!-- Calculator CSS / END -->

	</head>
	<body>
	<div class="container">

	<!-- Calculator HTML / START -->
	<div class="calc">
	<input type="text" />
	<button>C</button>
	<button>7</button>
	<button>8</button>
	<button>9</button>
	<button>÷</button>
	<button>4</button>
	<button>5</button>
	<button>6</button>
	<button>×</button>
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>-</button>
	<button>.</button>
	<button>0</button>
	<button>=</button>
	<button>+</button>
	</div>
	<!-- Calculator HTML / END -->

	</div>

	<!-- Calculator JS / START -->
	<script>
	(function () {
	const display = document.querySelector(".calc > input")
	document.querySelectorAll(".calc > button").forEach((e) => {
	if ("=" === e.innerText)
	e.onclick = () =>
	(display.value = eval(
	display.value
	.replace(/÷/g, "/")
	.replace(/×/g, "*")
	.replace(/[^\d-/*+.]/g, "")
	))
	else if ("C" === e.innerText) e.onclick = () => (display.value = "")
	else e.onclick = () => (display.value += e.innerText)
	})
	})()
	</script>
	<!-- Calculator JS / END -->

	</body>
	</html>