<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;
}
View Compiled
(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);
}());
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.