I know this sounds obtuse, but check it out. I think this code could provide a foundation for some slick, quick UI out there some day.

What I’m working on right now is a scorekeeper for disc golf scores that my friends and I keep. Entering scores for 3 or 4 people + 18 holes + HTML form fields = pain in the ass.

Here’s the input model:

• Click into single text field
• Enter scores w/spaces in between (2 space 5 space 3 space 2…etc)
• Done.

With a little extra sauce to associate each set of scores w/individual players, and I think this will kick some butt.

The javascript is pretty cut & dry. Whenever a keyup event is triggered (onchange won’t work because it’s not fired until after focus leaves the box; additionally, onkeydown won’t work because the newest character isn’t parsed) we split the contents of the text field by blank space, then use jQuery’s $.each() to redraw the html inside of the output div. Here it is:

You can copy code for the whole example below. I just wanted to give you some pretty colored stuff here. Give it a try, mess around, et cetera.

I’m going to get to work on dynamically adding players & being able to fill in scores for each of them. After that I’ll have to CRUD it up. This is gonna be good.

If you don’t have it, grab jQuery here: http://jquery.com/

Javascript:

<script src="jquery-1.2.3.pack.js" type="text/javascript"></script>

<script>
$(function() { //short for $('document').ready()
$('#scoreInput').keyup(function() {
var score_list = this.value.split(' ');
var scoreHTML = '';
$.each(score_list, function(i, n) {
scoreHTML += '<span>' + n + '</span>';
$('#scoreOutput').html(scoreHTML);
}); 
});
});
</script>

Basic CSS for this example

	
#scoreCard {
    float: left;
    margin: 1em 0;
    border: 1px solid #b9b9b9;
    display: inline;
    padding: .4em .5em .1em .5em;
}

	
#scoreCard span { 
    display: block;
    float: left;
    border: 1px solid #EDEDED;
    padding: .1em;
    margin: 0 .2em;
    min-width: 1em;
    min-height: 1em;
}

HTML

Score input (*put spaces between score for each hole): <input id="scoreInput" type="text" />


	
<div id="scoreCard">
Parsed score: <div id="scoreOutput"></div>
</div>