chatGPT製作番茄鐘

參考網頁

番茄鐘 https://deanlife.blog/pomodoro-technique/ 

ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得

https://deanlife.blog/pomodoro-technique/ 

白噪音 檔名 rain.mp3

提醒音效 alarm.mp3

• 工具程式 notepad++ https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v8.5.6/npp.8.5.6.Installer.x64.exe 

• 存檔格式選擇 All Types(*.*)

• 首先，先必須要跟chatGPT說明他自己扮演的角色，以及你自己的現況，還有實際需求。

• 需要清楚你要做的番茄鐘的確切功能、版面、預期的效果

• 外觀是Todoist風格的

• 必須逐步請chatGPT帶著我們完成

• 每次增加新的功能時，請chatGPT重新處出檔案

第一個對話：

你是一位網頁程式設計大師，我沒有寫過程式的經驗，我現在想要寫一個在本機的可以執行的網頁番茄鐘程式，你可以一步一步帶我怎麼做嗎?盡可能清楚的操作步驟說明

第二段對話：

notepad++可以給我下載的連連結嗎?我的電腦是win10 

第三段對話

25分鐘有點久，可以幫我增加可以自訂時間的功能嗎？然後再重新給我一次程式碼 

第四段

可是時間到了，我會需要有音效提醒我，可以幫我加一個功能是時間到撥放音效的功能嗎?另外在一個按鈕是按下去之後測試撥放提醒的音效。請重新再給我一次修改完的完整程式碼 

第五段

下方幫我新增代辦事項事項的功能，前方有完成勾選的功能，代辦事項的風格要跟ToDoList一樣，最後有一個清除所有代辦事項的功能。再重新給我完整的程式碼 

第六段

把測試音效的程式碼移到跟start同一列，我覺得排版有點醜，代辦事項的區塊要置中，代辦事項清單也要靠左對齊。修改完後重新給我完整的程式碼 

下方幫我增加一個分隔線，分隔線下方新增一個文字叫做休息時間

休息時間部分預設時間為5分鐘

時間顯示的下方，有三個按鈕，分別說明如下

開始：就是5分鐘的倒數

暫停：暫停倒數

重置：就是回歸到5分鐘

幫我列出三個檔案的完整程式碼

悲劇!!!!

全部把功能一次跟chatGPT說明的下場就是，很多功能都不完整

番茄鐘作品上傳 https://drive.google.com/drive/folders/1bWNyHCyw9n1jnKHy03NnLO-ZlsI-dYr6?usp=sharing 

最後完整的對話

1.

你是一位網頁程式設計大師，我沒有寫過程式的經驗，我現在想要寫一個在本機的可以執行的網頁番茄鐘程式，你可以一步一步帶我怎麼做嗎?盡可能清楚的操作步驟說明

2.

我的番茄鐘，需要有四個按鈕

「開始」按鈕：會倒數計時，同時撥放背景音樂，背景音樂的檔案為rain.mp3

「暫停」按鈕：會暫停倒數，同時停止撥放背景音樂

「重置」按鈕：會重置倒數的時間

「測試音效」按鈕：會撥放提醒音樂，檔案名稱為alarm.mp3

另外，時間到會撥放提醒音樂，檔案名稱為alarm.mp3

3.

倒數計時的文字太小了，請幫我把字形改為32號字。

按鈕的下方新增一個分隔線，分隔線為紅色

再給我一次完整的程式碼

4.

接下來在分隔線完成以下的功能

新增一行字：休息時間

5分鐘的倒數，一樣是32號字

下方需要有三個按鈕，分別是

「開始」按鈕：會倒數計時，同時撥放背景音樂，背景音樂的檔案為rain.mp3

「暫停」按鈕：會暫停倒數，同時停止撥放背景音樂

「重置」按鈕：會重置倒數的時間

按鈕的下方新增一個分隔線，分隔線為藍色

再給我一次完整的程式碼

5.

我的「測試音效」按鈕不見了，幫我新增回來

在藍色分隔線下方新增兩個按鈕

測試提醒音效：按下會撥放提醒音樂，檔案名稱為alarm.mp3

暫停撥放：按下會暫停撥放提醒音樂

再給我一次完整的程式碼

6.

按鈕下方在新增一個橘色的分隔線

然後下方幫我新增代辦事項的功能，風格要跟ToDoList一樣

代辦事項有核取方塊，還有一個清除完成事項的功能按鈕

再給我一次完整的程式碼

7.

幫我加一張背景圖片，檔案名稱是bg.jpeg。再給我一次三個檔案的完整程式碼