bubblesort_visualizer/index.js at main · pojha1401/bubblesort_visualizer · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var elements = 0;
var inputs = [];
var temp;
var temp1;
$("#form1").on("submit", function (event) {
    event.preventDefault();
    var input_value = $(this).find("input").first().val();
    elements = input_value;
});
$("#form1").on("submit", function (event) {
    if (elements) {
        $("#form1").addClass("hide");
        $("#form2").removeClass("hide");
    }
});
function array1() {
    var arrayValues = $("#form2").find("input").first().val();
    inputs = arrayValues.split(",");
    return inputs;
}

$("#form2").on("submit", function (event) {
    event.preventDefault();
    array1();
    $(".centre").addClass("hide");
    for (var i = 0; i < elements; i++) {
        var newDiv = $("<div>").addClass("block block_text");
        var newH1 = $("<h1>").text(parseFloat(inputs[i]));
        newDiv.append(newH1);
        $(".array").append(newDiv); // Assuming you have an element with the ID "array"

    }
    bubbleSort(inputs);

});

async function bubbleSort(array) {
    for (var t = 0; t < elements; t++) {
        for (var j = 0; j < elements - t - 1; j++) {
            await $(".array").children(`div:nth-child(${j + 1})`).css("background-color", "blue").promise();
            await $(".array").children(`div:nth-child(${j + 2})`).css("background-color", "blue").promise();
            await sleep(500);
            if (inputs[j] > inputs[j + 1]) {
                await $(".array").children(`div:nth-child(${j + 1})`).css("background-color", "red").promise();
                await $(".array").children(`div:nth-child(${j + 2})`).css("background-color", "red").promise();
                await sleep(500);
                $(".array").children(`div:nth-child(${j + 2})`).animate({ "bottom": "100px" }, 1000);
                await sleep(500);
                $(".array").children(`div:nth-child(${j + 2})`).animate({ "right": "84px" }, 1000);
                await sleep(500);
                $(".array").children(`div:nth-child(${j + 1})`).animate({ "left": "81px" }, 1000);
                await sleep(500);
                $(".array").children(`div:nth-child(${j + 2})`).animate({ "top": "100px" }, 1000);
                await sleep(1000);
                $(".array").children(`div:nth-child(${j + 2})`).css("bottom", "");
                $(".array").children(`div:nth-child(${j + 2})`).css("right", "");
                $(".array").children(`div:nth-child(${j + 1})`).css("left", "");
                $(".array").children(`div:nth-child(${j + 2})`).css("top", "");
                var div1 = $(".array").children(`div:nth-child(${j + 1})`);
                var div2 = $(".array").children(`div:nth-child(${j + 2})`);

                var tdiv1 = div1.clone();
                var tdiv2 = div2.clone();


                div1.replaceWith(tdiv2);
                div2.replaceWith(tdiv1);


                var temp3 = inputs[j];
                inputs[j] = inputs[j + 1];
                inputs[j + 1] = temp3;

            }
            await $(".array").children(`div:nth-child(${j + 1})`).css("background-color", "green").promise();
            await $(".array").children(`div:nth-child(${j + 2})`).css("background-color", "green").promise();
        }
    }
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}