O algoritmo Bubble Sort ordena uma sequência de inteiros comparando pares de elementos adjacentes começando do início da sequência. Se o primeiro elemento for maior que o segundo, ele os troca. Então, ele prossegue com o seguinte par. Quando o último elemento da sequência é alcançado, inicia um novo ciclo a partir do início da sequência e repete o processo até que os elementos estejam ordenados. O algoritmo para após um ciclo ser concluído sem trocas. Para este laboratório, você recebeu todo o HTML e CSS. Você usará JavaScript para completar o Bubble Sort Visualizer para que ele visualize cada passo necessário pelo algoritmo Bubble Sort para ordenar um array de cinco inteiros. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter uma função chamada generateElement que retorna um número inteiro aleatório entre 1 e 100, inclusive. 1. Você deve ter uma função chamada generateArray que usa a função generateElement para retornar um array contendo cinco inteiros aleatórios. 1. Você deve ter uma função chamada generateContainer que cria e retorna um elemento div vazio. 1. Você deve ter uma função chamada fillArrContainer que recebe um elemento HTML como primeiro argumento e um array como segundo argumento. 1. O fillArrContainer deve receber um elemento como seu primeiro parâmetro e um array de inteiros como seu segundo parâmetro, então preencher o elemento com cinco elementos span, com cada span mostrando um dos inteiros do array. 1. Você deve ter uma função chamada isOrdered que recebe dois inteiros e retorna um booleano indicando se o primeiro inteiro é menor ou igual ao segundo. 1. Você deve ter uma função chamada swapElements que recebe um array de inteiros e um índice numérico. 1. A função swapElements deve modificar o array no local, trocando o elemento no índice passado pelo elemento seguinte se isOrdered retornar false. 1. Você deve ter uma função chamada highlightCurrentEls que recebe um elemento HTML e um índice numérico. 1. A função highlightCurrentEls deve definir a border do filho do elemento fornecido no índice dado, e do filho imediatamente após o índice, para ter um estilo dashed, uma cor red e uma largura de sua escolha. 1. Quando você clicar em #generate-btn, deve usar a função fillArrContainer para preencher #starting-array com cinco elementos span, cada um com um número aleatório como texto. Se presentes, outros elementos devem ser removidos de #array-container. 1. Você deve implementar o algoritmo Bubble Sort para que, após clicar em #sort-btn, #array-container contenha um elemento div para cada um dos passos necessários pelo algoritmo Bubble Sort para ordenar o array inicial, incluindo a div que representa o array inicial e uma div que representa o array ordenado. As funções que você criou até agora podem ser úteis aqui. 1. Cada div deve conter cinco elementos span, representando o array em seu estado atual de ordenação. 1. Após clicar em #sort-btn, #starting-array deve representar o passo inicial com o array inicial e os dois primeiros inteiros destacados. 1. Para cada etapa de ordenação, você deve usar highlightCurrentEls para destacar os dois números que estão sendo comparados e trocá-los na próxima etapa usando swapElements.

Testes:

• Você deve ter uma função chamada `generateElement`.
• Sua função `generateElement` deve retornar um número inteiro aleatório entre `1` e `100`, inclusive.
• Você deve ter uma função chamada `generateArray`.
• Sua função `generateArray` deve fazer uso da função `generateElement`.
• Sua função `generateArray` deve retornar um array contendo cinco números inteiros aleatórios entre `1` e `100`.
• Você deve ter uma função chamada `generateContainer`.
• Sua função `generateContainer` deve retornar um elemento `div` vazio.
• Você deve ter uma função chamada `fillArrContainer`.
• Seu `fillArrContainer()` deve receber um elemento como seu primeiro parâmetro e um array de inteiros como seu segundo parâmetro, então preencher o elemento com cinco elementos `span`, com cada `span` mostrando um dos inteiros do array.
• Você deve ter uma função chamada `isOrdered`.
• Sua função `isOrdered` deve receber dois inteiros e retornar um booleano indicando se o primeiro inteiro é menor ou igual ao segundo.
• Você deve ter uma função chamada `swapElements`.
• Sua função `swapElements` recebe um array de inteiros e um índice numérico como argumentos. Deve modificar o array passado no local trocando o elemento no índice fornecido com o elemento seguinte se o primeiro elemento for maior que o segundo.
• Você deve ter uma função chamada `highlightCurrentEls`.
• Sua função `highlightCurrentEls` deve dar aos descendentes do elemento especificado, localizados no índice fornecido e no próximo índice, uma borda que seja `tracejada`, `vermelha` e definida com uma largura de sua escolha.
• Quando você clicar em `#generate-btn`, deve preencher `#starting-array` com cinco elementos `span`, cada um com um número aleatório entre `1` e `100` como seu texto.
• Quando `#starting-array` já contém um array gerado, ou `#array-container` contém o array ordenado, clicar no `#generate-btn` deve remover os outros elementos em `#array-container`, deixando apenas `#starting-array` com números recém-gerados.
• Após clicar em `#sort-btn`, `#array-container` deve conter tantos elementos `div` quantos os passos necessários pelo algoritmo Bubble Sort para ordenar o array inicial, incluindo o `div` que representa o array inicial e um `div` que representa o array ordenado.
• Após clicar em `#sort-btn`, cada `div` dentro de `#array-container` deve conter cinco `span`, cada um com um número como seu texto, e organizados para representar os passos necessários pelo algoritmo Bubble Sort para ordenar o array inicial.
• Quando você clicar no `#sort-btn`, deve utilizar a função `highlightCurrentEls` para destacar os elementos que estão sendo comparados em cada etapa.
• Após clicar em `#sort-btn`, `#starting-array` deve representar o passo inicial com o array inicial e os dois primeiros inteiros destacados usando `highlightCurrentEls`.