<h1>Finding Primes</h1>

<p class="progress">Progress 0%</p>

​

<button class="stuck">Calculate (Stuck)</button>

<button class="responsive">Calculate (Responsive)</button>

body {

  margin: 20px auto;

  font-family: "Lato";

  font-weight: 300;

  text-align: center;

}

​

h1 {

  text-transform: uppercase;

  font-size: 4rem;

  width: fit-content;

  margin: 4rem auto 0 auto;

  padding: 1rem 2rem;

  transition: 0.4s all;

}

​

p.progress {

  margin-bottom: 4rem;

  font-size: 2rem;

  color: green;

  font-weight: bold;

}

​

button {

  background: black;

  color: white;

  padding: 1rem 2rem;

  font-size: 2rem;

  margin: 0.5rem auto;

  border: none;

  font-family: "Lato";

  cursor: pointer;

  transition: 0.4s all;

  font-weight: bold;

}

​

button:hover {

  background: yellowgreen;

  color: black;

}

​

window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 600000;

​

const stuckButton = document.querySelector(".stuck");

const responsiveButton = document.querySelector(".responsive");

​

const heading = document.querySelector("h1");

const progress = document.querySelector("p.progress");

​

function isPrime(num) {

  if (num <= 1) {

    return false;

  }

​

  for (let i = 2; i <= Math.sqrt(num); i++) {

    if (num % i === 0) {

      return false;

    }

  }

​

  return true;

}

​

function listPrimesInRange(start, end) {

  const primes = [];

​

  for (let num = start; num <= end; num++) {

    if (isPrime(num)) {

      primes.push(num);

    }

  }

​

  return primes;

}

​

function listPrimesInRangeResponsively(start) {

  let next = start + 100000;

​

  if (next > end) {

    next = end;

  }

​

  for (let num = start; num <= next; num++) {

    if (isPrime(num)) {

      primeNumbers.push(num);

    }

​

    if (num == next) {

      percentage = ((num - begin) * 100) / (end - begin);

      percentage = Math.floor(percentage);

​

      progress.innerText = `Progress ${percentage}%`;

​

      if (num != end) {

        setTimeout(() => {

          listPrimesInRangeResponsively(next + 1);

        });

      }

    }

​

    if (num == end) {

      percentage = ((num - begin) * 100) / (end - begin);

      percentage = Math.floor(percentage);

​

      progress.innerText = `Progress ${percentage}%`;

​

      heading.innerText = `${primeNumbers.length - 1} Primes Found!`;

​

      return primeNumbers;

    }

  }

}

​

const begin = 1907;

const end = 6036925;

let percentage = 0;

​

let primeNumbersStuck = [];

let primeNumbers = [];

​

stuckButton.addEventListener("click", () => {

  heading.innerText = `Finding Primes`;

  primeNumbersStuck = listPrimesInRange(begin, end);

  heading.innerText = `${primeNumbersStuck.length - 1} Primes Found!`;

});

​

responsiveButton.addEventListener("click", () => {

  primeNumbers = [];

  heading.innerText = `Finding Primes`;

  listPrimesInRangeResponsively(begin);

});

​