var form = $("#main-content form"); var textarea = $("textarea", form); var results = $("#results"); function getOriginalList() { return $.trim(textarea.val()); } function getPlaceholder() { switch ($("#delimiter").val()) { case "1": return "e.g. apple,banana"; case "2": return "e.g. apple\tbanane"; case "3": return "e.g. apple;banana"; case "4": return "e.g. apple[enter]banana"; } } function getJoinDelimiter() { switch ($("#delimiter").val()) { case "1": return ","; case "2": return "\t"; case "3": return ";"; case "4": return "\n"; } } function getSplitRegex() { switch ($("#delimiter").val()) { case "1": return /,/; case "2": return /\t/; case "3": return /;/; case "4": return /\r\n|\r|\n/; } } function createLists() { var items = getOriginalList().split(getSplitRegex()); var lists = []; var numOfLists = $("#numOfLists", form).val(); for (var i = 0; i < numOfLists; i++) lists[i] = []; for (i = 0; i < items.length; i++) { lists[getRandomId(numOfLists)].push(items[i]); } // rendering the lists results.html(""); var joinDelimiter = getJoinDelimiter(); for (i = 0; i < numOfLists; i++) { createResultTextarea(lists[i].join(joinDelimiter)); } } function createResultTextarea(list) { var newTextarea = $("<textarea></textarea>"); newTextarea.val(list); results.append(newTextarea); } function getRandomId(max) { return Math.floor((Math.random() * max)); } form.on("submit", function (e) { e.preventDefault(); createLists(); }); textarea.on("keyup", function (e) { $("input[type=submit]", form).prop("disabled", !getOriginalList()); }); $("#delimiter").on("change", function() { textarea.attr("placeholder", getPlaceholder()); });
<div id="main-content"> <form>Step 1: How is the original list delimited? <br> <select id="delimiter"> <option value="1">Comma</option> <option value="2">Tab</option> <option value="3">Semi-colon</option> <option value="4">New-line</option> </select> <br> <br>Step 2: Paste your original list here. <br> <textarea placeholder="e.g. apple,banana" id="original-list"></textarea> <br> <br>Step 3: How many lists do you want to split the list into? <br> <select id="numOfLists"> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select>lists <br> <br> <input type="submit" value="Go!" disabled> </form> <br> <div id="results"></div> </div>
#main-content { font-family: verdana, arial; } textarea { border: 1px solid black; border-radius: 3px; } #original-list { width: 400px; }