JSFiddle - React, Tailwind, and code Playground

by Jay Lim

HTML

<div class="input-btn-box">
    <div class="box-title">
      <h2>등차수열 계산기</h2>
    </div>
    <div class="box-body">
      <input id="index" type="number" min="1" max="1000" value="10">
    </div>
    <div class="box-btn">
      <button id="calc-btn">
        <span>계산하기</span>
      </button>
    </div>
  </div>
  <ul id="results"></ul>

CSS

html, body, * {padding: 0; margin: 0;}
.input-btn-box {width: 200px; height: 100px; background: #ececec; margin: 50px auto 0 auto; border: 1px silver solid;}
.box-title {width: 100%; height: 30px; color: #333; text-align: center;}
.box-title h2 {font-size: 12px; line-height: 30px;}
.box-body {width: 200px; height: 30px; text-align: center; margin: 0 auto;}
.box-body input {width: 80%; padding: 0 5%; height: 20px; border-radius: 4px; border: 1px silver solid;}
.box-btn {width: 100%; text-align: center;}
.box-btn button {width: 50%; height: 30px; background: #333; color: white; font-size: 10px; border: none; border-radius: 4px;}
#results {width: 300px; min-height: 10px; margin: 30px auto 0 auto;}
.pass {color: green;}
.fail {color: red;}

JavaScript

function assert(value, desc){
 var li = document.createElement('li');
 li.className = value ? 'pass' : 'fail';
 li.appendChild(document.createTextNode(desc));
 document.getElementById('results').appendChild(li);
}


function simpleSample(idx){
	var sum = 0;
  if(!simpleSample.cache){
  	simpleSample.cache = {};
	} else {
  	if(simpleSample.cache[idx]){
  		assert(!simpleSample.cache[idx], simpleSample.cache[idx] + ' 값이 이미 존재하며 실행되었다.');
    	return simpleSample.cache[idx];
		} else {
  		simpleSample.cache[idx];
		}
	}
  for(var i = 1; i <= idx; i++){
        sum += i;
	}
	simpleSample.cache[idx] = sum;
	assert(simpleSample.cache, simpleSample.cache[idx] + ' 계산을 수행하여 값을 저장시킨다.');
	return simpleSample.cache[idx];
}

var btn = document.getElementById('calc-btn');
btn.addEventListener('click', function(){
	var value = document.getElementById('index').value;
  if(value == 0 || value == null){
    return false;
  } else {
    simpleSample(value);
  }
});