Fun with Javascript / jQuery

Main Page

Assignment Description

For homework two the bulk of the assignment was to create a webpage with Javascript and jQuery that can calculate something. After some consideration, I decided to build an animated bubble sort. This sort would take in a given list of tables and output the sorted list through jQuery as one option. As a 2nd option, it would animate the sort and really dive in and show how a bubble sort works.

Link to: Homework Two

Setting up the Page.

Since this homework required only a single page app. I first setup the page in an wireframe design editor, this is a Link to design. Next, I went ahead and set up the basic HTML tags to start a website, linked to both the jQuery library as well as importing the Javascript CDN. Then, I quickly put together the HTML and CSS to creat the website that looked like my wireframe mockup. The code below is the body section of my application. This is the bulk of the HTML needed for this project.


<body>

<!-- Body section of Document-->

	<div class="myDiv">

		<center><h1>Bubble Sort</h1></center><br>

				<h3>How many inputs would you like? Keep in mind larger lists take more time to sort.</h3>



				<h4>Once you decide your input size, enter it below.  Press enter first, then use the sort button to animate it. The Output table button to output your data raw.<br><br>



		<div id="init">

		<button id="button1">Enter</button>

		<input id="iCount"></input><br><br>

		</div>

		<form id="regForm">

		<!-- THIS WHERE INPUTS GO -->		  

		</form>

		<div id="sortButtonBox" style="padding: 0px 0px 30px 0px;"> 

			<button id="bSort" onClick="bubbleSort()">Sort</button>

			<button id="bAniTest" onClick="tableMaker()">Output Table Below</button>

		 </div>

		 <div id="tableContainer" style="margin:auto"></div>

		</center>

	</div>

Javascript Method for inputs

This method was built to take an input, then, for instance a user enters 10, my webpage would then have 10 random number input fields created. Because of the second part of the method, it populates them automatically using jQuery to find values and append them to increasing input numbers. If desired the user can change the numbers.

  			//ADD INPUTS TO PAGE
  			$('#button1').click(function(){
  				totalCount = $('#iCount').val();
  				console.dir(totalCount);
  				for(var i = 0;i < totalCount;i++){
  					$('#regForm').append(addInput(i));
  				}
  				$('#init').hide();
  				//RANDOM VALUE INPUTS
  				for(var i = 0;i< totalCount;i++){
  					$('#input' + i).val(Math.floor((Math.random() * 5000) + 1));
  					arrInputs.push( parseInt( $("#input" + i).val() ) );
  					arrInputs2.push( parseInt( $("#input" + i).val() ) );
  				}
  			});

Bubble Sort and Animate

The sort method below uses two loops to implement a basic (and slow) bubblesort. I also animated it to show on larger lists just how slow a sort like this can be. It does have a great visualization of how the data moves and compares while the loops are running. Again this method mixes Javascript and jQuery to accomplish the task.

			function bubbleSort() { 
				aniList = [];
				console.dir("Sort Begins: "); 
			    var length = arrInputs.length;
			    console.dir("Length: " + length);
			    for (var i = (length - 1); i >= 0; i--) {
			        //Number of passes
			        for (var j = (length - i); j > 0; j--) {
			            //Compare the adjacent positions
			            console.dir($("#input" + j).val() + " < " + $("#input" + (j - 1)).val());
			            if (arrInputs[j] < arrInputs[j-1]) {
			                //Swap the numbers
			                var tmp = arrInputs[j];
			                arrInputs[j] = arrInputs[j - 1];
			                arrInputs[j - 1] = tmp;
			                console.dir("Swap");
			                //RUN ANIMATION
			                aniList.push("#input" + (j-1));
			                aniList.push("#input"+j);
			            }
			        }
			    }
			    console.dir(arrInputs2);
			    console.dir(arrInputs);
			    console.dir(aniList);
			    aniPoint = -2;
			    animateInput();
			}

Output Function

The function below is a simple table making function that completes part of the homework assignment as per the rubric. Simply, instead of animating the sort, you have the option to just sort quickly, and export the results to a table.

  			//Creates a table and exports it below the sort.
  			function tableMaker(){
  				tableString = "";
  				inputCounter = $('input').length - 1;
  				console.dir(inputCounter);
  				for(i = 0; i < inputCounter; i++){
  					tableString += "";
  				}
  				tableString += "VALUES
#" + i + " " + $("#input"+i).val() + "";
  				$('#tableContainer').append(tableString);
  			}

Conclusion

After spending a few days troubleshooting my animation methods I was able to get it to work. It was quite challenging, yet very rewarding to spend time learning jQuery for me. I look forward to using it more in the future. The link after this is to my git pages hosted Homework 2 if you would like to take a peak at the finished product.

Link To:Link to Homework Two

Link To:Homework Two Repository

VALUES
#" + i + "	" + $("#input"+i).val() + "