<main>
  <h1>Calculate the Nth prime</h1>
  <form>
    <label>What's your N? <input type="number" min="1" max="30000"></label>
    <p><button>Calculate</button></p>
  </form>  
  
  <p id="output"></p>
  
</main>
function findPrime(N)
{
  const topNumber = N*20;
  let candidates = [];
  for(let i = 2; i <= topNumber; i++)
  {
    candidates.push(i);
  }
    
  let currentN = 2;
  let currenti = 0;
  while(currenti < N && currentN != candidates[candidates.length-1])
  {
    let primes = candidates.slice(0,currenti+1);
    candidates = primes.concat(candidates.slice(currenti+1).filter(v => v%currentN != 0));
    currenti = candidates.indexOf(currentN)+1;
    currentN = candidates[currenti];
  }
  
  return candidates[N-1];
}

const btn = document.querySelector('button');

btn.addEventListener('click', function(e)
{
  e.preventDefault();
  const inp = document.forms[0].elements[0];
  const oup = document.getElementById('output');
  let N = parseInt(inp.value, 10);
  let prime = findPrime(N);
  let rem = N % 10;
  let rem2 = N % 100;
  let ord = (rem > 3 || rem < 1) || (rem2 > 10 && rem2 < 20) ? 'th' : (rem == 1 ? 'st' : (rem == 2 ? 'nd' : 'rd'));
  oup.innerHTML = `The ${N}${ord} prime is: ${prime}`;
  return false;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.