Added notes and solution for Project 17 - Sorting Band Names

lisaychuang · May 9, 2018 · 16cf10e · 16cf10e
1 parent 28df913
commit 16cf10e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Sort Without Articles</title>
 </head>
+
 <body>
 
   <style>
@@ -26,10 +28,12 @@
       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;
     }
@@ -38,16 +42,26 @@
       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>
+    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'];
+
+    function strip(bandName) {
+      return bandName.replace(/^(a |the |an )/i, '').trim();
+    };
 
+    const sortedBands = bands.sort((a, b) => (strip(a) > strip(b)) ? 1 : -1);
 
-</script>
+    document.querySelector('#bands').innerHTML =
+      sortedBands
+        .map(band => `<li> ${band}</li>`)
+        .join('');
+
+  </script>
 
 </body>
-</html>
+
+</html>
diff --git a/readme.md b/readme.md
@@ -853,3 +853,11 @@ JS Syntax: `object.style.textShadow="2px 5px 5px red"`
 
 The text-shadow property adds shadow to text, default value is none.
 
+## Project 17: Sorting Band Names without articles
+
+### [Regular Expressions (Regex)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+
+Regular expressions are patterns used to match character combinations in strings. 
+
+- [Handy JS Regex cheatsheet](https://www.debuggex.com/cheatsheet/regex/javascript)
+- [RegExr sandbox](https://regexr.com/)