作者彙整： Wwhealth Lam

情緒微日記

(function() {
// 避免與WordPress衝突的立即調用函數表達式

// 設定今天日期為預設
const today = new Date().toISOString().split(‘T’)[0];
document.getElementById(‘mood-date’).value = today;

// 設定預設就寢時間為晚上10點
document.getElementById(‘mood-bedtime’).value = ’22:00′;

// 儲存記錄數組
let moodEntries = [];

// DOM 元素
const moodSlider = document.getElementById(‘mood-slider’);
const moodValue = document.getElementById(‘mood-value’);
const moodForm = document.getElementById(‘mood-journal-form’);
const historySection = document.getElementById(‘mood-history-section’);
const entriesList = document.getElementById(‘mood-entries-list’);

// 更新心情指數顯示
moodSlider.addEventListener(‘input’, function() {
moodValue.textContent = this.value;
});

// 設定心情滑塊顏色
function updateSliderColor(value) {
const percent = ((value – 1) / 9) * 100;
const colorStart = [239, 68, 68]; // 紅色 (#ef4444)
const colorMid = [245, 158, 11]; // 黃色 (#f59e0b)
const colorEnd = [16, 185, 129]; // 綠色 (#10b981)

let r, g, b;
if (percent new Date(b.date) – new Date(a.date));

sortedEntries.forEach(entry => {
const entryEl = document.createElement(‘div’);
entryEl.style.padding = ’16px’;
entryEl.style.borderRadius = ‘8px’;
entryEl.style.backgroundColor = ‘#fff’;
entryEl.style.boxShadow = ‘0 1px 3px rgba(0, 0, 0, 0.1)’;

// 根據心情指數設定邊框顏色
let borderColor;
if (entry.mood <= 3) borderColor = '#ef4444'; // 紅色 else if (entry.mood {
const [hours, minutes] = timeStr.split(‘:’);
return `${hours}:${minutes}`;
};

// 設定 HTML 內容
entryEl.innerHTML = `

${entry.thought ? `

` : “}

`;

entriesList.appendChild(entryEl);
});
}

// 全局函數方便在 HTML 中調用
window.deleteMoodEntry = function(id) {
if (confirm(‘確定要刪除此記錄嗎？’)) {
moodEntries = moodEntries.filter(entry => entry.id !== id);
updateUI();

// 如果沒有記錄，隱藏歷史區塊
if (moodEntries.length === 0) {
historySection.style.display = ‘none’;
}

showNotification(‘記錄已刪除！’);
}
};

// 顯示通知
function showNotification(message) {
const notification = document.getElementById(‘mood-notification’);
notification.textContent = message;
notification.style.display = ‘block’;

// 2秒後隱藏
setTimeout(() => {
notification.style.display = ‘none’;
}, 2000);
}

// 為心情滑塊添加自定義樣式
const styleElement = document.createElement(‘style’);
styleElement.textContent = `
#mood-slider {
-webkit-appearance: none;
appearance: none;
height: 8px;
outline: none;
border-radius: 10px;
}

#mood-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(–thumb-color, #5D5CDE);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#mood-slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(–thumb-color, #5D5CDE);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
`;
document.head.appendChild(styleElement);
})();