Tell us what’s happening:
I’m failing test 13, but otherwise everything seems to be working correctly.
// running tests
13. Your swapElements function take an array of integers and a numeric index as arguments. It should modify the array passed in place by swapping the element at the given index and the following element if the first element is greater than the second.
// tests completed
// console output
I am using a global variable for the array, which might not work with the tests?
Here is the rest of the test output and the array every time it swaps. It does seem to be swapping elements when the index is greater than the next element.
[ true, true, true, true, true ]
[ 26, 9, 58, 23, 38 ]
[TypeError: el.children[idx] is undefined]
clicked generate
[ 74, 25, 21, 83, 10 ]
clicked generate
[ 57, 13, 39, 27, 81 ]
[ 13, 57, 39, 27, 81 ]
[ 13, 39, 57, 27, 81 ]
[ 13, 39, 27, 57, 81 ]
[ 13, 27, 39, 57, 81 ]
clicked generate
[ 74, 9, 58, 40, 55 ]
clicked generate
[ 26, 9, 58, 23, 38 ]
[ 9, 26, 58, 23, 38 ]
[ 9, 26, 23, 58, 38 ]
[ 9, 26, 23, 38, 58 ]
[ 9, 23, 26, 38, 58 ]
clicked generate
[ 26, 9, 58, 23, 38 ]
[ 9, 26, 58, 23, 38 ]
[ 9, 26, 23, 58, 38 ]
[ 9, 26, 23, 38, 58 ]
[ 9, 23, 26, 38, 58 ]
clicked generate
[ 72, 3, 8, 65, 6 ]
[ 3, 72, 8, 65, 6 ]
[ 3, 8, 72, 65, 6 ]
[ 3, 8, 65, 72, 6 ]
[ 3, 8, 65, 6, 72 ]
[ 3, 8, 6, 65, 72 ]
[ 3, 6, 8, 65, 72 ]
clicked generate
[ 95, 99, 69, 30, 20 ]
[ 95, 69, 99, 30, 20 ]
[ 95, 69, 30, 99, 20 ]
[ 95, 69, 30, 20, 99 ]
[ 69, 95, 30, 20, 99 ]
[ 69, 30, 95, 20, 99 ]
[ 69, 30, 20, 95, 99 ]
[ 30, 69, 20, 95, 99 ]
[ 30, 20, 69, 95, 99 ]
[ 20, 30, 69, 95, 99 ]
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sorting Visualizer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div id="array-container">
<div id="starting-array"></div>
</div>
<div id="btn-container">
<button id="generate-btn" type="button">Generate Array</button>
<button id="sort-btn" type="button">Sort Array</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
}
main {
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#array-container {
max-height: 95vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2px;
}
#array-container>div {
min-width: 8rem;
height: 2rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
border-radius: 10px;
margin-bottom: 0.2rem;
border: 2px solid darkgray;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#starting-array {
border: 4px solid darkblue !important;
}
#btn-container {
display: flex;
justify-content: space-around;
}
button {
padding: 2px;
margin: 5px;
}
span {
border-radius: 2px;
padding: 0.5px;
margin: 0
}
@media (min-width: 430px) {
#array-container>div {
min-width: 12rem;
}
span {
padding: 1px;
margin: 1px;
}
}
/* file: script.js */
const generateBtn = document.getElementById("generate-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");
let globalArray = [];
const generateElement = () => parseInt((Math.random(100) * 100 + 1))
const generateArray = () => {
sortBtn.disabled = false
globalArray = [];
for (let i = 0; i < 5; i++) {
globalArray.push(generateElement())
}
console.log(globalArray)
return globalArray
}
const generateContainer = () => document.createElement("div");
const fillArrContainer = (ele, array) => {
ele.innerHTML = "";
for (let i = 0; i < 5; i++) {
ele.innerHTML += `<span>${array[i]}</span>`
}
return ele;
}
const isOrdered = (a,b) => Boolean(a <= b)
const swapElements = (arr, idx) => {
highlightCurrentEls(arrayContainer.children[arrayContainer.children.length-1],idx);
if (isOrdered(arr[idx],arr[idx + 1])) {
arrayContainer.append(fillArrContainer(generateContainer(), globalArray))
return true;
}
arr.splice(idx, 0, arr[idx + 1]);
arr.splice(idx+2, 1);
arrayContainer.append(fillArrContainer(generateContainer(), globalArray))
console.log(arr)
return false;
}
const highlightCurrentEls = (el,idx) => {
el.children[idx].style.border = "4px dashed red";
el.children[idx + 1].style.border = "4px dashed red"
}
generateBtn.addEventListener("click", () => {
console.log("clicked generate")
arrayContainer.innerHTML = "";
arrayContainer.append(fillArrContainer(startingArray,generateArray()))
})
const sortArray = () => {
let isSorted = true;
for (let idx = 0; idx < 4; idx++) {
isSorted = swapElements(globalArray, idx) ? isSorted : false;
}
isSorted ? sortBtn.disabled = true : sortArray();
}
sortBtn.addEventListener("click", sortArray)
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
