<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="bs-example">
      <h1>ascending and descending order-Javascript</h1>
      </div>
      <form id="form-result">
        <input type="text" class="form-control number-txt" id="new-Num" />
        <input type="submit" class="btn btn-primary" value="Add" id="add" />
        <div class="well" id="output"></div>
        <input type="button" class="btn btn-primary" value="Ascending" id="ascend" />
        <input type="button" class="btn btn-primary" value="Descending" id="desend" />
        </form>
    </div>
  </body>
<script src="script.js"></script>
</html>
(function(){
  'use-strict';
  var numbers = document.querySelector('#new-Num'),
      addBtn = document.querySelector('#add'),
      myForm = document.querySelector('#form-result'),
      outputNum = document.querySelector('#output'),
      ascend = document.querySelector('#ascend'),
      desend = document.querySelector('#desend');
      
      var model = [];
      
      myForm.onsubmit = function(evt){
        var val;
        
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
        
        val = numbers.value;
        
        if(isNaN(val)){
          alert('Pleae Enter Number')
        }else{
          model.push(Number(val));
          outputNum.innerHTML = model.join(', ');
        }
        numbers.value = '';
        numbers.focus();
      };
      
      ascend.onclick = function(){
        model.sort(function(a,b){return a-b});
        outputNum.innerHTML = model.join(', ');
      };
      
      desend.onclick = function(){
        model.sort(function(a,b){return a-b});
        model.reverse();
        outputNum.innerHTML = model.join(', ');
      };
}());
.number-txt
  {
    width:250px;
    float:left;
    margin-right:12px;
  }
.well
  {
    margin-top:15px;
  }