Full stack app to journal and keep track of your overall mood each day of the year, inspired by GitHub's contribution graph.

Overview

Mood Tracker

Mood tracker to journal and keep track of your overall mood each day of the year.

How It's Made:

Tech used: EJS, CSS, JavaScript, Node.js, Express, MongoDB Atlas

Inspired 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.

  • 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.
  • 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.
  • I used Node.js and Express together with MongoDB Atlas to allow the user to create, update, and delete entries for each day.

How It Works:

Select either today's date or a date in the past.

Log your mood and, optionally, add notes about your day.

You can also delete entries as long as they exist!

Future Optimizations:

  • Add user authentication
  • Add settings to allow customizations
  • Add option to delete notes

Lessons Learned:

Building 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.

You might also like...

BCash is an app to help you keep track of who you owe and who owes you money in an easy way. Split your tabs and more.

BCash BCash is an app to help you keep track of who you owe and who owes you money in an easy way. Split your tabs and more. Routes for develpment: lo

Aug 11, 2022

🛠️ Easily track & compare gas costs estimated by Foundry on each of your Pull Requests!

🔥 🛠️ Foundry Gas Diff Reporter Easily compare gas reports generated by Foundry automatically on each of your Pull Requests! How it works Everytime s

Dec 28, 2022

A public board for all the Computer Society and Students to display their profile. An online year-book for you to display your profile in the most creative manner

A public board for all the Computer Society and Students to display their profile. An online year-book for you to display your profile in the most creative manner

Student's Yearbook by IEEE Computer Society Student's yearbook is an open-source project which intends to dispaly the students who will be graduating

Dec 18, 2022

I built a full-stack project using Node, Express, Mongo, webRTC, socket.io, and of course React JS. This project is inspired by the awesome Clubhouse 😊

codershouse-mern - This Project is Under Development. Below are some of the implemented interface and the remaining features will be updated in future

Nov 18, 2022

A simple project to keep track of your activities. It allows basic CRUD operations to organize your to do list.

todo-list A simple project to keep track of todo list. Built With HTML CSS Javascript Webpack Live Demo You can checkout the live version here Getting

Jul 20, 2022

A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery 🦅 Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Dec 30, 2022

To Do list app. Very useful to keep track of daily activities. Made with ❤️, JavaScript and bundle with Webpack

To Do list app. Very useful to keep track of daily activities. Made with ❤️, JavaScript and bundle with Webpack

To Do List ⚙️ This is a To Do list App to practice Javascript and Webpack deployment. Live Demo ⚙️ GitHub Pages: DEMO Tech ⌘⇧ HTML & CSS best practice

Oct 17, 2022

A CLI to write journal for you and save it to a Notion database!

A CLI to write journal for you and save it to a Notion database!

Journal CLI NPM Link A CLI to write journal for you and save it to a Notion database! Demo Installation Run npm i -g journal-notion-cli to install the

Oct 7, 2022

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

Logseq Column-Layout Plugin Journals, linked references, and journal queries can be placed side by side if the minimum screen width is "1850px" or mor

Dec 14, 2022
Owner
Bianca Togonon
Software Engineer at @100Devs
Bianca Togonon
Today began learn about MEAN stack first with Nodejs that is a server side form of javascript. Repository for track of Day by Day improvement track in new Skill.

NodeJs Today began learn about MEAN stack first with Nodejs that is a server side form of javascript. Repository for track of Day by Day improvement t

Rahul Bhati 4 Oct 14, 2022
This is simple To-Do App for managing the daily tasks and to keep track on tasks during the day.

Event Page Todo List. This is simple To-Do App for managing the daily tasks and to keep track on tasks during the day. Built With HTML CSS JavaScript

Miftah Amin 16 Mar 9, 2022
Write something on your contribution graph!

GitWrite Write something on your contribution graph! What is GitWrite? GitWrite is a little tool I developed that lets you add a short message to a ye

yodalightsabr 23 Sep 19, 2022
Grayce Muthui 8 Jun 16, 2022
An unreliable and overall unusable sorting library for numbers with a global cache on the edge.

unsort An unreliable and overall unusable sorting library for numbers with a global cache on the edge. the algorithm This library implements a number

Jonas Wanner 6 May 19, 2022
MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

PlaceRate PlaceRate is a MERN stack application which serves as an online map journal where users can mark and rate the places they've been to. You ca

Yuvraj Virdi 0 May 17, 2022
This is an app that gives you a mood by looking at the weather.

Weather-to-mood It is a basic application which shows user weather and date and by looking at these information it gives a mood. WeatherMoodApp This p

Büşra Akbulut 4 Jun 30, 2022
This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and served with webpack dev server

Todo-List This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and s

Duane David 10 Sep 28, 2022
A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Francis Wayungi 6 Dec 23, 2022
A cross-platform Node app that publishes a LogSeq journal as a blog via Drummer

myLogseqBlog A cross-platform Node app that publishes a LogSeq journal as a blog via Drummer How to install Download the app from the repo. It's a .zi

Dave Winer 14 Jul 23, 2022