DEV Community

Cover image for Day 35: Adding Machine
Matt Ryan
Matt Ryan

Posted on

3 2

Day 35: Adding Machine

This very basic app allows the user to add any two integers including negative values.

function App() {
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);
  const [total, setTotal] = useState(input1 + input2);

  function calculateTotal() {
    setTotal(input1 + input2);
  }

  return (
    <div className="App">
      <h1>Adding Machine</h1>
      <p>This very basic app allows you to add any two integers including negative values.</p>
      <div className="number-inputs">
        <input
          type="number"
          value={input1}
          onChange={e => setInput1(+e.target.value)}
          placeholder="0"
        />
        <input
          type="number"
          value={input2}
          onChange={e => setInput2(+e.target.value)}
          placeholder="0"
        />
      </div>

      <button onClick={calculateTotal}>Compute</button>

      <h2>{total}</h2>

    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay