Mood Tracker<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f0f8ff;\n color: #333;\n margin: 0;\n padding: 20px;\n }\n h1 {\n text-align: center;\n color: #4CAF50;\n }\n .mood-tracker {\n max-width: 600px;\n margin: 0 auto;\n text-align: center;\n }\n .mood-tracker input[type=\"date\"] {\n padding: 10px;\n margin: 10px 0;\n }\n .mood-tracker select {\n padding: 10px;\n margin: 10px 0;\n }\n .mood-chart {\n max-width: 600px;\n margin: 20px auto;\n text-align: center;\n }\n .save-button {\n display: block;\n margin: 20px auto;\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Mood Tracker<\/h1>\n <div class=\"mood-tracker\">\n <h2>Log Your Mood<\/h2>\n <label for=\"mood-date\">Select Date:<\/label>\n <input type=\"date\" id=\"mood-date\">\n <label for=\"mood\">Select Mood:<\/label>\n <select id=\"mood\">\n <option value=\"\ud83d\ude0a\">\ud83d\ude0a Happy<\/option>\n <option value=\"\ud83d\ude22\">\ud83d\ude22 Sad<\/option>\n <option value=\"\ud83d\ude20\">\ud83d\ude20 Angry<\/option>\n <option value=\"\ud83d\ude03\">\ud83d\ude03 Excited<\/option>\n <option value=\"\ud83d\ude1f\">\ud83d\ude1f Anxious<\/option>\n <option value=\"\ud83d\ude0c\">\ud83d\ude0c Calm<\/option>\n <\/select>\n <button class=\"save-button\" onclick=\"saveMood()\">Save Mood<\/button>\n <\/div>\n <div class=\"mood-chart\">\n <h2>Mood Chart<\/h2>\n <canvas id=\"moodCanvas\" width=\"600\" height=\"400\"><\/canvas>\n <\/div>\n <script>\n function saveMood() {\n const date = document.getElementById('mood-date').value;\n const mood = document.getElementById('mood').value;\n if (!date || !mood) {\n alert('Please select a date and mood.');\n return;\n }\n\n const moodData = JSON.parse(localStorage.getItem('moodData')) || {};\n moodData[date] = mood;\n localStorage.setItem('moodData', JSON.stringify(moodData));\n alert('Mood saved!');\n drawMoodChart();\n }\n\n function drawMoodChart() {\n const moodData = JSON.parse(localStorage.getItem('moodData')) || {};\n const dates = Object.keys(moodData).sort();\n const moods = dates.map(date => moodData[date]);\n\n const canvas = document.getElementById('moodCanvas');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n dates.forEach((date, index) => {\n const x = (index + 1) * (canvas.width \/ (dates.length + 1));\n const y = canvas.height \/ 2;\n const mood = moods[index];\n ctx.font = '2em Arial';\n ctx.fillText(mood, x - 15, y - 20);\n ctx.font = '1em Arial';\n ctx.fillText(date, x - 20, y + 40); \/\/ Adjusted position to avoid overlap\n });\n }\n\n document.addEventListener('DOMContentLoaded', drawMoodChart);\n <\/script>\n<\/body>\n<\/html\n","protected":false},"excerpt":{"rendered":"<p>Mood Tracker Mood Tracker Log Your Mood Select Date: Select Mood: \ud83d\ude0a Happy\ud83d\ude22 Sad\ud83d\ude20 Angry\ud83d\ude03 Excited\ud83d\ude1f Anxious\ud83d\ude0c Calm Save Mood Mood Chart<\/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-1613","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\/1613","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=1613"}],"version-history":[{"count":3,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1613\/revisions"}],"predecessor-version":[{"id":2606,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1613\/revisions\/2606"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=1613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1613,"date":"2025-01-02T00:32:18","date_gmt":"2025-01-02T00:32:18","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=1613"},"modified":"2025-04-05T19:12:15","modified_gmt":"2025-04-06T00:12:15","slug":"faces","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/faces\/","title":{"rendered":"Faces"},"content":{"rendered":"\n\n\n\n \n \n Mood Tracker<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f0f8ff;\n color: #333;\n margin: 0;\n padding: 20px;\n }\n h1 {\n text-align: center;\n color: #4CAF50;\n }\n .mood-tracker {\n max-width: 600px;\n margin: 0 auto;\n text-align: center;\n }\n .mood-tracker input[type=\"date\"] {\n padding: 10px;\n margin: 10px 0;\n }\n .mood-tracker select {\n padding: 10px;\n margin: 10px 0;\n }\n .mood-chart {\n max-width: 600px;\n margin: 20px auto;\n text-align: center;\n }\n .save-button {\n display: block;\n margin: 20px auto;\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Mood Tracker<\/h1>\n <div class=\"mood-tracker\">\n <h2>Log Your Mood<\/h2>\n <label for=\"mood-date\">Select Date:<\/label>\n <input type=\"date\" id=\"mood-date\">\n <label for=\"mood\">Select Mood:<\/label>\n <select id=\"mood\">\n <option value=\"\ud83d\ude0a\">\ud83d\ude0a Happy<\/option>\n <option value=\"\ud83d\ude22\">\ud83d\ude22 Sad<\/option>\n <option value=\"\ud83d\ude20\">\ud83d\ude20 Angry<\/option>\n <option value=\"\ud83d\ude03\">\ud83d\ude03 Excited<\/option>\n <option value=\"\ud83d\ude1f\">\ud83d\ude1f Anxious<\/option>\n <option value=\"\ud83d\ude0c\">\ud83d\ude0c Calm<\/option>\n <\/select>\n <button class=\"save-button\" onclick=\"saveMood()\">Save Mood<\/button>\n <\/div>\n <div class=\"mood-chart\">\n <h2>Mood Chart<\/h2>\n <canvas id=\"moodCanvas\" width=\"600\" height=\"400\"><\/canvas>\n <\/div>\n <script>\n function saveMood() {\n const date = document.getElementById('mood-date').value;\n const mood = document.getElementById('mood').value;\n if (!date || !mood) {\n alert('Please select a date and mood.');\n return;\n }\n\n const moodData = JSON.parse(localStorage.getItem('moodData')) || {};\n moodData[date] = mood;\n localStorage.setItem('moodData', JSON.stringify(moodData));\n alert('Mood saved!');\n drawMoodChart();\n }\n\n function drawMoodChart() {\n const moodData = JSON.parse(localStorage.getItem('moodData')) || {};\n const dates = Object.keys(moodData).sort();\n const moods = dates.map(date => moodData[date]);\n\n const canvas = document.getElementById('moodCanvas');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n dates.forEach((date, index) => {\n const x = (index + 1) * (canvas.width \/ (dates.length + 1));\n const y = canvas.height \/ 2;\n const mood = moods[index];\n ctx.font = '2em Arial';\n ctx.fillText(mood, x - 15, y - 20);\n ctx.font = '1em Arial';\n ctx.fillText(date, x - 20, y + 40); \/\/ Adjusted position to avoid overlap\n });\n }\n\n document.addEventListener('DOMContentLoaded', drawMoodChart);\n <\/script>\n<\/body>\n<\/html\n","protected":false},"excerpt":{"rendered":"<p>Mood Tracker Mood Tracker Log Your Mood Select Date: Select Mood: \ud83d\ude0a Happy\ud83d\ude22 Sad\ud83d\ude20 Angry\ud83d\ude03 Excited\ud83d\ude1f Anxious\ud83d\ude0c Calm Save Mood Mood Chart<\/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-1613","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\/1613","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=1613"}],"version-history":[{"count":3,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1613\/revisions"}],"predecessor-version":[{"id":2606,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/1613\/revisions\/2606"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=1613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}