Commit f24f22b

committed

Day 17 - Sort Without Articles

1 parent ff0e8a2 commit f24f22bCopy full SHA for f24f22b

File tree

+89

-0

lines changed

+89

-0

lines changed

Lines changed: 16 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,16 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <title>17 Day</title>`
	`7`	`+ <link rel="stylesheet" href="main.css">`
	`8`	`+</head>`
	`9`	`+`
	`10`	`+<body>`
	`11`	`+ <ul id="bands"></ul>`
	`12`	`+ <script type="text/javascript" src="main.js">`
	`13`	`+`
	`14`	`+ </script>`
	`15`	`+</body>`
	`16`	`+</html>`

Lines changed: 32 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,32 @@`
	`1`	`+body {`
	`2`	`+ font-family: Verdana, Helvetica, Sans-Serif;`
	`3`	`+ background: url("https://picsum.photos/1500/1000/?random");`
	`4`	`+ background-size: cover;`
	`5`	`+ display: flex;`
	`6`	`+ align-items: center;`
	`7`	`+ min-height: 100vh;`
	`8`	`+}`
	`9`	`+`
	`10`	`+#bands {`
	`11`	`+ list-style: inside square;`
	`12`	`+ font-size: 11.5px;`
	`13`	`+ background: white;`
	`14`	`+ width: 412px;`
	`15`	`+ margin: auto;`
	`16`	`+ padding: 0;`
	`17`	`+ box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);`
	`18`	`+}`
	`19`	`+`
	`20`	`+#bands li {`
	`21`	`+ border-bottom: 1px solid #efefef;`
	`22`	`+ padding: 12px 20px;`
	`23`	`+}`
	`24`	`+`
	`25`	`+#bands li:last-child {`
	`26`	`+ border-bottom: 0;`
	`27`	`+}`
	`28`	`+`
	`29`	`+em {`
	`30`	`+ color: green;`
	`31`	`+ float: right;`
	`32`	`+}`

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+const bands = [`
	`2`	`+ 'The Plot in You',`
	`3`	`+ 'The Devil Wears Prada',`
	`4`	`+ 'Pierce the Veil',`
	`5`	`+ 'Norma Jean',`
	`6`	`+ 'The Bled',`
	`7`	`+ 'Say Anything',`
	`8`	`+ 'The Midway State',`
	`9`	`+ 'We Came as Romans',`
	`10`	`+ 'Counterparts',`
	`11`	`+ 'Oh, Sleeper',`
	`12`	`+ 'A Skylit Drive',`
	`13`	`+ 'Anywhere But Here',`
	`14`	`+ 'An Old Dog'`
	`15`	`+];`
	`16`	`+`
	`17`	`+function stripPrefixes(bandName) {`
	`18`	`+ return bandName.replace(/^(a\|the\|an)/i, '').trim();`
	`19`	`+}`
	`20`	`+`
	`21`	`+function setListItem(band) {`
	`22`	`+ if (band.match(/^(a\|an\|the)/i)) {`
	`23`	+ return `<li>${stripPrefixes(band)} <em>Actual name: ${band}</em></li>`;
	`24`	`+ } else {`
	`25`	+ return `<li>${band}</li>`
	`26`	`+ }`
	`27`	`+}`
	`28`	`+const sortedBands = bands.sort(`
	`29`	`+ (a, b) => stripPrefixes(a) > stripPrefixes(b)`
	`30`	`+ ? 1`
	`31`	`+ : -1);`
	`32`	`+`
	`33`	`+document.querySelector('#bands').innerHTML = sortedBands.map(band => setListItem(band)).join('');`
	`34`	`+`
	`35`	`+console.log(sortedBands);`

Lines changed: 5 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -101,3 +101,8 @@ Tested all new buttons. Data is also persisting on page reload:-`
`101`	`101`	`Today learned about assigning to new variable names using ES6 Object destructuring and how we can update CSS rules like textShadow or anything using javascript. Just like canvas this was a fun challenge today. I tried some css effects like this:-`
`102`	`102`
`103`	`103`	`![Day 16 new taks](https://pbs.twimg.com/media/C2IFDhkWQAAv-Ck.jpg)`
	`104`	`+`
	`105`	`+### Day 17: 4 Jul 2018`
	`106`	`+Updated code to show modified band names on which sort actually happens and on right side the actual band names. After code modifications it looks like this:-`
	`107`	`+`
	`108`	`+![Day 17 new taks](https://pbs.twimg.com/media/C2N0IDsWIAA9hLT.jpg)`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`<a class="active" href="./14_day/index.html">14 Day</a>`
`26`	`26`	`<a class="active" href="./15_day/index.html">15 Day</a>`
`27`	`27`	`<a class="active" href="./16_day/index.html">16 Day</a>`
	`28`	`+ <a class="active" href="./17_day/index.html">17 Day</a>`
`28`	`29`	`</div>`
`29`	`30`	`</body>`
`30`	`31`

Comments

(0)