Add day 17

akhilome · Aug 8, 2018 · e0e833f · e0e833f
1 parent a3c060a
commit e0e833f
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/17/assets/index.js b/17/assets/index.js
@@ -0,0 +1,7 @@
+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'];
+
+const strip = bandName => bandName.replace(/^(a |the |an )/i, '').trim();
+
+const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
+
+document.querySelector('#bands').innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
diff --git a/17/assets/style.css b/17/assets/style.css
@@ -0,0 +1,31 @@
+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;
+}
diff --git a/17/index.html b/17/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Sort Without Articles</title>
+  <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+
+  <ul id="bands"></ul>
+  <script src="assets/index.js"></script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ This is a follow-along repo which would contain my solutions to each day of the
 - [x]  Day 14 - [Object and Arrays - Reference vs Copy](https://akhilome.github.io/js30/14) 
 - [x]  Day 15 - [Localstorage and Event Delegation](https://akhilome.github.io/js30/15) 
 - [x]  Day 16 - [CSS Text Shadow Mouse Move Effect](https://akhilome.github.io/js30/16)  
-- [ ]  Day 17 - Sorting Band Names Without Articles 
+- [x]  Day 17 - [Sorting Band Names Without Articles](https://akhilome.github.io/js30/17) 
 - [ ]  Day 18 - Tally String Times With Reduce 
 - [ ]  Day 19 - Unreal Webcam Fun 
 - [ ]  Day 20 - Native Speech Recognition 

diff --git a/notes.md b/notes.md
@@ -136,3 +136,8 @@ Here, I'd be itemizing, in bullets, new concepts I come across as I traverse the
   * `event.target` => the element that the event got triggered on.
 * DOM's `MouseEvent.offsetX`
 * DOM's `MouseEvent.offsetY`
+
+## Day 17
+
+* `Array.sort`
+* Regex, fucking learn Regex, Kay!