progressBar.jsx

import { useState } from "react";
import "./styles.css";

/* Visit www.reactchallenges.live */

/* Instructions: 
   Create a Progress Bar that should fill based on the input percentage value
*/

const ProgressBar = ({ width }) => {
  return (
    <div
      style={{
        width: "500px",
        height: "20px",
        border: "1px black",
        backgroundColor: "#333",
        display: "block",
      }}
    >
      <div
        style={{
          width: `${width}%`,
          height: "20px",
          backgroundColor: "#a60",
          display: "flex",
        }}
      />
    </div>
  );
};

export default function App() {
  const [val, setValue] = useState(0);
  const setValuer = (e) => {
    const { value } = e.target;
    console.log(typeof value);
    if (0 <= value && value <= 100) setValue(value);
    else e.target.value = val;
  };

  return (
    <>
      <div className="App">
        <h1>Progress bar</h1>
        {<ProgressBar width={val} />}
        {val}
        <form>
          <label htmlFor="html"> Input Percentage:</label>
          <input type="number" onChange={setValuer} />
        </form>
      </div>
    </>
  );
}