Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to shuffle an array. We do this using javascript. This is going to be a quick tutorial.
This is a beginner-friendly javascript tutorial. If you are looking for more such tutorials you can check out this playlist here. This playlist consists of a bunch of quick tutorials based on HTML, CSS and Javascript. You can try these tutorials to improve your javascript skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial you can check out the video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Shuffle Array’. Inside this folder, we have three files. These files are – index.html, style.css and script.js. The first file is the HTML document, the next one is the stylesheet and finally, we have the script file.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document. The HTML code consists of two p elements to display the original array and the shuffled array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shuffle Array Randomly</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p id="original-arr"></p>
<p id="shuffled-arr"></p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we centre these p elements using CSS. Now copy the code provided to you below and paste it into your CSS code. You can skip the CSS as it has nothing to do with the functionality of the code. I have only used it to make the output look more presentable.
.container {
width: 100%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-family: "Poppins", sans-serif;
font-size: 6vw;
text-align: center;
color: #3c4464;
font-weight: 300;
}
.container span {
color: rgb(67, 80, 255);
font-weight: 500;
}
Javascript:
Finally, we add functionality to the code using Javascript. Now copy the code below and paste it into your script file. I have displayed the original array and shuffled it in the console for your reference.
let originalArrRef = document.getElementById("original-arr");
let shuffledArrRef = document.getElementById("shuffled-arr");
let randomize = (arr) => {
let shuffledArr = [...arr];
let index = shuffledArr.length;
let indexRandom;
while (index != 0) {
indexRandom = Math.floor(Math.random() * index);
index -= 1;
[shuffledArr[index], shuffledArr[indexRandom]] = [
shuffledArr[indexRandom],
shuffledArr[index],
];
}
originalArrRef.innerHTML = `<span>Original Array:</span> ${arr}`;
shuffledArrRef.innerHTML = `<span>Shuffled Array:</span> ${shuffledArr}`;
return shuffledArr;
};
let arr = [1, 56, 7, 28, 89, 90, 23, 66];
randomize(arr);
console.log(arr);
console.log(randomize(arr));
That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the download button below. Also if you have any queries, suggestions or feedback you can comment below!
