Navi Frontend interview Question 1

index.html

<button onclick="add()">Add Progrss Bar</button>
<div id="root"></div>

navi-frontend-interview-question-1.markdown

Navi Frontend interview Question 1

A Pen by Shivaji on CodePen.

License.

script.typescript

const root = document.getElementById("root");

const addProgressBar = (time = 3) => {
  const progress = document.createElement("div");
  const progressBar = document.createElement("div");
  progress.classList.add("progress");
  progressBar.classList.add("progress-bar");
  const transition = `transition: width ${time}s ease`;
  progressBar.style = transition;

  progress.appendChild(progressBar);
  root.appendChild(progress);

  setTimeout(() => {
    progressBar.classList.add("w-100");
  }, 50);

  progressBar.addEventListener("transitionend", () => {
    count--;
    if (count > 0) {
      addProgressBar();
    }
  });
  progressBar.removeEventListener("transitionend", () => {});
};

var count = 0;

const add = () => {
  if (count === 0) {
    addProgressBar();
  }
  count++;
};

style.scss

.progress {
  margin: 1rem 0;
  display: flex;
  height: 1rem;
  background: #e9ecef;
}

.progress-bar {
  background: blue;
  width: 0;
}

.w-100 {
  width: 100%;
}

Navi interview question: queueable progress bars