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() {
            for (let i = 0; i < this.arraySize; i++) {
                for (let j = 0; j < this.arraySize; j++) {
                    setTimeout(this.bubbleExchange(j), 100000);
                }
            }
        },

        bubbleExchange: function(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();
            }
        }
    },

    created() {
        this.scramble();
    }
});