Showing posts with label prime. Show all posts
Showing posts with label prime. Show all posts

Wednesday 2 July 2014

How to find prime numbers between two numbers with sliding effect?

<?php
$min = 0;
$max = 10;
if(isset($_POST) && isset($_POST["prime"])){
$min = (isset($_POST["min"])) ?$_POST["min"]:$min;
$max = (isset($_POST["max"])) ?$_POST["max"]:$max;
}
?>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type='text/css'>
  aside{
    font-size: 14px;
    font-family:Arial;
  }
  .main{
    margin: 0 auto;width:90%;
    
    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
    border:1px solid #000000;background-color:#0D020D;
    padding: 20px;
  }
  #prime_no{
    height: 200px;
    overflow-y: scroll;
  }
  .main1{
    margin: 0 auto;width:90%;
    height:150px;
    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
    border:1px solid #000000;background-color:#0D020D;
    padding: 20px;
  }
  .oran{
    border:0; color:#f6931f; font-weight:bold;
  }
  .white{
    border:0; color:#FFFFFF; font-weight:bold;
  }
  .mgroup{
    /*border:1px solid red;*/
    margin:0 auto;
    width:50%;
    padding:10px;
  }
  .mgroup label{
    border:0; color:#FFFFFF; font-weight:bold;
  }

  .css_button {
    margin : 0px 0px 0px 150px;
    
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #3866A3;
    padding: 9px 18px;
    text-shadow:1px 1px 0px #5E5E5E;
    -moz-box-shadow:inset 1px 1px 0px 0px #BEE2F9;
    -webkit-box-shadow:inset 1px 1px 0px 0px #BEE2F9;
    box-shadow:inset 1px 1px 0px 0px #BEE2F9;
    font-weight:normal;
    text-decoration:none;
    cursor: pointer;
    background:-webkit-linear-gradient(90deg, #468ccf 5%, #63b8ee 100%);
    background:-moz-linear-gradient(90deg, #468ccf 5%, #63b8ee 100%);
    background:-ms-linear-gradient(90deg, #468ccf 5%, #63b8ee 100%);
    background:linear-gradient(180deg, #63b8ee 5%, #468ccf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
    /*background-color:#468ccf;*/
    color:#FFFFFF;
    display:inline-block;
  }
  .css_button:hover {
    background:-webkit-linear-gradient(90deg, #63b8ee 5%, #468ccf 100%);
    background:-moz-linear-gradient(90deg, #63b8ee 5%, #468ccf 100%);
    background:-ms-linear-gradient(90deg, #63b8ee 5%, #468ccf 100%);
    background:linear-gradient(180deg, #468ccf 5%, #63b8ee 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
    /*background-color:#63b8ee;*/
  }
  .css_button:active {
    position:relative;
    top:1px;
  }

  .textbox { 
    background: white;
    font-weight:bold;
    border: 1px solid #ffa853; 
    border-radius: 3px; 
    box-shadow: 0 0 3px 1px #ffa853; 
    color: #666; 
    outline: none; 
    height:23px; 
    width: 100px; 
  } 
</style>
<aside>
  <center><h3>Prime Number</h3></center>
<div class='main'>
  <div id="range" class="oran"></div><br>
  <div id="slider-range"></div><br>
  <div id="prime_no" class="white"></div><br>
</div>
<br>
<div class='main1'>
  <form action="" method="post" onsubmit="return ck_min();">
    <div class="mgroup">
            <label for="name">Minimum Value</label>
    <input type='text' placeholder="Min Value" maxlength='5' class="textbox" name='min' id='min'  onkeyup = "if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">    
        </div>
    <div class="mgroup">
            <label for="name">Minimum Value</label>
    <input type='text' placeholder="Max Value" maxlength='5' class="textbox" name='max' id='max'  onkeyup = "if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
        </div>
    <div class="mgroup">
            <input type='submit' class="css_button" value='Enter' name='prime'>
        </div>
  </form>
</div>
  <script type='text/javascript'>
  var minval = <?php echo $min; ?>;
  var maxval = <?php echo $max; ?>;
  $(function() {
    isPrime(minval,maxval);   
    $( "#slider-range" ).slider({
    range: true,
    min: minval,
    max: maxval,
    values: [ minval, maxval ],
    slide: function( event, ui ) {
      $( "#range" ).html( "Min No : " + ui.values[ 0 ] + " - Max No : " + ui.values[ 1 ] );
      isPrime(ui.values[ 0 ],ui.values[ 1 ]);
    }
    });
    $( "#range" ).html( "Max No : " + $( "#slider-range" ).slider( "values", 0 ) + " - Min No : " + $( "#slider-range" ).slider( "values", 1 ) );
  });
  
  function ck_min(){
    var mi = $("#min").val();
    var mx = $("#max").val();
    mi = parseInt(mi);
    mx = parseInt(mx);
    if (mi && mx) {
    
    if (mi > mx) {
     alert("Min val should be less than Max val and Max Val should be greater than Min Val");
     return false;
    }else{
     return true;
    }
    }else{
    return false;
    }
    
  }
  function isPrime(a,b) {
    var temp = new Array();   
    var x=0
      for(i=a; i<=b; i++){
    if(isPrimeno(i)){
      temp[x]=i;
      x++;
    }
    }
    var str = "Prime No : ";
    for(y=0;y<temp.length;y++){
    str += temp[y];
    if (temp.length-1>y) {
      str += " , ";
    }
    
    }
    $("#prime_no").html(str);
    
  }
  
  function isPrimeno(numb){
    for(var i=2; i<= Math.sqrt(numb); i++){
    if(numb%i ==0){
      return false;
    }
    }
    return true;
  }
  
  </script>
</aside>