Gandalf Good Gray Saruman Bad White Radagast Awesome Green Alatar Who? Blue
-
-
Save cferdinandi/85592ee3387961ce3d4c3bebd3170bbb to your computer and use it in GitHub Desktop.
Gandalf - Good Saruman - Bad Radagast - Awesome Alatar - Who?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Sorter</title> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
/** | |
* Form Styles | |
*/ | |
form, | |
textarea { | |
margin-bottom: 1em; | |
} | |
label, | |
textarea { | |
display: block; | |
width: 100%; | |
} | |
label { | |
font-weight: bold; | |
} | |
textarea { | |
min-height: 12em; | |
} | |
#sorted { | |
white-space: pre-wrap; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Sorter App</h1> | |
<form id="sorter"> | |
<label for="sort">Stuff to Sort</label> | |
<textarea id="sort"></textarea> | |
<button>Sort My Stuff</button> | |
</form> | |
<div id="sorted" aria-live="polite"></div> | |
<script> | |
// Variables | |
var sorter = document.querySelector('#sorter'); | |
var sort = document.querySelector('#sort'); | |
var sorted = document.querySelector('#sorted'); | |
/** | |
* Handle form submissions | |
* @param {Event} event The event object | |
*/ | |
var submitHandler = function (event) { | |
// Stop the form from submitting | |
event.preventDefault(); | |
// Convert items to an array | |
var items = sort.value.split('\n'); | |
// Sort alphabetically | |
items.sort(); | |
// Update the UI | |
sorted.textContent = items.join('\n'); | |
}; | |
// Listen for form submissions | |
sorter.addEventListener('submit', submitHandler); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Sorter</title> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
/** | |
* Form Styles | |
*/ | |
form, | |
textarea, | |
input { | |
margin-bottom: 1em; | |
} | |
label, | |
textarea, | |
input { | |
display: block; | |
width: 100%; | |
} | |
label { | |
font-weight: bold; | |
} | |
textarea { | |
min-height: 12em; | |
} | |
#sorted { | |
white-space: pre-wrap; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Sorter App</h1> | |
<form id="sorter"> | |
<label for="sort">Stuff to Sort</label> | |
<textarea id="sort"></textarea> | |
<label for="remove">Lines to Remove (comma separated)</label> | |
<input type="tel" id="remove"> | |
<button>Sort My Stuff</button> | |
</form> | |
<div id="sorted" aria-live="polite"></div> | |
<script> | |
// Variables | |
var sorter = document.querySelector('#sorter'); | |
var sort = document.querySelector('#sort'); | |
var sorted = document.querySelector('#sorted'); | |
var remove = document.querySelector('#remove'); | |
/** | |
* If items should be removed, remove them | |
* @param {Array} items The items to sort | |
* @return {Array} The items with lines removed | |
*/ | |
var removeItems = function (items) { | |
// If nothing should be removed, return as-is | |
if (!remove.value.length) return item; | |
// Get the lines to remove | |
// ex. [2, 3] | |
var lines = remove.value.split(',').map(function (num) { | |
return parseInt(num.trim(), 10) - 1; | |
}); | |
// Create a new array, with lines removed | |
return items.filter(function (item, index) { | |
// Skip the first item | |
// if (index === 0) return true; | |
// Check if line should be removed | |
var removeIt = lines.filter(function (line) { | |
return line % index === 0; | |
}).length; | |
console.log(item, (index), !!removeIt); | |
// If line should be removed, exclude it | |
// Otherwise, keep it in the array | |
return removeIt ? false : true; | |
}); | |
}; | |
/** | |
* Handle form submissions | |
* @param {Event} event The event object | |
*/ | |
var submitHandler = function (event) { | |
// Stop the form from submitting | |
event.preventDefault(); | |
// Convert items to an array | |
var items = sort.value.split('\n'); | |
items = removeItems(items); | |
// Sort alphabetically | |
items.sort(); | |
// Update the UI | |
sorted.textContent = items.join('\n'); | |
}; | |
// Listen for form submissions | |
sorter.addEventListener('submit', submitHandler); | |
</script> | |
</body> | |
</html> |
I don't want to match exactly line 2, line 3, etc. I want to match every second or every third line, which is a bit different.
I was aware of that, and technically my solution does that. But removing "every second line" would remove lines 2, 4, 6 and so on. What you actually want is to remove every third line, but starting at line 2. And again starting at line 3. So SeizeDub is right about the missing 'group' parameter. This code works:
// Create a new array, with lines removed
return items.filter(function (item, index) {
for (var i = 0; i < lines.length; i++) {
// Check if line should be removed
if (index % 3 === (lines[i] - 1))
return false;
}
// If we got here, line should not be removed
return true;
});
The 3 in index % 3
would need to be replaced by another input box.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I mentioned this in one of the comments, but I don't want to match exactly line 2, line 3, etc. I want to match every second or every third line, which is a bit different.
Yea, caught that a bit later in the video 😉