01yaminabe-kuji.css

#input-cont{
  display: block;
  height: 100px;
  resize: none;
}
#input-cont,#output{
  box-sizing: border-box;
  width: 90%;
  margin: 20px auto;
}
#output{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  position: relative;
  border: 10px solid #E53935;
  overflow: hidden;
  font-family: 'Mochiy Pop One', sans-serif;
}
#output-cover{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #E53935;
  font-size: 40px;
}
#output-cover.moved{
  transform: translateX(100%);
  transition: transform 1s;
}
#output-text{
  padding: 4px 8px;
}
.count-area{
  text-align: right;
}
.bt{
  display: block;
  margin: 32px auto;
  padding: 4px 8px;
  cursor: pointer;
}
#bt-renew{
  margin-top: 60px;
}

#message{
  margin: 20px 0;
  padding: 12px;
  background-color: #FFEBEE;
  color: #D32F2F;
}
#opend-box{
  width: 90%;
  margin: 0 auto;
  border: 1px solid #555;
  border-radius: 8px;
}
.opend-title{
  text-align: center;
  padding: 4px 0;
  margin: 0 8px;
  border-bottom: 1px solid #555;
}
#opend-body,.opend-list{
  padding: 4px 8px;
}
.opend-list+.opend-list{
  border-top: 1px dashed #555;
}
.opend-gray{
  color: #aaa;
}

.hide,#input-cont.hide,#output.hide{
  display: none;
}

02yaminabe-kuji.html

<textarea id="input-cont" placeholder="くじの内容を入力。"></textarea>
<div id="output" class="hide">
  <div id="output-cover">くじ</div>
  <div id="output-text"></div>
</div>

<div class="count-area">
  くじ残り<span id="count-box">0</span>個
</div>

<div class="control">
  <button id="bt-in" class="bt">くじを箱に入れる</button>
  <button id="bt-prepare" class="bt">準備完了</button>
  <button id="bt-out" class="bt hide">くじを引く</button>
  <button id="bt-open" class="bt hide">全てのくじを公開</button>
  <button id="bt-reset" class="bt hide">引いたくじを箱の中に入れてやり直し</button>
  <button id="bt-renew" class="bt">全てリセット</button>
</div>

<div id="message" class="hide"></div>

<div id="opend-box" class="hide">
  <div class="opend-title">くじの内容</div>
  <div id="opend-body"></div>
</div>

03yaminabe-kuji.js

const input_cont = document.getElementById('input-cont');
const output = document.getElementById('output');
const output_cover = document.getElementById('output-cover');
const output_text = document.getElementById('output-text');
const count_box = document.getElementById('count-box');
const bt_in = document.getElementById('bt-in');
const bt_prepare = document.getElementById('bt-prepare');
const bt_out = document.getElementById('bt-out');
const bt_open = document.getElementById('bt-open');
const bt_reset = document.getElementById('bt-reset');
const bt_renew = document.getElementById('bt-renew');
const message = document.getElementById('message');
const opened_box = document.getElementById('opend-box');
const opened_body = document.getElementById('opend-body');

let kuji_box = [];
let kuji_used = [];
let playing = false;

bt_in.addEventListener('click',putIn);
bt_prepare.addEventListener('click',prepare);
bt_out.addEventListener('click',putOut);
bt_open.addEventListener('click',open);
bt_reset.addEventListener('click',reset);
bt_renew.addEventListener('click',renew);

function putIn(){
  console.log('putIn');
  if(playing) return;
  message.classList.add('hide');
  const val = input_cont.value;
  //入力データから文頭文末の空白改行を削除
  const str = escHtml(val.replace(/^(\r\n|\r|\n|\s)*/g,'').replace(/(\r\n|\r|\n|\s)*$/g,''));
  //例外処理
  if(str==''){
    msgBox('入力内容が空です。')
    return;
  }
  //本処理
  const html = str.replace(/(\r\n|\r|\n)/g,'<br>');
  kuji_box.push(html);
  input_cont.value = '';
  count_box.textContent = kuji_box.length;
}

function prepare(){
  console.log('prepare');
  if(playing) return;
  message.classList.add('hide');
  //例外処理
  if(kuji_box.length==0){
    msgBox('くじがありません。')
    return;
  }
  //
  shuffle(kuji_box);
  //
  playing = true;
  //メインエリア描画
  input_cont.classList.add('hide');
  output.classList.remove('hide');
  //ボタンエリア描画
  bt_in.classList.add('hide');
  bt_prepare.classList.add('hide');
  bt_out.classList.remove('hide');
  bt_open.classList.remove('hide');
  bt_reset.classList.remove('hide');
}

function putOut(){
  console.log('putOut');
  if(!playing) return;
  message.classList.add('hide');
  //残0処理
  if(kuji_box.length==0){
    output_text.textContent = '';
    output_cover.classList.remove('moved');
    msgBox('くじがありません。');
    return;
  }
  //描画処理
  output_cover.classList.remove('moved');
  output_text.innerHTML = kuji_box[0];
  setTimeout(()=>{
    output_cover.classList.add('moved');
  },1);
  //引いたくじ
  const div = document.createElement('div');
  div.classList.add('opend-list');
  div.innerHTML = kuji_box[0];
  opened_body.appendChild(div);
  opened_box.classList.remove('hide');
  //箱内処理
  kuji_used.push(kuji_box.shift());
  count_box.textContent = kuji_box.length;

}

function open(){
  if(!playing) return;
  //本処理
  kuji_box.forEach(v=>{
    const div = document.createElement('div');
    div.classList.add('opend-list');
    div.classList.add('opend-gray');
    div.innerHTML = v;
    opened_body.appendChild(div);
  });
  opened_box.classList.remove('hide');
  //箱内処理
  kuji_used = kuji_used.concat(kuji_box);
  kuji_box = [];
  count_box.textContent = kuji_box.length;
}

function reset(){
  console.log('reset');
  if(!playing) return;
  message.classList.add('hide');
  //箱内処理
  kuji_box = kuji_box.concat(kuji_used);
  kuji_used = [];
  shuffle(kuji_box);
  //描画処理
  count_box.textContent = kuji_box.length;
  output_text.textContent = '';
  output_cover.classList.remove('moved');
  opened_box.classList.add('hide');
  opened_body.textContent = '';
}

function renew(){
  console.log('renew');
  kuji_box = [];
  kuji_used = [];
  playing = false;
  message.classList.add('hide');
  //メイン描画
  input_cont.classList.remove('hide');
  input_cont.value = '';
  output.classList.add('hide');
  output_text.textContent = '';
  output_cover.classList.remove('moved');
  count_box.textContent = kuji_box.length;
  //ボタン描画
  bt_in.classList.remove('hide');
  bt_prepare.classList.remove('hide');
  bt_out.classList.add('hide');
  bt_open.classList.add('hide');
  bt_reset.classList.add('hide');
  //内容描画
  opened_box.classList.add('hide');
  opened_body.textContent = '';
}

function msgBox(str){
  message.textContent = str;
  message.classList.remove('hide');
}

function randomMN(m,n){
  const d = Math.max(m,n)-Math.min(m,n);
  return Math.floor(Math.random()*(d+1)+Math.min(m,n));
}

function shuffle(array){
  for(let i=array.length-1;i>=1;i--){
    const j = randomMN(0,i);
    [array[j],array[i]] = [array[i],array[j]];
  }
}

function escHtml(str){
  str = str.replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
  return str;
}