Wrack my code
Broken text generator. It helps to study coding. Just find and restore missed fragments.
by Pavel Volyntsev
HTML
<h1>Wrack my code</h1>
<div>
<strong>What code should I wrack?</strong>
<textarea id="code" placeholder="Insert your code here"></textarea>
</div>
<div>
<strong>How should I wrack it?</strong><br/>
<select id="action">
<option value="words" selected>Remove some words</option>
<option value="chars">Remove some chars</option>
</select>
</div>
<div>
<input type="button" id="wrack" value="Wrack it!"/>
</div>
CSS
html, body, p, h1, h2, a { margin: 0; padding: 0; border: 0}
body{font-family:'Segoe UI', 'SegoeUI', Arial, Helvetica, sans-serif;color:#333333;font-size:12px;}
h1 { margin-bottom: 2em; }
div { margin-bottom: 1em; }
textarea { width: 100%; height: 15em; }
select { line-height: 1.5em; }
JavaScript
$('#wrack').on('click',function()
{
var text = $('#code').val(),
words = text.split(/ /);
console.log('in ', words);
switch($('#action').val())
{
case 'words':
console.log(words);
for(var i=0; i<3; i++)
{
var w = Math.floor(Math.random()*words.length);
console.log('word '+w+' "'+word+'" is removed');
words[w] = '';
}
break;
case 'chars':
for(var i=0; i<3; i++)
{
//do
//{
var w = Math.floor(Math.random()*words.length),
word = words[w];
//} while(w.test(/\s/))
var p = Math.floor(Math.random()*word.length);
console.log('word '+w+' "'+word+'" char '+p+' "' + word[p] + '" is removed');
word[p] = '';
words[w] = word;
}
break;
}
console.log('out', words);
});