index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Algorithm visualizer - by Mahim</title>
        <link
            rel="shortcut icon"
            href="./assets/img/bar-chart-2.png"
            type="image/x-icon"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <link rel="stylesheet" href="css/style.css" />
        <!-- Particles.js CDN -->
        <script src="js/lib/particles.min.js"></script>
    </head>
    <body>
        <!-- Add a div for the particles.js background -->
        <div
            id="particles-js"
            style="position: absolute; width: 100vw; height: 100vh; z-index: -1"
        ></div>
        <header class="header">
            <div
                style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                "
            >
                <div class="logo" style="margin-right: 2rem">
                    <img
                        width="50"
                        height="50"
                        src="./assets/img/bar-chart-2.png"
                        alt=""
                        srcset=""
                    />
                </div>
                <div id="inputButton">
                    <div>
                        <input
                            style="width: 600px"
                            type="text"
                            id="dataset-size"
                            class="ipt"
                            placeholder="Enter Array value comma separated  (min 5 and value must within 5-500)"
                            onblur="handleDatasetSizeChange()"
                        />
                        <input
                            type="number"
                            id="search-number"
                            class="ipt"
                            placeholder="Enter number for search"
                            onblur="handleSearchNumberChange()"
                        />
                    </div>
                    <button
                        id="generate-array"
                        class="btn"
                        onclick="generateArray()"
                    >
                        Generate Array
                    </button>
                </div>
            </div>
            <div>
                <div class="dropdown">
                    <button class="btn">Algorithms</button>
                    <div class="dropdown-content">
                        <button
                            id="linear-search"
                            class="btn"
                            onclick="doLinearSearch()"
                        >
                            Linear Search
                        </button>
                        <button
                            id="binary-search"
                            class="btn"
                            onclick="doBinarySearch()"
                        >
                            Binary Search
                        </button>
                        <button
                            id="bubble-sort"
                            class="btn"
                            onclick="doBubbleSort()"
                        >
                            Bubble Sort
                        </button>
                        <button
                            id="selection-sort"
                            class="btn"
                            onclick="doSelectionSort()"
                        >
                            Selection Sort
                        </button>
                        <button
                            id="insertion-sort"
                            class="btn"
                            onclick="doInsertionSort()"
                        >
                            Insertion Sort
                        </button>
                        <button
                            id="merge-sort"
                            class="btn"
                            onclick="doMergeSort()"
                        >
                            Merge Sort
                        </button>
                        <button
                            id="quick-sort"
                            class="btn"
                            onclick="doQuickSort()"
                        >
                            Quick Sort
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <div class="line-container-parent">
            <div id="lines-container"></div>
        </div>

        <div id="toast">
            <div id="toast-img">
                <i
                    id="toast-icon"
                    class="fa fa-2x fa-check-circle"
                    aria-hidden="true"
                    style="color: #d0f0c0"
                ></i>
            </div>
            <div id="toast-desc"></div>
        </div>
        <!-- show searching or sorting results as a text -->
        <div id="result-container">
            <h2 id="result"></h2>
            <h4 id="execution-time"></h4>
        </div>

        <!-- list to show all execution time with their name -->
        <ul id="execution-time-list"></ul>

        <h1 style="text-align: center; margin-bottom: 20px">
            Algorithm visualizer
        </h1>

        <footer
            style="
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 18px;
            "
        >
            <p>
                Develop by
                <span style="color: #000; font-weight: bold"
                    >Mahim & Fazlul</span
                >
            </p>
        </footer>

        <script type="module" src="js/main.js"></script>

        <!-- Initialize Particles.js -->
        <script src="js/particle-main.js"></script>
    </body>
</html>