<!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;
}