Day 17.

tfrommen · tfrommen · commit 0a64c906fc36 · 2017-02-23T21:19:27.000+01:00
diff --git a/17 - Sort Without Articles/index.html b/17 - Sort Without Articles/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Sort Without Articles</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<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 stripLeadingArticle( string ) {
+		return string.replace( /^(an?|the)\s/i, '' );
+	}
+
+	const sortedBands = bands.sort( ( a, b ) => stripLeadingArticle( a ) > stripLeadingArticle( b ) );
+
+	document.getElementById( 'bands' ).innerHTML = sortedBands.map( ( b ) => `<li>${b}</li>` ).join('');
+</script>
+
+</body>
+</html>
diff --git a/17 - Sort Without Articles/style.css b/17 - Sort Without Articles/style.css
@@ -0,0 +1,32 @@
+body {
+	font-family: sans-serif;
+	background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
+	background-size: cover;
+	display: flex;
+	align-items: center;
+	min-height: 100vh;
+}
+
+a {
+	color: #ffc600;
+	text-decoration: none;
+}
+
+#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;
+}
