3秒チャレンジ - セタプロ

3秒チャレンジ

秋山宗太郎 04/03 15:10

アプリを動かす

コードを見る

<button id="startBtn">スタート</button>
<button id="hitBtn" disabled>たたけ！</button>
<p id="score">0</p>
<p id="message">スタートを押してね</p>

#hitBtn {
  font-size: 2rem;
  padding: 20px 40px;
  cursor: pointer;
}

#score {
  font-size: 3rem;
  font-weight: bold;
}

const startBtn = document.querySelector('#startBtn');
const hitBtn   = document.querySelector('#hitBtn');
const score    = document.querySelector('#score');
const message  = document.querySelector('#message');

let count = 0;

startBtn.addEventListener('click', function() {
  count = 0;
  score.textContent = '0';
  message.textContent = '3秒でたたけ！';
  startBtn.disabled = true;
  hitBtn.disabled = false;

  setTimeout(function() {
    hitBtn.disabled = true;
    startBtn.disabled = false;
    message.textContent = count + '回！また挑戦する？';
  }, 5000);
});

hitBtn.addEventListener('click', function() {
  count = count + 1;
  score.textContent = count;
});