Commit41 //#JavaScript30 - Day 17 [Sorting Band Names Array without Articles]
In this challenge we will use javascript to sort band names without articles
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
Today's challenge comes from JavaScript30.
I woke up with Phantom of the Opera songs playing in my head this morning, so that means I’m listening to the soundtrack today while coding!
This morning I created a dough ball to make bread rolls. They need to proof for 24hrs, so I’ll finish them tomorrow after working out.
Today I will meet with one of my Skillcrush mentors since I completed the React course. I still have a lot I want to accomplish it terms of my personal coding goals. The next step for me in the bootcamp is to begin creating my portfolio and then entertain the idea of getting a job in development.
At the moment I am still seeking employment in project and product management because that’s where my expertise is. However I’m open to the possibilities as I continue to teach myself new skills.
With that! Let’s learn some more JS.
JavaScript30 - Day 17
It’s today’s challenge we be sorting band names without articles.
Everything for this challenge is built into the HTML file. There is a fair amount of CSS already generated and there is an array in the script as well.
Here is the starter code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<style>
body {
margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
display: flex;
align-items: center;
min-height: 100vh;
}
#bands {
list-style: inside square;
font-size: 20px;
background: white;
width: 500px;
margin: auto;
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}
#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}
#bands li:last-child {
border-bottom: 0;
}
a {
color: #ffc600;
text-decoration: none;
}
</style>
<ul id="bands"></ul>
<script>
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
</script>
</body>
</html>
The goal is to sort the band names in the array without the articles, so “The”, “A”, “An”.
To begin we will create a new variable that will contain the sorted bands.
const sortedBands = bands.sort(function (a, b) {
})
We will take the bands array and sort them, bands.sort
. We need to pass it through a function
, utilizing a
and b
. a
is the first thing, b
is the second. It’s basically laying things out so we can do comparison.
const sortedBands = bands.sort(function (a, b) {
if(a > b) {
return 1;
} else {
return -1;
}
})
Now we are utilizing our if statement to compare a
to b
. From this alone the list will be sorted, but it will still contain the articles at the beginning of the band names.
We ran the console.log(sortedBands);
outside of any function to return these results.
A new function will be required to remove the articles.
function strip(bandName) {
return bandName.replace(/^(a |the |an )/i, '').trim();
}
In this function we are replacing the articles with nothing. Utilizing both replace
and trim
to accomplish this.
We also need to add strip to our if statement.
if(strip(a) > strip(b)) {
return 1;
} else {
return -1;
}
The instructor recommends shortening this if statement to a turnarary operator.
const sortedBands = bands.sort(function (a, b) {
return strip(a) > strip(b) ? 1 : -1;
})
And it’s now sorting properly!
And switching our function of sortedBands
to an arrow function.
const sortedBands = bands.sort((a, b) =>
strip(a) > strip(b) ? 1 : -1);
Since the only thing we’re doing in this function is returning something, we were able to change it to be an implicit return.
Now we need to connect this array to our UI.
document.querySelector('#bands').innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
So we make a call through our document query selector to the innerHTML and run the sortedBands map array through our list items and join it together!
The .join(‘‘) removes the commas that would display between the array items.
That was a super quick challenge! Maybe I’ll do another one after my 1on1 with my bootcamp mentor.
I updated the list of bands to be some from my personal library and played with the CSS display so I could add a header to the page.
Check out the live project on Twixmixy.com!
Thanks for joining me on today’s challenge. If you have any thoughts or feedback from my notes I took as I went along I’d love to hear from you. <3