时间戳

首页 > 解决方案 > 卡在 FreeCodeCamp 的 JS 计算器上

javascript - 卡在 FreeCodeCamp 的 JS 计算器上

问题描述

我被困在 FCC 的 JS 计算器项目的两个测试中。这是 FCC 的链接：https ://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator

这是我的 Codepen：https ://codepen.io/tanjimanim/pen/jOwoYrV

我无法通过以下两项测试：

  1. 单击小数元素时，会出现一个“.”。应该附加到当前显示的值；二 ”。” 在一个数字不应该被接受。
  2. 如果连续输入 2 个或多个运算符，则执行的操作应为最后输入的运算符（不包括负号（-）。

这是我的组件

function App() {
  const [calc, setCalc] = React.useState("");
  const [result, setResult] = React.useState("");
  const ops = ["/", "*", "+", "-", "."];

  const updateCalc = (value) => {
    if(calc==="" && value==='0'){
      return;
    }
      
    setCalc(calc + value);

    if (!ops.includes(value)) {
      setResult(eval(calc + value).toString());
    }
  };
  const calculate = () => {
    setCalc(eval(calc).toString());
  };
  const deleteLast = () => {
    if (calc === "") {
      return;
    }

    const value = calc.slice(0, -1);
    setCalc(value);
  };

  const clearAll = () => {
    setCalc("");
    setResult("");
  };

  return (
    <div className="App">
      <div className="calculator">
        <div className="display" id="display">
          {calc || "0"}
        </div>
        <div className="operators">
          <button
            id="add"
            onClick={() => {
              updateCalc("+");
            }}
          >
            +
          </button>
          <button
            id="subtract"
            onClick={() => {
              updateCalc("-");
            }}
          >
            -
          </button>
          <button
            id="multiply"
            onClick={() => {
              updateCalc("*");
            }}
          >
            *
          </button>
          <button
            id="divide"
            onClick={() => {
              updateCalc("/");
            }}
          >
            /
          </button>
          <button id="del" onClick={deleteLast}>
            DEL
          </button>
          <button id="clear" onClick={clearAll}>
            AC
          </button>
        </div>
        <div className="digits">
          <button
            id="one"
            onClick={() => {
              updateCalc("1");
            }}
          >
            1
          </button>
          <button
            id="two"
            onClick={() => {
              updateCalc("2");
            }}
          >
            2
          </button>
          <button
            id="three"
            onClick={() => {
              updateCalc("3");
            }}
          >
            3
          </button>
          <button
            id="four"
            onClick={() => {
              updateCalc("4");
            }}
          >
            4
          </button>
          <button
            id="five"
            onClick={() => {
              updateCalc("5");
            }}
          >
            5
          </button>
          <button
            id="six"
            onClick={() => {
              updateCalc("6");
            }}
          >
            6
          </button>
          <button
            id="seven"
            onClick={() => {
              updateCalc("7");
            }}
          >
            7
          </button>
          <button
            id="eight"
            onClick={() => {
              updateCalc("8");
            }}
          >
            8
          </button>
          <button
            id="nine"
            onClick={() => {
              updateCalc("9");
            }}
          >
            9
          </button>
          <button
            id="zero"
            onClick={() => {
              updateCalc("0");
            }}
          >
            0
          </button>
          <button id="equals" onClick={calculate}>
            =
          </button>
          <button
            id="decimal"
            onClick={() => {
              updateCalc(".");
            }}
          >
            .
          </button>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

任何形式的建议将不胜感激！

标签： javascriptreactjs

解决方案

在朋友的帮助下，这里是更新的 codepen：https ://codepen.io/tanjimanim/pen/jOwoYrV?editors=0110

它不是很漂亮，但它是可行的并且通过了所有测试。

//零件

function App() {
  const [calc, setCalc] = React.useState("");

  const ops = ["/", "*", "+", "-", "."];

  const updateCalc = (value) => {
    const operatorPattern = /[+\-*/]/;
    if (calc === "" && value === "0") {
      return;
    }
    if (value === ".") {
      const parts = calc.split(operatorPattern);
      if (parts[parts.length - 1].includes(".")) {
        return;
      }
    }
    if (value !== "-" && operatorPattern.test(value)) {
      const lastChar = calc[calc.length - 1] || "";
      const secondLastChar = calc[calc.length - 2] || "";
      if (operatorPattern.test(lastChar)) {
        if (lastChar === "-" && operatorPattern.test(secondLastChar)) {
          setCalc(calc.slice(0, -2) + value);
          return;
        }
        setCalc(calc.slice(0, -1) + value);
        return;
      }
    }

    setCalc(calc + value);
  };
  const calculate = () => {
    setCalc(eval(calc).toString());
  };
  const deleteLast = () => {
    if (calc === "") {
      return;
    }

    const value = calc.slice(0, -1);
    setCalc(value);
  };

  const clearAll = () => {
    setCalc("");
  };

  return (
    <div className="App">
      <div className="calculator">
        <div className="display" id="display">
          {calc || "0"}
        </div>
        <div className="operators">
          <button
            id="add"
            onClick={() => {
              updateCalc("+");
            }}
          >
            +
          </button>
          <button
            id="subtract"
            onClick={() => {
              updateCalc("-");
            }}
          >
            -
          </button>
          <button
            id="multiply"
            onClick={() => {
              updateCalc("*");
            }}
          >
            *
          </button>
          <button
            id="divide"
            onClick={() => {
              updateCalc("/");
            }}
          >
            /
          </button>
          <button id="del" onClick={deleteLast}>
            DEL
          </button>
          <button id="clear" onClick={clearAll}>
            AC
          </button>
        </div>
        <div className="digits">
          <button
            id="one"
            onClick={() => {
              updateCalc("1");
            }}
          >
            1
          </button>
          <button
            id="two"
            onClick={() => {
              updateCalc("2");
            }}
          >
            2
          </button>
          <button
            id="three"
            onClick={() => {
              updateCalc("3");
            }}
          >
            3
          </button>
          <button
            id="four"
            onClick={() => {
              updateCalc("4");
            }}
          >
            4
          </button>
          <button
            id="five"
            onClick={() => {
              updateCalc("5");
            }}
          >
            5
          </button>
          <button
            id="six"
            onClick={() => {
              updateCalc("6");
            }}
          >
            6
          </button>
          <button
            id="seven"
            onClick={() => {
              updateCalc("7");
            }}
          >
            7
          </button>
          <button
            id="eight"
            onClick={() => {
              updateCalc("8");
            }}
          >
            8
          </button>
          <button
            id="nine"
            onClick={() => {
              updateCalc("9");
            }}
          >
            9
          </button>
          <button
            id="zero"
            onClick={() => {
              updateCalc("0");
            }}
          >
            0
          </button>
          <button id="equals" onClick={calculate}>
            =
          </button>
          <button
            id="decimal"
            onClick={() => {
              updateCalc(".");
            }}
          >
            .
          </button>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

推荐阅读