JSFiddle - React, Tailwind, and code Playground

by hbsto

HTML

<form id="form_result">
  <input type="text" id="input_result" maxlength="3" size="3"/>
  <input type="submit" />
</form>
<ol id="ol_result"></ol>

JavaScript

Array.prototype.shuffle=function(){for(var r=this,t=r.length-1;t>=0;t--){var o=Math.floor(Math.random()*(t+1)),a=r[o];r[o]=r[t],r[t]=a}return r};

var result = [0,1,2,3,4,5,6,7,8,9].shuffle().splice(0,3).join(''); // random generate 3 digits

var oResult = document.getElementById('ol_result');
var oForm = document.getElementById('form_result');
var oInput = oForm.input_result;

var getNumbers = function( numbers ){ // number normalize
  if( isNaN(+numbers) || numbers.length !== 3 || /(\d)\1+/.test(numbers) )
  	return alert('중복되지 않는 숫자 3 자리를 입력해 주세요.');
  return numbers;
};

var displayScores = function( strike, ball, out, numbers ){ // display scores
	var score = document.createElement('li');
  score.innerText = numbers + ' = ' + strike + ' strike, ' + ball + ' ball, ' + out + ' out.';
	oResult.appendChild(score);
};

oForm.onsubmit = function(event){ // submit my numbers
  
  var numbers = getNumbers( oInput.value.trim() );
  
  if( !numbers ) return false;
  
  var scores = numbers.split('').reduce(function(score, n, idx){ // calc scores - [strike,ball,out]
      score[ result.indexOf(n) === idx ? 0 : result.indexOf(n) > -1 ? 1 : 2 ]++;
      return score;
    }, [0, 0, 0, numbers]);
  
  displayScores.apply(this, scores); // output result
  
  return false;
  
};