day 18

fullstackNRJ · fullstackNRJ · commit 3fed010db093 · 2020-04-23T14:17:50.000+05:30
diff --git a/README.md b/README.md
@@ -33,4 +33,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
 | [Day 14](./each%20day%20build%20day!/Day%14/) | [Key sequence detection](./each%20day%20build%20day!/Day%2014/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2014/README.md/) |
 | [Day 15](./each%20day%20build%20day!/Day%15/) | [Scrolling IN effects](./each%20day%20build%20day!/Day%2015/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2015/README.md/) |
 | [Day 16](./each%20day%20build%20day!/Day%16/) | [Reference vs copy](./each%20day%20build%20day!/Day%2016/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2016/README.md/) |
-| [Day 17](./each%20day%20build%20day!/Day%17/) | [Mouseover Shadow](./each%20day%20build%20day!/Day%2017/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2017/README.md/) |
+| [Day 17](./each%20day%20build%20day!/Day%17/) | [Mouseover Shadow](./each%20day%20build%20day!/Day%2017/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2017/README.md/) |
+| [Day 18](./each%20day%20build%20day!/Day%18/) | [Custom sorting names](./each%20day%20build%20day!/Day%2018/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2018/README.md/) |
diff --git a/each day build day!/Day 18/README.md b/each day build day!/Day 18/README.md
@@ -0,0 +1,7 @@
+# Sorting  without A/AN/THE
+
+- Simple task to sort names using only the noun and not the articles
+
+# challenges
+- sort
+- trim
diff --git a/each day build day!/Day 18/index.html b/each day build day!/Day 18/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Sort Without Articles</title>
+</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: #00fff2;
+      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', ];
+
+function stripping(str){
+    return str.replace(/^(a |an |the )/i,'').trim()
+}
+
+const sortedNames = bands.sort((a,b)=> stripping(a) > stripping(b));
+document.querySelector('#bands').innerHTML = sortedNames
+                        .map(band => `<li>${band}</li>`).join('');
+</script>
+
+</body>
+</html>
