calculatrice(html ,avasript css

7 octobre 2023 à 0:53:20

Bonjour, je viens de commencer le web et je n'arrive pas à realiser le programme de l'image ci-dessous. Voici mon programme il ne fais absolument rien juste de click. Je voudrais savoir ou est le probleme ?

// Variables to track active operand and selected operation
let activeOperand = "operand1";
let selectedOperation = null;

// DOM elements
const operand1El = document.querySelector("#operand1");
const operand2El = document.querySelector("#operand2");
const resultEl = document.querySelector("#result");

// Set the active operand
function setActiveOperand(operand) {
  activeOperand = operand;
}

// Append number to the active operand
function appendNumber(number, operand) {
  const operandEl = document.querySelector(`#${operand}`);
  
  if(operandEl.value === "0") {
    operandEl.value = number;
  } else {
    operandEl.value += number; 
  }
}

// Delete the last character from the active operand
function deleteLastCharacter(operand) {
  const operandEl = document.querySelector(`#${operand}`);
  operandEl.value = operandEl.value.slice(0, -1);
  if(operandEl.value === "") {
    operandEl.value = "0";
  }
}

// Clear the active operand
function clearOperand(operand) {
  document.querySelector(`#${operand}`).value = "0";
}

// Set the selected operation
function setOperation(operation) {
  selectedOperation = operation;
}

// Update the result based on the selected operation
function updateOutput() {
  const operand1 = parseFloat(operand1El.value);
  const operand2 = parseFloat(operand2El.value);

  let result;
  
  switch(selectedOperation) {
    case "add":
      result = operand1 + operand2;
      break;
    case "subtract":
      result = operand1 - operand2;
      break;
    case "multiply":
      result = operand1 * operand2;
      break;
    case "divide":
      result = operand2 !== 0 ? operand1 / operand2 : "Infinity";
      break;
    default:
      result = "Error";
  }

  resultEl.value = result;
}

// Save operands to localStorage
function saveOperands() {
  localStorage.setItem("operand1", operand1El.value);
  localStorage.setItem("operand2", operand2El.value);
}

// Restore operands from localStorage
function restoreOperands() {
  const savedOperand1 = localStorage.getItem("operand1");
  const savedOperand2 = localStorage.getItem("operand2");

  if(savedOperand1 !== null) operand1El.value = savedOperand1;
  if(savedOperand2 !== null) operand2El.value = savedOperand2;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Responsive Volatile Input Operand Pair Calculator HTML CSS JS  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="UTF-8">
  <script src="main.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    Welcome to the Responsive Volatile Input Operand Pair Calculator tutorial app in Vanilla
    <a href="https://www.w3schools.com/html/default.asp">HTML</a>+ 
    <a href="https://www.w3schools.com/css/default.asp">CSS</a> +
    <a href="https://www.w3schools.com/js/default.asp">JS</a> !
  </header>
 
  <main>
    <form>
      <div class="container">

        <div class="left-align">
          <input id="operand1" class="right-align" type="number" value="0" onclick="setActiveOperand('operand1')" readonly>
          <div class="keypad right-align">
              <button onclick="deleteLastCharacter('operand1')">DEL</button>
              <button onclick="clearOperand('operand1')">C</button>
              <br> 
              <button onclick="appendNumber('1', 'operand1')">1</button>
              <button onclick="appendNumber('2', 'operand1')">2</button>
              <button onclick="appendNumber('3', 'operand1')">3</button>
              <button onclick="appendNumber('4', 'operand1')">4</button>
              <button onclick="appendNumber('5', 'operand1')">5</button>
              <button onclick="appendNumber('6', 'operand1')">6</button>
              <button onclick="appendNumber('7', 'operand1')">7</button>
              <button onclick="appendNumber('8', 'operand1')">8</button>
              <button onclick="appendNumber('9', 'operand1')">9</button>
              <button onclick="appendNumber('-', 'operand1')">-</button>
              <button onclick="appendNumber('0', 'operand1')">0</button>
              <button onclick="appendNumber('.', 'operand1')">.</button>
          </div>
        </div>

        <div class="operators">
            <button id="add" type="button" onclick="setOperation('add')"> + </button>
            <button id="subtract" type="button" onclick="setOperation('subtract')"> - </button>
            <button id="multiply" type="button" onclick="setOperation('multiply')"> *</button>
            <button id="divide" type="button" onclick="setOperation('divide')"> / </button>
        </div>

        <div class="right-align">
          <input id="operand2" class="left-align" type="number" value="0" onclick="setActiveOperand('operand2')" readonly>
          <div class="keypad left-align">
              <button onclick="deleteLastCharacter('operand2')">DEL</button>
              <button onclick="clearOperand('operand2')">C</button>
              <br> 
              <button onclick="appendNumber('1', 'operand2')">1</button>
              <button onclick="appendNumber('2', 'operand2')">2</button>
              <button onclick="appendNumber('3', 'operand2')">3</button>
              <button onclick="appendNumber('4', 'operand2')">4</button>
              <button onclick="appendNumber('5', 'operand2')">5</button>
              <button onclick="appendNumber('6', 'operand2')">6</button>
              <button onclick="appendNumber('7', 'operand2')">7</button>
              <button onclick="appendNumber('8', 'operand2')">8</button>
              <button onclick="appendNumber('9', 'operand2')">9</button>
              <button onclick="appendNumber('-', 'operand2')">-</button>
              <button onclick="appendNumber('0', 'operand2')">0</button>
              <button onclick="appendNumber('.', 'operand2')">.</button>
          </div>
        </div>

      </div>

      <button id="equals" type="button" onclick="updateOutput()"> = </button>
      <output id="result" for="operand1 operand2">0</output>
      <button id="save" type="button" onclick="saveOperands()">Save</button>
      <button id="restore" type="button" onclick="restoreOperands()">Restore</button>

    </form>
  </main>
</body>
</html>

body {
  background-color: ivory;
  font-size: x-large;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
  justify-items: center;
  align-items: center;
  padding: 50px;
}

header {
  color: blueviolet;
  font-weight: bold;
  grid-column: 1 / span 4;
  margin-bottom: 20px;
}

select, button {
  color: orangered;
  border-color: orangered;
  border-width: 1%;
  margin: 1% 1%;
  font-size: x-large;
  font-weight: bold;
}

input {
  font-size: inherit;
  border-color: blue;
  color: blue;
  width: 100%;
}

output {
  color: blue;
  font-size: larger;
}

#operand1, #operand2, #result {
  grid-column: 1 / span 4;
  margin: 30px 0;
  
}

#operationSelect, #equals, #save, #restore {
  grid-column: 4;
  
}

.container {
  display: table;
  width: 300%;
}

.left-align, .right-align {
  display: table-cell;
  
}

.left-align {
  text-align: left;
  
}

.right-align {
  text-align: right;
}
.keypad button {
  width: 150px;       /* Set a specific width for the buttons */
  padding: 10px 20px; /* Adjust padding to maintain button height while increasing width */
  margin: 5px;        /* Adjust the margin between buttons */
  text-align: center; /* Ensure the text/number is centered in the button */
}

.operators {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two columns */
  gap: 10px;  /* Spacing between buttons */
  justify-items: center;
  align-items: center;
  margin-top: 30px;  /* Adjust this value to move the entire operator group up or down */
}

.operators button {
  width: 100px;  /* Adjust width as needed */
  padding: 10px 20px;
  margin: 5px;
  text-align: center;
}

zvheer

7 octobre 2023 à 23:47:37

Bonjour,

Le principal soucis vient du fait que tu as englobé boutons d'une balise form . Quand on appuie sur un boutton présent dans une balise form il a pour action par défaut de valider le formulaire donc ta page se recharger, pour corriger ça le plus simple et logique à faire est de ne pas utiliser une balise form (tu n'en as aucune utilité ici) ou utiliser un preventDefault() sur l'évenement submit du formulaire (si tu débutes ce n'est pas la peine) ou définir les boutons comme ayant un role de bouton en mettant

<button type="button">Del</button>

Ensuite dans ton fichier javascript tu récupères élements qui sont dans ton document html, sauf que si le fichier est chargé avant que ces élements de ton document ne soient chargé eux, tu ne sélectionnes rien donc dans ce cas prend l'habitude de soit

mettre ta balise script en bas à la fin de ton body

soit ajouter sur ton script src defer

<script src="..." defer></script>

soit

englober ton code javascript de l'évenement qui attend le chargement

window.addEventListener("load",function(){

});

Après avoir fait ces changements de mon coté en appuyant sur un nombre il s'affiche bien dans la barre
Je pense que tu peux tenter d'apporter tes corrections de ton côté maintenant

Ps:

les bouttons html peuvent être crée en javascript pour ne pas avoir à re écrire 10 fois la même ligne

yasakani no magatama

GENESIS_LORD

8 octobre 2023 à 12:17:18

window.addEventListener("load", function() {
    let selectedOperation = "+";
    let activeInput = "operand1";

    function selectOperation(ope

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive Volatile Input Operand Pair Calculator HTML CSS JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
    Welcome to the Responsive Volatile Input Operand Pair Calculator tutorial
    app in Vanilla
    <a href="https://www.w3schools.com/html/default.asp">HTML</a>+
    <a href="https://www.w3schools.com/css/default.asp">CSS</a> +
    <a href="https://www.w3schools.com/js/default.asp">JS</a> !
</header>
<main>
    <div class="input-group">
        <input class="right-align" id="operand1" type="number" value="0" inputmode="numeric" />
        <div id="controlButtons1"></div>
        <div id="numericKeypad1">
            <!-- ... Other buttons ... -->
            <button type="button" class="dot-button">.</button>
        </div>
    </div>

    <div id="operatorKeypad">
        <button type="button" data-operation="+">+</button>
        <button type="button" data-operation="-">-</button>
        <button type="button" data-operation="*">*</button>
        <button type="button" data-operation="/">/</button>
    </div>

    <button type="button" id="save">Save</button>

    <div class="input-group">
        <input class="right-align" id="operand2" type="number" value="0" inputmode="numeric" />
        <div id="controlButtons2"></div>
        <div id="numericKeypad2">
            <!-- ... Other buttons ... -->
            <button type="button" class="dot-button">.</button>
        </div>
    </div>

    <button type="button" id="restore">Restore</button>

    <button id="equals" type="button">=</button>
    <output id="result" for="operand1 operand2">0</output>
</main>
<script src="main.js" type="module" defer></script>
</body>
</html>

 
ration) {
        selectedOperation = operation;
    }

    function updateOutput() {
        const operand1Elt = document.querySelector("#operand1");
        const operand2Elt = document.querySelector("#operand2");

        let operand1Val = parseFloat(operand1Elt.value);
        let operand2Val = parseFloat(operand2Elt.value);

        switch (selectedOperation) {
            case "-":
                result.value = operand1Val - operand2Val;
                break;
            case "*":
                result.value = operand1Val * operand2Val;
                break;
            case "/":
                result.value = operand1Val / operand2Val;
                break;
            default:
                result.value = operand1Val + operand2Val;
        }
        return result.value;
    }

    function saveOperands() {
        const operand1Elt = document.querySelector("#operand1");
        const operand2Elt = document.querySelector("#operand2");

        const operand1Val = operand1Elt.value;
        const operand2Val = operand2Elt.value;

        localStorage.setItem("operand1", operand1Val);
        localStorage.setItem("operand2", operand2Val);
    }

    function restoreOperands() {
        const operand1Elt = document.querySelector("#operand1");
        const operand2Elt = document.querySelector("#operand2");

        const operand1Val = localStorage.getItem("operand1");
        const operand2Val = localStorage.getItem("operand2");

        if (operand1Val !== null && operand2Val !== null) {
            operand1Elt.value = operand1Val;
            operand2Elt.value = operand2Val;

            updateOutput();
        }
    }

    function appendNumber(number) {
        const inputElt = document.querySelector("#" + activeInput);
        if (number === "." && inputElt.value.includes(".")) return;
        if (number === "-" && inputElt.value.startsWith("-")) return;
        inputElt.value = (inputElt.value === "0" && number !== ".") ? number : inputElt.value + number;
    }

    function deleteLastCharacter() {
        const inputElt = document.querySelector("#" + activeInput);
        inputElt.value = inputElt.value.slice(0, -1) || "0";
    }

    function clearInput() {
        const inputElt = document.querySelector("#" + activeInput);
        inputElt.value = "0";
    }

    // Generate numeric keypad dynamically
    const numericKeypad = document.querySelector("#numericKeypad");
    for (let i = 1; i <= 9; i++) {
        const btn = document.createElement("button");
        btn.textContent = i.toString();
        btn.type = "button";
        btn.onclick = function() { appendNumber(i.toString()); };
        numericKeypad.appendChild(btn);
    }
});

mon "." ne marche pas

-
Edité par GENESIS_LORD 8 octobre 2023 à 18:39:34