JSFiddle - React, Tailwind, and code Playground

by juliia13

HTML

<div>
<label >   Enter the positive integer number in the range of 1 to 170   <input type="text" id="number" maxlength='3'>          </label>

<button  id="btn">Calculate factorial</button>
<br>
</div>

CSS

button {
   background-color:  #808080;
   
   
 }

.err{
  color:red;
  background-color:#C0C0C0;
}

p {
  background-color:#C0C0C0;
}

JavaScript

/*var inp = 5;

var res = 1;

for (var i =1; i<=inp; i++){
    res = res*i;
}

console.log(res);

*/


$(document).ready(function(){
    $('#btn').click(function(){
      var res = 1;
      var  inp = + $('#number').val();
      
        if(typeof inp === 'number'  && isNaN(inp)==false && inp>0 && inp%1 == 0){
        
         for (var i =1; i<=inp; i++){
          res = res*i;
          }
          if (isFinite(res)==true){
           $('div').append('<p> The result for ' + inp + '! is   ' + res + '</p>');
          } else {
              $('div').append('<p>For accurate results enter a number in the range of 1 to 170. The result for ' + inp + '! is   ' + res + '</p>');
          }
        
      
        } else {
         $('div').append('<p class="err">Enter the positive integer number to get result </p>')
        }
     
      
       
    })
})