Блог

Я работаю над индикатором прогресса в react, и я хочу показать, сколько очков опыта все еще нужно, чтобы подняться на уровень. Например, уровень 1 должен иметь баллы от 0 до 100, уровень 2 должен иметь баллы от 100 до 200.

Моя цель состоит в том, чтобы показать индикатор выполнения, масштабированный до ста, и на индикаторе выполнения показать % от того, сколько нужно для достижения 100, перехода на второй уровень и так далее до 10-го уровня.

 const experienceLevel = () => {
    console.log("DAMMMMSNN");
    console.log(userData.experience);
    // Level one - > to level two
    if (userData.experience >= 0 amp;amp; userData.experience < 100) {
      return (
        <>
          <p className="experience__show--level"> Level 1: Novice </p>
          <small className="experience__show--level--coming">
            <i>You need {99 - userData.experience} points to reach level two</i>
          </small>
          <progress
            className="experience__progression-bar__bar"
            **value={userData.experience} // my issue in this place**
            max="99"
          ></progress>
        </>
      );
      // Level two - > to level three
    } else if (userData.experience >= 100 amp;amp; userData.experience < 200) {
      return (
        <>
          <p>Level 2: Monk</p>
          <small className="experience__show--level--coming">
            <i>
              You need {199 - userData.experience} points to reach level three
            </i>
          </small>
          <progress
            className="experience__progression-bar__bar"
            value={199 - userData.experience}
            max="100"
          ></progress>
        </>
      );
 

Значение в индикаторе выполнения должно показывать, какой прогресс достигнут для достижения другого уровня, хотя, например, уровень 2 100-200, и у пользователя должно быть очков опыта от 100 до 200, но в индикаторе выполнения я хочу масштабировать его до 100 и представить его.
Пример, если у человека 180 очков опыта, и он находится на уровне 2, ему все равно нужно 20 очков (которые я хочу представить в индикаторе выполнения).

Хорошо, это простое решение. Сначала вы должны разделить это число на 100. Тогда дивидендом будет ваш уровень, а напоминанием будет число, на сколько он/она близок к следующему уровню.