MyDiary

Inspiration

I have been a big advocate for mental health since high school. When I was a freshman, I co-founded the De-stress and Wellness Club which hosted speakers, planned an annual school-wide de-stress day, and practiced different techniques for relaxation. In college, I inspired the creation of the position "Director of Health and Wellness" in my sorority. This is because I believe mental health is so important but yet so overlooked. Therefore, I knew I wanted to follow the Wellness track, but I wanted my idea to be different from everything that is already out there. There are hundreds of sites that track what people eat and allow you to rate your mood or write about your day, so I wanted something different. My idea began as a journaling website where users could write in their diary each day, rate their mood and complete the daily prompt. However, I wanted to add more, something that gives users a reason to pick my website specifically over all the choices they had, but I was stuck. When we were handed a bag of chips as a snack, the calorie number was one of the most visible elements on the bag, which made me think. How can I help people track healthy eating without promoting the obsession of calorie counting? I decided to do some research on how to eat healthy when recovering from an eating disorder and took advice from there to form my idea. I decided I wanted it to be focused on diversifying food groups, rating how you felt after you ate specific foods, logging what time you ate to see how long it took you to feel hunger again and to assure you were eating throughout the day. From there, I changed things as I went, but stuck closely to my original ideas.

What it does

MyDiary has 4 main features. The first is a personal diary. Users are able to write a diary entry for that day, rate their mood on a scale of 1-10, make a list of all the ways they were productive, view a calendar that leads to past entries and watch a 1 minute deep breathing video. In the calendar, each day is color-coordinated based on their mood for that day. A 1-4 is red, a 5 is yellow, a 6-10 is green and grey means they did not rate their mood that day. Similarly, users are able to write a journal entry based on the daily prompt. They are able to access a different calendar to view their past entries here as well. The next feature is the food log. This allows users to upload a photo of their meal/food, give it a name, assign it to one of the food groups listed, log the time it was eaten, and give a rating of their enjoyment. Finally, there is the learn more feature. This has a collection of mental health disorders users are able to click on and learn more about how many people have been diagnosed with it, the symptoms and other interesting information. This was designed to remind users they are never alone in their struggles.

How I built it

I built this using HTML to write the code and CSS to style it. This was all done in Visual Studio Code.

Challenges we ran into

I am currently taking a course teaching me HTML and CSS, but I am nowhere near an expert. Therefore, there were a lot of big ideas I had that I had no idea how to execute. The website, www.w3schools.com, was recommended by my professor to teach us all the niche things we might run into with our projects. So, I did a lot of reading on W3 Schools to advance my knowledge over the competition. My biggest challenges were in the beginning because that is when I was learning the most new elements. The spacing of the navigation posed a large challenge because I could not figure out how to allow the styling of the navigation to overwrite the previous styling for the rest of the page. I eventually realized if I included the navigation and footer outside of main, they would not be subjected to the styling. Additionally, I struggled with color scheme a lot. I wanted to incorporate the color yellow, because it is known to be a positive, happy color. However, I wanted to avoid being overly colorful because I did not want the professionalism of the website to be compromised. Another challenge was getting text on the images in the learn more section. I could not figure out how to both get the text on the image and align them correctly on my page. Therefore, I decided to use Phonto to add the text myself. I really like the way these images turned out and feel it was for the better. My largest challenge was definitely with the button elements. I originally wanted the mood tracker to be buttons of facial expressions but could not figure out how to accomplish this. Instead, I made the number rating system, which I feel may end up better, because it gives users more of a broad overview as opposed to limiting them to one emotion per day.

Accomplishments that we're proud of

I am really proud of how many new features I was able to both learn and incorporate. The textarea attribute took me a minute to understand and learn but has been very beneficial. I feel as if it the perfect way to capture a diary entry and I like the way the yellow background makes it pop. Additionally, I am proud of the meditation video. I used Pexels to find the stock video but no video was long enough. Therefore, I had the idea to reverse the video and combine them so users could not tell when one video transitioned to another. I also really like the aesthetics of the learn more page. I feel as if the monochrome theme is very visually appealing but does not categorize disorders to one image that may trigger or upset viewers. Finally, I am really proud of my food log idea. I feel like the idea of eating healthy while not becoming obsessive over it is very difficult and I feel as if logging your daily intake this way would be beneficial.

What we learned

I learned a lot about HTML elements along with CSS styling. I came in with a limited background in both and feel as if I have a much more advanced understanding now. I am now capable of using textarea, making buttons, using accessible color combinations, creating a calendar with clickable elements, displaying the active portion of the code, providing a background image and styling elements so they do not overlap with each other.

What's next for MyDiary

I want to add more information in the learn more section. I did not have time to actually add in the facts and I want to take the time to research each condition to assure I am providing the most accurate information. Additionally, I want to add in more disorders so it is not only limited to the 9 I originally selected. Finally, I want to add in a groups feature that allows people to join groups based on their specific purposes for using the site. For example, if someone recovering from Anorexia was using the site, they could join a support group with other people in the same boat and see they are not alone and help them gain access to a wider support system. However, something like this would need to be monitored as it could become really negative and triggering quickly, so I would need to think of a way to provide people a safe platform to be honest that also does not allow for hateful posts or comments.

Built With

• css
• html