Sorting-Visualiser/index.html at master · GabrielAndreiPreda/Sorting-Visualiser · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
    <style>

    </style>
    <head>

    </head>
    <body style="height:100%; width:100%; display:flex;justify-content: center; align-items:center;flex-direction:column;">
		<canvas id="myCanvas" style="border: black solid;display:block;"></canvas>
		<div style="display: flex;">
			<div style="flex: 1;justify-content: center; align-items:center;">
				<div>
					<label>Number of elements</label>
					<input type="range" min="10" max="1000" value="50" id="arrLen">
					<label id="lenNr"></label>
				</div>
				<div>
					<label>Delay</label>
					<input type="range" min="1" max="2000" value="50" id="delay">
					<label id="delayNr">50 ms</label>
				</div>
			</div>
			<div style="display: flex; flex: 1;">
				<button id="reset" onclick="window.location.reload()">
					<p style="margin-top:0.7vh">Restart</p>
				</button>
				<script type="text/javascript" src="main.js"></script>
				<button onclick="bubbleSort()">
					<p style="margin-top:0.7vh">BubbleSort</p>
				</button>
				<button onclick="quickSort()">
					<p style="margin-top:0.7vh">QuickSort</p>
				</button>

				<button onclick="mergeSort()">
					<p style="margin-top:0.7vh">MergeSort</p>
				</button>
			</div>
			<button onclick="toggleMute()" style="margin-left: 5%; background-image: url(./Assets/Mute.svg);
			 background-position: center; background-size: contain ; width:10%" id="muteButton">

			</button>
		</div>
		<div id="array" style="margin: 5px;display: none;font-size: larger; font-family: 'Times New Roman', Times, serif">
			<!--Displays current array using JavaScript-->
		</div>

		<script defer type="text/javascript" src="main.js"></script>
	</body>
</html>