[aptitude]

Ciekawe to <output> https://denodell.com/blog/html-best-kept-secret-output-tag

<input id="a" type="number"> +
<input id="b" type="number"> =
<output for="a b"></output>

export function ShippingCalculator() {
  const [weight, setWeight] = useState("");
  const [price, setPrice] = useState("");

  useEffect(() => {
    if (weight) {
      // Fetch shipping price from server based on package weight
      fetch(`/api/shipping?weight=${weight}`)
        .then((res) => res.json())
        .then((data) => setPrice(data.price));
    }
  }, [weight]);

  return (
    <form>
      <label>
        Package weight (kg):
        <input
          type="number"
          name="weight"
          value={weight}
          onChange={(e) => setWeight(e.target.value)}
        />
      </label>

      <output name="price" htmlFor="weight">
        {price ? `Estimated shipping: $${price}` : "Calculating..."}
      </output>
    </form>
  );
}

#programowanie #webdev