<body>

  <h4>Is this number a prime?</h4>

  <input name="primeInput" id="primeInput" type="text">

  <output id="prevCom"></output>

</body>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h4 {
  font-weight: 400;
  font-size: 1.4em;
}

input {
  height: 44px;
  padding-left: 15px;
  padding-right: 15px;
  border: 5px solid #ccc;
  font-size: 14px;
  box-shadow: 0 2px 2px 0 rgba(46, 60, 73, .05);
  border-radius: 2px;
  color: #2e3d49;
  outline: none;
  &:focus {
    border-color: #02b3e4;
  }
}

output {
  margin-top: 15px;
}
        
          (function () {
  'use strict';
  var primeInput = document.getElementById('primeInput');
      
  
  function isPrime (num) {
    var i;

    if (num === 1) {
      return false;
    } else if (num === 2) {
      return true;
    } else {
      for (i = 2; i <= (Math.sqrt(num)); i++) {
        if ((num % i) === 0) {
          return false;
        }
      }
      return true;
    }
  }
  
  function updateValue () {
    
    var num = Number(this.value);
    if (isNaN(num) || num <= 0) {
      document.getElementById('prevCom').innerHTML ="Make sure you're entering a number greater than 0."
    } else if (isPrime(num)) {
      document.getElementById('prevCom').innerHTML = num + " <b>is</b> a prime number!";
    } else {
      document.getElementById('prevCom').innerHTML = num + " is <b>not</b> a prime number";
    }
  }

  primeInput.onkeyup = updateValue.bind(primeInput);

}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.