JSFiddle - React, Tailwind, and code Playground

by Lloyd Atkinson

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Sorting Visualiser</title>
	<script src="https://npmcdn.com/vue/dist/vue.js"></script>
	<script defer type="text/javascript" src="app.js"></script>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="app">
		<div id="headerBar">
			<div id="pageTitle">Sorting Visualiser</div>
			<div id="controls">
				<div id="Dropdown"></div>
				<button id="scramble" @click="scramble">Scramble</button>
				<button id="startSorting" @click="bubbleSort">Start Sorting</button>
			</div>
		</div>
		<div id="mainBody" :key="counter">
			<div class="valueBlockPair" v-for="(value,index) in values">
				<div class="block" :style="{'height':  values[index] +'%'}"></div>
				<div class="value">{{ value }}</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

body{
	margin:0px auto;
	width: 100%;
	font-family:'H', 'Trebuchet MS', Helvetica;
	background-color: #f2f2f2;
	color:#cfcfcf;
}
#headerBar{
	width:100%;
	height:100px;
	background-color: #4a4a4a;
}
#pageTitle{
	font-size:50px;
	margin:0;
	padding:20px;
	float:left;
}
#controls{
	float:right;
}

#mainBody{
	height:80%;
	width:100%;
	margin:50px;
	padding:50px;
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items:flex-end;
}

.valueBlockPair{
	height:500px;
	width:20px;
	margin:5px;
	text-align:center;
	display:flex;
	flex-direction: column;
	justify-content: flex-end;
}

.block{
	height:100%;
	width:20px;
	margin:2px;
	background-color: #c70d00;
}

.value{
	text-align:center;
	width:20px;
	margin:2px;
}

JavaScript

new Vue({
	el: "#app",
	data: {
		sortingMode: 'BubbleSort',
		arraySize: 50,
		sortSpeed: 3000,
		values: [],
		counter: 0
	},
	methods: {
		scramble: function(){
			for(let i=0;i<this.arraySize;i++){
				this.values[i] = Math.ceil(Math.random() * 100);
			}
			this.reRender();
			console.log(this.values)
		},
		reRender: function(){
			this.counter++;
		},
		bubbleSort: function() {
    	 function bubbleExchange(j){
        	if (this.values[j] > this.values[j + 1]) {
               			let tmp = this.values[j];
               			this.values[j] = this.values[j + 1];
               			this.values[j + 1] = tmp
                		this.reRender();
               }
        }
    
			for(let i = 0; i < this.arraySize; i++){
       			for (let j = 0; j < this.arraySize; j++) {
           			setTimeout(bubbleExchange(j),this.sortSpeed);
            	}
            }
        },
    },
	
	created() {
		this.scramble();
	}

});