Animated Mood Pet Journal<\/title>\n <style>\n body {\n font-family: sans-serif;\n background: #f0f0f0;\n padding: 2rem;\n }\n #mood-pet-widget {\n max-width: 400px;\n margin: auto;\n background: #fff;\n padding: 1rem;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n text-align: center;\n }\n #pet-display {\n font-size: 5rem;\n margin-bottom: 1rem;\n display: inline-block;\n position: relative;\n animation: float 3s ease-in-out infinite;\n }\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0); }\n }\n #mood-message, #mood-advice {\n font-size: 1.1rem;\n margin-bottom: 1rem;\n }\n select, textarea, button {\n width: 100%;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n border-radius: 4px;\n border: 1px solid #ccc;\n }\n #journal-entries {\n text-align: left;\n margin-top: 1rem;\n border-top: 1px solid #ddd;\n padding-top: 1rem;\n }\n .entry {\n margin-bottom: 0.75rem;\n }\n .entry time {\n font-weight: bold;\n display: block;\n }\n .bounce { animation: bounce 1s infinite alternate; }\n .shake { animation: shake 0.3s infinite alternate; }\n .spin { animation: spin 1s linear infinite; }\n @keyframes bounce { to { transform: translateY(-10px); } }\n @keyframes shake { to { transform: translateX(5px); } }\n @keyframes spin { to { transform: rotate(360deg); } }\n <\/style>\n<\/head>\n<body>\n <div id=\"mood-pet-widget\">\n <h2>Mood Pet Journal<\/h2>\n <label for=\"pet-select\">Choose your pet:<\/label>\n <select id=\"pet-select\">\n <option value=\"\ud83d\udc36\">\ud83d\udc36 Dog<\/option>\n <option value=\"\ud83d\udc31\">\ud83d\udc31 Cat<\/option>\n <option value=\"\ud83d\udc39\">\ud83d\udc39 Hamster<\/option>\n <option value=\"\ud83d\udc30\">\ud83d\udc30 Bunny<\/option>\n <option value=\"\ud83d\udc22\">\ud83d\udc22 Turtle<\/option>\n <\/select>\n\n <div id=\"pet-display\">\ud83d\udc36<\/div>\n\n <div id=\"mood-message\">How is your pet feeling today?<\/div>\n <div id=\"mood-advice\"><\/div>\n\n <form id=\"mood-form\">\n <select id=\"mood-select\">\n <option value=\"\">— Select Mood —<\/option>\n <option value=\"happy\">\ud83d\ude0a Happy<\/option>\n <option value=\"neutral\">\ud83d\ude10 Neutral<\/option>\n <option value=\"sad\">\ud83d\ude22 Sad<\/option>\n <option value=\"anxious\">\ud83d\ude30 Anxious<\/option>\n <option value=\"angry\">\ud83d\ude20 Angry<\/option>\n <option value=\"excited\">\ud83e\udd29 Excited<\/option>\n <\/select>\n <textarea id=\"mood-note\" rows=\"2\" placeholder=\"Write a thought\u2026\"><\/textarea>\n <button type=\"submit\">Log Mood<\/button>\n <\/form>\n\n <button id=\"toggle-journal\">View Past Entries<\/button>\n <div id=\"journal-entries\" style=\"display:none;\"><\/div>\n <\/div>\n\n <audio id=\"mood-sound\" src=\"\"><\/audio>\n\n <script>\n const petDisplay = document.getElementById('pet-display');\n const petSelect = document.getElementById('pet-select');\n const moodSelect = document.getElementById('mood-select');\n const moodMessage = document.getElementById('mood-message');\n const moodAdvice = document.getElementById('mood-advice');\n const moodSound = document.getElementById('mood-sound');\n const form = document.getElementById('mood-form');\n const note = document.getElementById('mood-note');\n const journalList = document.getElementById('journal-entries');\n const toggleBtn = document.getElementById('toggle-journal');\n\n const STORAGE_KEY = 'animatedMoodPetJournal';\n\n const moodSounds = {\n happy: 'https:\/\/www.soundjay.com\/human\/sounds\/applause-01.mp3',\n sad: 'https:\/\/www.soundjay.com\/human\/sounds\/sigh-01.mp3',\n angry: 'https:\/\/www.soundjay.com\/human\/sounds\/boo-01.mp3',\n anxious: 'https:\/\/www.soundjay.com\/human\/sounds\/heartbeat-01.mp3',\n excited: 'https:\/\/www.soundjay.com\/human\/sounds\/cheering-01.mp3',\n neutral: ''\n };\n\n const moodAnimations = {\n happy: 'bounce',\n sad: '',\n angry: 'shake',\n anxious: 'shake',\n excited: 'spin',\n neutral: ''\n };\n\n const moodAdviceText = {\n happy: \"Give your pet a treat or play a game together!\",\n neutral: \"Let your pet relax or take a nap.\",\n sad: \"Give your pet a cuddle or some quiet time.\",\n anxious: \"Speak softly and reassure your pet.\",\n angry: \"Give your pet space and a calm environment.\",\n excited: \"Take your pet for a walk or play fetch!\"\n };\n\n let journal = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');\n\n function updatePetDisplay() {\n petDisplay.textContent = petSelect.value;\n }\n\n function playMoodSound(mood) {\n moodSound.src = moodSounds[mood] || '';\n if (moodSound.src) moodSound.play();\n }\n\n function applyMood(mood) {\n let text = '';\n switch (mood) {\n case 'happy': text = \"Your pet is feeling great!\"; break;\n case 'neutral': text = \"Your pet is just chilling.\"; break;\n case 'sad': text = \"Your pet looks a bit down.\"; break;\n case 'anxious': text = \"Your pet seems nervous.\"; break;\n case 'angry': text = \"Your pet is grumpy!\"; break;\n case 'excited': text = \"Your pet is super excited!\"; break;\n default: text = \"How is your pet feeling today?\";\n }\n moodMessage.textContent = text;\n moodAdvice.textContent = moodAdviceText[mood] || '';\n petDisplay.className = moodAnimations[mood] || '';\n }\n\n function renderEntries() {\n journalList.innerHTML = '';\n journal.slice(-5).reverse().forEach(entry => {\n const div = document.createElement('div');\n div.className = 'entry';\n div.innerHTML = `<time>${new Date(entry.time).toLocaleString()}<\/time>\n <strong>${entry.pet} - ${entry.mood.toUpperCase()}<\/strong>\n ${entry.note ? `<p>${entry.note}<\/p>` : ''}`;\n journalList.appendChild(div);\n });\n }\n\n form.addEventListener('submit', e => {\n e.preventDefault();\n const mood = moodSelect.value;\n if (!mood) return;\n const entry = {\n pet: petSelect.value,\n mood: mood,\n note: note.value.trim(),\n time: new Date().toISOString()\n };\n journal.push(entry);\n if (journal.length > 50) journal.shift();\n localStorage.setItem(STORAGE_KEY, JSON.stringify(journal));\n updatePetDisplay();\n applyMood(mood);\n playMoodSound(mood);\n renderEntries();\n form.reset();\n });\n\n toggleBtn.addEventListener('click', () => {\n journalList.style.display = journalList.style.display === 'none' ? 'block' : 'none';\n });\n\n petSelect.addEventListener('change', updatePetDisplay);\n moodSelect.addEventListener('change', () => {\n applyMood(moodSelect.value);\n });\n\n if (journal.length) {\n const last = journal[journal.length - 1];\n petSelect.value = last.pet;\n moodSelect.value = last.mood;\n updatePetDisplay();\n applyMood(last.mood);\n }\n\n renderEntries();\n\n const today = new Date().toISOString().split('T')[0];\n const lastEntryDate = journal.length ? journal[journal.length - 1].time.split('T')[0] : '';\n if (lastEntryDate !== today) {\n setTimeout(() => {\n alert(\"Don't forget to check in with your pet today!\");\n },\n 1000);\n\u00a0\u00a0\u00a0 }\n\u00a0 <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Animated Mood Pet Journal Mood Pet Journal Choose your pet: \ud83d\udc36 Dog\ud83d\udc31 Cat\ud83d\udc39 Hamster\ud83d\udc30 Bunny\ud83d\udc22 Turtle \ud83d\udc36 How is your pet feeling today? — Select Mood —\ud83d\ude0a Happy\ud83d\ude10 Neutral\ud83d\ude22 Sad\ud83d\ude30 Anxious\ud83d\ude20 Angry\ud83e\udd29 Excited Log Mood View Past Entries<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-4422","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=4422"}],"version-history":[{"count":5,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4422\/revisions"}],"predecessor-version":[{"id":4428,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4422\/revisions\/4428"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=4422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4422,"date":"2025-06-30T18:50:15","date_gmt":"2025-06-30T23:50:15","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=4422"},"modified":"2025-06-30T18:50:15","modified_gmt":"2025-06-30T23:50:15","slug":"mood-pet-journal","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/mood-pet-journal\/","title":{"rendered":"Mood Pet Journal"},"content":{"rendered":"\n\n\n\n \n Animated Mood Pet Journal<\/title>\n <style>\n body {\n font-family: sans-serif;\n background: #f0f0f0;\n padding: 2rem;\n }\n #mood-pet-widget {\n max-width: 400px;\n margin: auto;\n background: #fff;\n padding: 1rem;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n text-align: center;\n }\n #pet-display {\n font-size: 5rem;\n margin-bottom: 1rem;\n display: inline-block;\n position: relative;\n animation: float 3s ease-in-out infinite;\n }\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0); }\n }\n #mood-message, #mood-advice {\n font-size: 1.1rem;\n margin-bottom: 1rem;\n }\n select, textarea, button {\n width: 100%;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n border-radius: 4px;\n border: 1px solid #ccc;\n }\n #journal-entries {\n text-align: left;\n margin-top: 1rem;\n border-top: 1px solid #ddd;\n padding-top: 1rem;\n }\n .entry {\n margin-bottom: 0.75rem;\n }\n .entry time {\n font-weight: bold;\n display: block;\n }\n .bounce { animation: bounce 1s infinite alternate; }\n .shake { animation: shake 0.3s infinite alternate; }\n .spin { animation: spin 1s linear infinite; }\n @keyframes bounce { to { transform: translateY(-10px); } }\n @keyframes shake { to { transform: translateX(5px); } }\n @keyframes spin { to { transform: rotate(360deg); } }\n <\/style>\n<\/head>\n<body>\n <div id=\"mood-pet-widget\">\n <h2>Mood Pet Journal<\/h2>\n <label for=\"pet-select\">Choose your pet:<\/label>\n <select id=\"pet-select\">\n <option value=\"\ud83d\udc36\">\ud83d\udc36 Dog<\/option>\n <option value=\"\ud83d\udc31\">\ud83d\udc31 Cat<\/option>\n <option value=\"\ud83d\udc39\">\ud83d\udc39 Hamster<\/option>\n <option value=\"\ud83d\udc30\">\ud83d\udc30 Bunny<\/option>\n <option value=\"\ud83d\udc22\">\ud83d\udc22 Turtle<\/option>\n <\/select>\n\n <div id=\"pet-display\">\ud83d\udc36<\/div>\n\n <div id=\"mood-message\">How is your pet feeling today?<\/div>\n <div id=\"mood-advice\"><\/div>\n\n <form id=\"mood-form\">\n <select id=\"mood-select\">\n <option value=\"\">— Select Mood —<\/option>\n <option value=\"happy\">\ud83d\ude0a Happy<\/option>\n <option value=\"neutral\">\ud83d\ude10 Neutral<\/option>\n <option value=\"sad\">\ud83d\ude22 Sad<\/option>\n <option value=\"anxious\">\ud83d\ude30 Anxious<\/option>\n <option value=\"angry\">\ud83d\ude20 Angry<\/option>\n <option value=\"excited\">\ud83e\udd29 Excited<\/option>\n <\/select>\n <textarea id=\"mood-note\" rows=\"2\" placeholder=\"Write a thought\u2026\"><\/textarea>\n <button type=\"submit\">Log Mood<\/button>\n <\/form>\n\n <button id=\"toggle-journal\">View Past Entries<\/button>\n <div id=\"journal-entries\" style=\"display:none;\"><\/div>\n <\/div>\n\n <audio id=\"mood-sound\" src=\"\"><\/audio>\n\n <script>\n const petDisplay = document.getElementById('pet-display');\n const petSelect = document.getElementById('pet-select');\n const moodSelect = document.getElementById('mood-select');\n const moodMessage = document.getElementById('mood-message');\n const moodAdvice = document.getElementById('mood-advice');\n const moodSound = document.getElementById('mood-sound');\n const form = document.getElementById('mood-form');\n const note = document.getElementById('mood-note');\n const journalList = document.getElementById('journal-entries');\n const toggleBtn = document.getElementById('toggle-journal');\n\n const STORAGE_KEY = 'animatedMoodPetJournal';\n\n const moodSounds = {\n happy: 'https:\/\/www.soundjay.com\/human\/sounds\/applause-01.mp3',\n sad: 'https:\/\/www.soundjay.com\/human\/sounds\/sigh-01.mp3',\n angry: 'https:\/\/www.soundjay.com\/human\/sounds\/boo-01.mp3',\n anxious: 'https:\/\/www.soundjay.com\/human\/sounds\/heartbeat-01.mp3',\n excited: 'https:\/\/www.soundjay.com\/human\/sounds\/cheering-01.mp3',\n neutral: ''\n };\n\n const moodAnimations = {\n happy: 'bounce',\n sad: '',\n angry: 'shake',\n anxious: 'shake',\n excited: 'spin',\n neutral: ''\n };\n\n const moodAdviceText = {\n happy: \"Give your pet a treat or play a game together!\",\n neutral: \"Let your pet relax or take a nap.\",\n sad: \"Give your pet a cuddle or some quiet time.\",\n anxious: \"Speak softly and reassure your pet.\",\n angry: \"Give your pet space and a calm environment.\",\n excited: \"Take your pet for a walk or play fetch!\"\n };\n\n let journal = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');\n\n function updatePetDisplay() {\n petDisplay.textContent = petSelect.value;\n }\n\n function playMoodSound(mood) {\n moodSound.src = moodSounds[mood] || '';\n if (moodSound.src) moodSound.play();\n }\n\n function applyMood(mood) {\n let text = '';\n switch (mood) {\n case 'happy': text = \"Your pet is feeling great!\"; break;\n case 'neutral': text = \"Your pet is just chilling.\"; break;\n case 'sad': text = \"Your pet looks a bit down.\"; break;\n case 'anxious': text = \"Your pet seems nervous.\"; break;\n case 'angry': text = \"Your pet is grumpy!\"; break;\n case 'excited': text = \"Your pet is super excited!\"; break;\n default: text = \"How is your pet feeling today?\";\n }\n moodMessage.textContent = text;\n moodAdvice.textContent = moodAdviceText[mood] || '';\n petDisplay.className = moodAnimations[mood] || '';\n }\n\n function renderEntries() {\n journalList.innerHTML = '';\n journal.slice(-5).reverse().forEach(entry => {\n const div = document.createElement('div');\n div.className = 'entry';\n div.innerHTML = `<time>${new Date(entry.time).toLocaleString()}<\/time>\n <strong>${entry.pet} - ${entry.mood.toUpperCase()}<\/strong>\n ${entry.note ? `<p>${entry.note}<\/p>` : ''}`;\n journalList.appendChild(div);\n });\n }\n\n form.addEventListener('submit', e => {\n e.preventDefault();\n const mood = moodSelect.value;\n if (!mood) return;\n const entry = {\n pet: petSelect.value,\n mood: mood,\n note: note.value.trim(),\n time: new Date().toISOString()\n };\n journal.push(entry);\n if (journal.length > 50) journal.shift();\n localStorage.setItem(STORAGE_KEY, JSON.stringify(journal));\n updatePetDisplay();\n applyMood(mood);\n playMoodSound(mood);\n renderEntries();\n form.reset();\n });\n\n toggleBtn.addEventListener('click', () => {\n journalList.style.display = journalList.style.display === 'none' ? 'block' : 'none';\n });\n\n petSelect.addEventListener('change', updatePetDisplay);\n moodSelect.addEventListener('change', () => {\n applyMood(moodSelect.value);\n });\n\n if (journal.length) {\n const last = journal[journal.length - 1];\n petSelect.value = last.pet;\n moodSelect.value = last.mood;\n updatePetDisplay();\n applyMood(last.mood);\n }\n\n renderEntries();\n\n const today = new Date().toISOString().split('T')[0];\n const lastEntryDate = journal.length ? journal[journal.length - 1].time.split('T')[0] : '';\n if (lastEntryDate !== today) {\n setTimeout(() => {\n alert(\"Don't forget to check in with your pet today!\");\n },\n 1000);\n\u00a0\u00a0\u00a0 }\n\u00a0 <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Animated Mood Pet Journal Mood Pet Journal Choose your pet: \ud83d\udc36 Dog\ud83d\udc31 Cat\ud83d\udc39 Hamster\ud83d\udc30 Bunny\ud83d\udc22 Turtle \ud83d\udc36 How is your pet feeling today? — Select Mood —\ud83d\ude0a Happy\ud83d\ude10 Neutral\ud83d\ude22 Sad\ud83d\ude30 Anxious\ud83d\ude20 Angry\ud83e\udd29 Excited Log Mood View Past Entries<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-4422","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=4422"}],"version-history":[{"count":5,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4422\/revisions"}],"predecessor-version":[{"id":4428,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4422\/revisions\/4428"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=4422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}