{"id":15209101,"url":"https://github.com/bytesbybianca/mood-tracker","last_synced_at":"2025-08-04T18:16:11.535Z","repository":{"id":36982650,"uuid":"505202612","full_name":"bytesbybianca/mood-tracker","owner":"bytesbybianca","description":"Full stack app to journal and keep track of your overall mood each day of the year, inspired by GitHub's contribution graph.","archived":false,"fork":false,"pushed_at":"2022-07-12T05:39:48.000Z","size":90,"stargazers_count":44,"open_issues_count":8,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T01:32:16.621Z","etag":null,"topics":["ejs","fullstack","javascript","mongodb"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bytesbybianca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-19T19:35:59.000Z","updated_at":"2025-01-01T16:10:32.000Z","dependencies_parsed_at":"2022-06-29T03:02:24.595Z","dependency_job_id":null,"html_url":"https://github.com/bytesbybianca/mood-tracker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesbybianca%2Fmood-tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesbybianca%2Fmood-tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesbybianca%2Fmood-tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesbybianca%2Fmood-tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytesbybianca","download_url":"https://codeload.github.com/bytesbybianca/mood-tracker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238825793,"owners_count":19537128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ejs","fullstack","javascript","mongodb"],"created_at":"2024-09-28T07:21:21.710Z","updated_at":"2025-02-14T10:31:54.824Z","avatar_url":"https://github.com/bytesbybianca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mood Tracker\n\n\u003cp align=\"center\"\u003e\nMood tracker to journal and keep track of your overall mood each day of the year.\n\n  \u003cimg src=\"https://github.com/bytesbybianca/readme-assets/blob/main/project-images/mood-tracker-v1.gif?raw=true\"\u003e\n\u003c/p\u003e\n\n## How It's Made:\n\n**Tech used:** EJS, CSS, JavaScript, Node.js, Express, MongoDB Atlas\n\nInspired by GitHub's heatmap contribution graph, I built a mood tracker with 3 different colors to represent the entered overall positive, neutral, or negative mood. \n\n- I used EJS, to dynamically create each square as many times as there are days for the current year, as well as each date on hover and the id for each element.\n- I used JavaScript together with CSS to toggle classes to show and hide the pop up elements, such as the date on hover and the mood entry form.\n- I used Node.js and Express together with MongoDB Atlas to allow the user to create, update, and delete entries for each day.\n\n## How It Works:\nSelect either today's date or a date in the past. \n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/bytesbybianca/readme-assets/blob/main/project-images/mood-tracker-1.png?raw=true\"\u003e\n\u003c/p\u003e\n\nLog your mood and, optionally, add notes about your day.\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/bytesbybianca/readme-assets/blob/main/project-images/mood-tracker-2.png?raw=true\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/bytesbybianca/readme-assets/blob/main/project-images/mood-tracker-3.png?raw=true\"\u003e\n\u003c/p\u003e\n\nYou can also delete entries as long as they exist!\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/bytesbybianca/readme-assets/blob/main/project-images/mood-tracker-4.png?raw=true\"\u003e\n\u003c/p\u003e\n\n## Future Optimizations:\n - Add user authentication\n - Add settings to allow customizations\n - Add option to delete notes\n\n## Lessons Learned: \nBuilding with EJS and JS, I was often making decisions about whether I should create elements or text dynamically or if I should, or even could, manipulate the DOM using JS instead.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytesbybianca%2Fmood-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytesbybianca%2Fmood-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytesbybianca%2Fmood-tracker/lists"}