Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to check if two arrays are identical. By the term identical, we mean arrays that contain the same items. These items may or may not be in the same order. To determine if they are identical or unidentical, we use JavaScript.
If you are looking for more such quick tutorials on Javascript, you can check out this playlist here. This playlist contains a bunch of tutorials that will help you enhance your JavaScript skills.
Video Tutorial:
If you are interested to watch a video tutorial instead of reading this blog post, you can check out this playlist here. Also, subscribe to my youtube channel, where I post new tips, tricks and tutorials regularly.
Project Folder Structure:
Before we start coding, we take a look at the project folder structure. We create a project folder cal determine if two arrays are identical. Inside this folder, we have to first file index.html and the second file style.css. I have included JavaScript in the HTML file itself.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Deteremine if two arrays are identical</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="arr1-ref"></div>
<div id="arr2-ref"></div>
<div id="result"></div>
</div>
<script>
let arr1Ref = document.getElementById("arr1-ref");
let arr2Ref = document.getElementById("arr2-ref");
let result = document.getElementById("result");
let arr1 = [11, 3, 5];
let arr2 = [5, 7, 3];
arr1Ref.innerText = `Array 1: [${arr1}]`;
arr2Ref.innerText = `Array 2: [${arr2}]`;
let arr1Sorted = arr1.sort();
let arr2Sorted = arr2.sort();
if (arr1Sorted.toString() == arr2Sorted.toString()) {
result.innerHTML = `Arrays are <span>Identical</span>`;
} else {
result.innerHTML = `Arrays are <span>not Identical</span>`;
}
</script>
</body>
</html>
CSS:
Next, we style it using CSS. You can ignore the CSS called as I have only used it to make the output more presentable.
body {
background-color: #1273eb;
}
.container {
font-family: "Poppins", sans-serif;
width: 400px;
padding: 5em 1.5em;
text-align: center;
background: #ffffff;
border-radius: 0.3em;
font-size: 1.4em;
line-height: 1.8em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
box-shadow: 0 20px 45px rgba(1, 4, 40, 0.2);
}
#arr1-ref,
#arr2-ref {
letter-spacing: 0.2em;
}
#result {
font-size: 0.8em;
margin-top: 1em;
background-color: #d7e9ff;
color: #2f4f76;
font-weight: 400;
}
span {
color: #0c2545;
font-weight: 600;
}
Javascript:
Finally, we use JavaScript to implement the functionality. We do this and the following steps:
- Create initial references
- Declare two arrays
- Sort Arrays
- Convert the array into a string
- Compare the strings to identify if the two are identical
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 code button below. Also, if you have any queries, suggestions, or feedback comment below.
Happy Coding!
