JSFiddle - React, Tailwind, and code Playground

by Deandra Carroll

HTML

<h1>Graduate Assignment <br> Number Sort</h1>

<p>Showcasing what I have learned thusfar in this course, I wanted to create an example that is simple yet effective in proving my understanding of the lesson points below.</p>

<ol>
  <li>Basic data types, variables and mathematical operations</li>
  <li>Basic Conditionals</li>
  <li>Loops and Arrays</li>
  <li>Functions and Scope</li>
  <li>Input and Input Validation</li>
  <li>Comparison and Logical Operators</li>

</ol>

<h2>Follow the instructions below to get the result!</h2>

<p>Please enter a number into each input field - All numbers must be random in order for this lesson to work.<br><br>Once your random numbers are entered, click the 'sort' button to put the numbers in the create order from lowest to highest value.</p>

<div>
<label>Enter a random number</label><input id ="firstNum" type="text">
<label>Enter a random number</label><input id ="secondNum" type="text">
<label>Enter a random number</label><input id ="thirdNum" type="text">
<label>Enter a random number</label><input id ="fourthNum" type="text">
<label>Enter a random number</label><input id ="fifthNum" type="text">
</div>

<input id="btnSort" type="button" value="Sort">

<p>The correct order is: <span id="result"></span></p>

CSS

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}

input {
  display: inline-block;
  float: left;
}

h1,h2 {
   text-align: center;
   color: green;
}

JavaScript

//Here we get the HTML for the button
var sortBtn = document.getElementById("btnSort");

//Here we set the event handler for when the button is clicked
sortBtn.onclick = function() {

    var inputFieldOne = document.getElementById("firstNum");
    var inputFieldTwo = document.getElementById("secondNum");
    var inputFieldThree = document.getElementById("thirdNum");
    var inputFieldFour = document.getElementById("fourthNum");
    var inputFieldFive = document.getElementById("fifthNum");

    var numArray = new Array();
    //Here we are checking whether the number entered is integer or not
    if (!isNaN(inputFieldOne.value)) {
        numArray[0] = parseInt(inputFieldOne.value);
    } else {
        alert("Please enter valid integer");
        return;
    }
    if (!isNaN(inputFieldTwo.value)) {
        numArray[1] = parseInt(inputFieldTwo.value);
    } else {
        alert("Please enter valid integer");
        return;
    }
    if (!isNaN(inputFieldThree.value)) {
        numArray[2] = parseInt(inputFieldThree.value);
    } else {
        alert("Please enter valid integer");
        return;
    }
    if (!isNaN(inputFieldFour.value)) {
        numArray[3] = parseInt(inputFieldFour.value);
    } else {
        alert("Please enter valid integer");
        return;
    }
    if (!isNaN(inputFieldFive.value)) {
        numArray[4] = parseInt(inputFieldFive.value);
    } else {
        alert("Please enter valid integer");
        return;
    }
    //This outerLoop will run the inner loop four times
    for (var outerLoop = 0; outerLoop < 4; outerLoop++)
        //Then we create the inner loop 
        for (var i = 0; i < 4; i++) {
            //Compare element i with element i+1, if i is greater than i+1 then swap the numbers
            if (numArray[i] > numArray[i + 1]) {
                var temp = numArray[i];
                numArray[i] = numArray[i + 1];
                numArray[i + 1] = temp;
            }
        }
    alert(numArray);
};