<html>
    <head>
        <title>calculator</title>
        <link rel="stylesheet" href="46-calculator.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="46-calculator.js"></script>
    <head>

</body>
</html>

// NOTE: You don't need to mess around with 
// CSS to follow the tutorial. Focus on the 
// JavaScript instead!
// =========================

// Some personal resets
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

/* Responsive Images */

embed,
iframe,
img,
object,
video {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding-right: 0;
  padding-left: 0;
}

a {
  text-decoration: none;
}

a:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
}

/* Removes all decimals and discs from lists */

ol,
ul {
  list-style: none;
}

/*
 * Completely resets form items
 * ----------------------------
 * Super hard reset that removes all borders
 * and radiuses of all form items (including
 * checkboxes and radios)
 */

input,
textarea,
button {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  outline: none;
  appearance: none;
  text-align: left;
}

input:hover,
input:active,
input:focus,
textarea:hover,
textarea:active,
textarea:focus,
button:hover,
button:active,
button:focus {
  outline: none;
}

:root {
  font-family: Helvetica, Arial, sans-serif;
}

html {
  font-size: 175%;
  font-weight: 300;
  line-height: 1.3;
}

body {
  align-items: center;
  background-image: linear-gradient(236deg, #74ebd5, #acb6e5);
  display: flex;
  height: 100vh;
  justify-content: center;
}

.container {
  max-width: 20em;
}

.container > p {
  text-align: center;
}

.calculator {
  border-radius: 12px;
  box-shadow: 0 0 40px 0px rgb(0 0 0 / 15%);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  max-width: 15em;
  overflow: hidden;
}

.calculator__display {
  background-color: #222222;
  color: #fff;
  font-size: 1.714285714em;
  padding: 0.5em 0.75em;
  text-align: right;
}

.calculator__keys {
  background-color: #999;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 1fr);
}

.calculator__keys > * {
  background-color: #fff;
  padding: 0.5em 1.25em;
  position: relative;
  text-align: center;
}

.calculator__keys > *:active::before,
.calculator__keys > .is-depressed::before {
  background-color: rgb(0 0 0 / 20%);
  bottom: 0;
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 50%) inset;
  content: "";
  left: 0;
  opacity: 0.3;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.key--operator {
  background-color: #eee;
}

.key--equal {
  background-image: linear-gradient(to bottom, #fe886a, #ff7033);
  grid-column: -2;
  grid-row: 2 / span 4;
}

/* la calculette de
https://www.freecodecamp.org/news/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98/
*/

function Calculator() {

let calculator = document.querySelector('.calculator');
    let keys = calculator.querySelector('.calculator__keys');

// the state of our computation
    // left-hand-side value
    let operand = 0;
    // operation to be performed by '='
    let operator = undefined;
    // right after '=' has been pressed
    // clicking a digit also means clear up first
    let needs_clear = true;

keys.addEventListener(
        'click',
        function(event) {
            // locating the display DOM node
            let display = document.querySelector(".calculator__display");
            // and the string inside
            let displayed = display.textContent;
            // react only on buttons
            if (event.target.matches('button')) {
                // the DOM node that was clicked
                let key = event.target;
                // if you wonder why the author has chosen to name
                // its attribute 'data-action', see
                // https://www.w3schools.com/tags/att_global_data.asp
                // and
                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
                let action = key.dataset.action;
                if (! action) {
                    console.log("number key");
                    // this will be e.g. string '7'
                    let digit = key.textContent;
                    // append that text to the display,
                    // except if it is '0', or if we just
                    // ran '='
                    if (needs_clear || displayed == "0") {
                        display.textContent = digit;
                        needs_clear = false;
                    } else {
                        display.textContent += digit;
                    }
                } else if (action == 'decimal') {
                    // already a dot ? ignore it
                    if (displayed.indexOf('.') >= 0) {
                        console.log('already a dot');
                    } else if (needs_clear) {
                        display.textContent = "0.";
                    } else {
                        display.textContent += '.';
                    }
                } else if (action == 'clear') {
                    operand = 0;
                    operator = undefined;
                    display.textContent = '0';
                } else if (action == 'calculate') {
                    // makes no sense if no current operation
                    if (! operator) {
                        console.log("do not know what to compute");
                    }
                    let result = operator(parseFloat(operand),
                                          parseFloat(displayed));
                    display.textContent = `${result.toPrecision(6)}`;
                    operator = undefined;
                    needs_clear = true;
                // operation buttons just reset display,
                // and record operator to function
                // to call later on when doing '='
                } else if (action == 'divide') {
                    operand = displayed;
                    operator = (x, y) => (x / y);
                    display.textContent = '0';
                } else if (action == 'multiply') {
                    operand = displayed;
                    operator = (x, y) => (x * y);
                    display.textContent = '0';
                } else if (action == 'substract') {
                    operand = displayed;
                    operator = (x, y) => (x - y);
                    display.textContent = '0';
                } else if (action == 'add') {
                    operand = displayed;
                    operator = (x, y) => (x + y);
                    display.textContent = '0';
                }
            }
        })
}

// note that here again we call Calculator only once
// so we could have inlined it right below instead
document.addEventListener('DOMContentLoaded', Calculator);

practice : a calculator