可愛い女の子と一緒に勉強したいからアプリを作る②～一時停止機能をつける～✊😋

この記事は備忘録です☺

①にて外観のデザインができあがりました。

↓完成版はこちら
https://studytimerwithagirlstg.netlify.app/

ただ25分を永遠に繰り返すだけのつら～いアプリになっていたので、
今回は一時停止機能を付けてみました。

Geminiに尋ねたところ、
「休憩中に画像変えちゃう？」と追加の変更ももらったので
一時停止すると以下のように休憩中の女の子になります。
AIで作ってるのにかわいいじゃないか…✊

以下、今回のソースです。
更新したのはJsだけでした。
html,cssは変更はありませんので①の記事をご覧ください。
↓①の記事
可愛い女の子と一緒に勉強したいからアプリを作る①✊😋

###JavaScript

script.js

let timeLeft = 25 * 60;
let timerId = null;

const timerDisplay = document.getElementById('timer');
const messageDisplay = document.getElementById('message');
const startBtn = document.getElementById('start-btn');
const charImg = document.getElementById('character'); // 女の子の画像要素を取得

function updateTimer() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function toggleTimer() {
    if (timerId === null) {
        // --- 【開始・再開】の処理 ---
        startBtn.textContent = "一時停止";
        messageDisplay.textContent = "集中、集中！応援してるよ！";
        charImg.src = "girl.png"; // 勉強中の画像に戻す
        
        timerId = setInterval(() => {
            timeLeft--;
            updateTimer();
            
            if (timeLeft <= 0) {
                clearInterval(timerId);
                timerId = null;
                startBtn.textContent = "スタート";
                messageDisplay.textContent = "お疲れ様！ゆっくり休んでね。";
                charImg.src = "girl_rest.png"; // 終わったら休憩画像に
                alert("休憩時間だよ！");
            }
        }, 1000);
    } else {
        // --- 【一時停止】の処理 ---
        clearInterval(timerId);
        timerId = null;
        startBtn.textContent = "再開";
        messageDisplay.textContent = "ふぅ、一休みする？";
        charImg.src = "girl_rest.png"; // ★ここで休憩中の画像に切り替え！
    }
}

function resetTimer() {
    clearInterval(timerId);
    timerId = null;
    timeLeft = 25 * 60;
    updateTimer();
    startBtn.textContent = "スタート";
    messageDisplay.textContent = "もう一回頑張る？";
    charImg.src = "girl.png"; // リセット時も元の画像に
}

startBtn.addEventListener('click', toggleTimer);
document.getElementById('reset-btn').addEventListener('click', resetTimer);

まとめ

JavaScriptだけで画像の表示を変えられるんだ…
ということを本日知りました。

NMNK