🛠️wr212 - Creation d'une calculatrice avec du js

Dans cette séquence nous avons appris a utiliser des élément "data" dans les balises html qui se trouve très utiles pour récupérer des informations en JS.

Voici le HTML avec les attributs data-number dans les balises button.

```html
<div id="calc-grid">
            <div id="span-four" data-output>0</div>
            <button class="number" id="span-two" data-all-clear>AC</button>
            <button class="number" data-operation>%</button><button class="number" data-operation>/</button><button class="number" data-number>7</button>
            <button class="number" data-number>8</button><button class="number" data-number>9</button><button class="number" data-operation>*</button>
            <button class="number" data-number>4</button><button class="number" data-number>5</button><button class="number" data-number>6</button>
            <button class="number" data-operation>-</button><button class="number" data-number>1</button><button class="number" data-number>2</button>
            <button class="number" data-number>3</button><button class="number" data-operation>+</button><button class="number" data-number>0</button>
            <button class="number" data-number>.</button><button class="number" id="span-two" data-equals>=</button>
        </div>
```

et voilà pour la récupération et le traitement des données ensuite :

```javascript
const clearButton = document.querySelector('[data-all-clear]')
const output = document.querySelector('#span-four')

function clear() {
    output.innerText=''
}

clearButton.addEventListener('click', ()=> {
    //console.info('effacer')
    clear() // au clique, j’appelle la fonction
})

const numberButtons = document.querySelectorAll('[data-number]')

function appendNumber(number) {
    // console.info(number)
    output.innerText = output.innerText + number.innerText // On modifie l'afficheur avec le nombre
}

numberButtons.forEach(button => { // Pour chaque bouton
    button.addEventListener('click', () => { // On créer un detecteur
        // console.info(button.innerText)
        appendNumber(button)
    })
})

const operationButtons = document.querySelectorAll('[data-operation]')

operationButtons.forEach(button => {
    button.addEventListener('click', () => {
        appendNumber(button)
    })
})

const equals = document.querySelector('[data-equals]')

equals.addEventListener('click', () => {
    output.innerText = eval(output.innerText);
})

```