第1回 試験用キッチンタイマー制作｜基本機能編

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>キッチンタイマー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="timer-app">
    <h1>キッチンタイマー</h1>

    <div class="time-inputs">
      <label>
        分
        <input type="number" id="minutes" min="0" value="1">
      </label>

      <label>
        秒
        <input type="number" id="seconds" min="0" max="59" value="0">
      </label>
    </div>

    <p id="error-message" class="error-message"></p>

    <div id="display" class="timer-display">01:00</div>

    <div class="buttons">
      <button id="start-button" type="button">スタート</button>
      <button id="pause-button" type="button" disabled>一時停止</button>
      <button id="reset-button" type="button">リセット</button>
    </div>
  </main>

  <script src="script.js"></script>
</body>
</html>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: sans-serif;
  background: #f3f5f7;
  color: #222;
}

.timer-app {
  width: 520px;
  padding: 32px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.timer-app h1 {
  margin-top: 0;
}

.time-inputs {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.time-inputs label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.time-inputs input {
  width: 90px;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 8px;
  font-size: 1.2rem;
  text-align: right;
}

.error-message {
  min-height: 1.5em;
  margin: 0 0 8px;
  color: #c62828;
  font-weight: bold;
}

.timer-display {
  margin: 16px 0 24px;
  font-size: 5rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.buttons button {
  min-width: 120px;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

#start-button {
  background: #2e7d32;
  color: #ffffff;
}

#pause-button {
  background: #f9a825;
  color: #222222;
}

#reset-button {
  background: #546e7a;
  color: #ffffff;
}

.buttons button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

const minutesInput = document.getElementById("minutes");
const secondsInput = document.getElementById("seconds");
const display = document.getElementById("display");
const errorMessage = document.getElementById("error-message");

const startButton = document.getElementById("start-button");
const pauseButton = document.getElementById("pause-button");
const resetButton = document.getElementById("reset-button");

let timerId = null;
let endTime = 0;
let remainingMilliseconds = 0;
let isRunning = false;
let isPaused = false;

function getInputMilliseconds() {
  const minutes = Number(minutesInput.value);
  const seconds = Number(secondsInput.value);

  if (!Number.isInteger(minutes) || minutes < 0) {
    showError("分は0以上の整数で入力してください。");
    return null;
  }

  if (!Number.isInteger(seconds) || seconds < 0 || seconds > 59) {
    showError("秒は0～59の整数で入力してください。");
    return null;
  }

  const totalMilliseconds = (minutes * 60 + seconds) * 1000;

  if (totalMilliseconds === 0) {
    showError("0分0秒では開始できません。");
    return null;
  }

  clearError();
  return totalMilliseconds;
}

function showError(message) {
  errorMessage.textContent = message;
}

function clearError() {
  errorMessage.textContent = "";
}

function formatTime(milliseconds) {
  const totalSeconds = Math.max(0, Math.ceil(milliseconds / 1000));
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}

function updateDisplay() {
  if (!isRunning) {
    return;
  }

  remainingMilliseconds = endTime - Date.now();

  if (remainingMilliseconds <= 0) {
    finishTimer();
    return;
  }

  display.textContent = formatTime(remainingMilliseconds);
}

function startTimer() {
  if (isRunning) {
    return;
  }

  if (!isPaused) {
    const inputMilliseconds = getInputMilliseconds();

    if (inputMilliseconds === null) {
      return;
    }

    remainingMilliseconds = inputMilliseconds;
  }

  endTime = Date.now() + remainingMilliseconds;
  isRunning = true;
  isPaused = false;

  minutesInput.disabled = true;
  secondsInput.disabled = true;
  startButton.textContent = "スタート";
  startButton.disabled = true;
  pauseButton.disabled = false;

  updateDisplay();
  timerId = window.setInterval(updateDisplay, 200);
}

function pauseTimer() {
  if (!isRunning) {
    return;
  }

  remainingMilliseconds = Math.max(0, endTime - Date.now());

  window.clearInterval(timerId);
  timerId = null;
  isRunning = false;
  isPaused = true;

  display.textContent = formatTime(remainingMilliseconds);
  startButton.textContent = "再開";
  startButton.disabled = false;
  pauseButton.disabled = true;
}

function resetTimer() {
  window.clearInterval(timerId);
  timerId = null;

  isRunning = false;
  isPaused = false;
  endTime = 0;
  remainingMilliseconds = 0;

  minutesInput.value = 1;
  secondsInput.value = 0;
  minutesInput.disabled = false;
  secondsInput.disabled = false;

  display.textContent = "01:00";
  startButton.textContent = "スタート";
  startButton.disabled = false;
  pauseButton.disabled = true;

  clearError();
}

function finishTimer() {
  window.clearInterval(timerId);
  timerId = null;

  isRunning = false;
  isPaused = false;
  remainingMilliseconds = 0;

  display.textContent = "00:00";
  startButton.disabled = true;
  pauseButton.disabled = true;
}

function updatePreview() {
  if (isRunning || isPaused) {
    return;
  }

  const minutes = Number(minutesInput.value);
  const seconds = Number(secondsInput.value);

  if (
    Number.isInteger(minutes) &&
    minutes >= 0 &&
    Number.isInteger(seconds) &&
    seconds >= 0 &&
    seconds <= 59
  ) {
    const totalMilliseconds = (minutes * 60 + seconds) * 1000;
    display.textContent = formatTime(totalMilliseconds);
    clearError();
  }
}

startButton.addEventListener("click", startTimer);
pauseButton.addEventListener("click", pauseTimer);
resetButton.addEventListener("click", resetTimer);

minutesInput.addEventListener("input", updatePreview);
secondsInput.addEventListener("input", updatePreview);