以下は、ユーザーの要望に基づいたアプリの実装例です。セキュリティに配慮し、evalや他のサイトへの遷移、リダイレクトなどは行わないようにしています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mood Quotes App</title>
</head>
<body>
<h1>Mood Quotes App</h1>
<button onclick="displayQuote('happy')">Happy</button>
<button onclick="displayQuote('sad')">Sad</button>
<button onclick="displayQuote('anxious')">Anxious</button>
<button onclick="displayQuote('tired')">Tired</button>
<button onclick="displayQuote('irritated')">Irritated</button>
<button onclick="displayQuote('random')">Random</button>
<h2 id="quoteText"></h2>
<script>
const quotes = {
happy: [
"Why fit in when you were born to stand out? - Dr. Seuss",
"Happiness is not something ready made. It comes from your own actions. - Dalai Lama",
"The best way to predict the future is to create it. - Peter Drucker",
// ...
],
sad: [
"The only way out of the labyrinth of suffering is to forgive. - John Green",
"Tears are words that need to be written. - Paulo Coelho",
"Life is not about waiting for the storm to pass, but learning to dance in the rain. - Vivian Greene",
// ...
],
anxious: [
"Worrying does not take away tomorrow's troubles, it takes away today's peace. - Randy Armstrong",
"You must learn to let go. Release the stress. You were never in control anyway. - Steve Maraboli",
"Don't be pushed around by the fears in your mind. Be led by the dreams in your heart. - Roy T. Bennett",
// ...
],
tired: [
"Rest when you're weary. Refresh and renew yourself, your body, your mind, your spirit. Then get back to work. - Ralph Marston",
"It's time to pause and give yourself permission to be a human being, not a human doing. - Michael Hyatt",
"Tired minds don't plan well. Sleep first, plan later. - Walter Reisch",
// ...
],
irritated: [
"Anger and intolerance are the enemies of correct understanding. - Mahatma Gandhi",
"Don’t let the behavior of others destroy your inner peace. - Dalai Lama",
"When you are offended at any man's fault, turn to yourself and study your own failings. Then you will forget your anger. - Epictetus",
// ...
]
};
function displayQuote(mood) {
const quoteElement = document.getElementById("quoteText");
if (mood === 'random') {
const allQuotes = Object.values(quotes).flat();
const randomQuote = allQuotes[Math.floor(Math.random() * allQuotes.length)];
quoteElement.textContent = randomQuote;
} else {
const quoteList = quotes[mood];
const randomQuote = quoteList[Math.floor(Math.random() * quoteList.length)];
quoteElement.textContent = randomQuote;
}
}
</script>
</body>
</html>
```
この例では、ユーザーが「Happy」「Sad」「Anxious」「Tired」「Irritated」のボタンをクリックすることで、それぞれの気分に対応したランダムな名言が表示されます。また、「Random」ボタンをクリックすると、どの気分にも関連しない名言が表示されます。名言は開発者が容易に変更できるように`quotes`オブジェクトに格納されています。
