Self-Care Center

Abstract:

The Self Care Center is a web application that allows the user to randomly generate either an affirmation or a mantra at the click of the button. This is a well-being focused application that features soothing colors and smooth styling intended to be relaxing to the user. Selections can be made using a pair of radio buttons, and a new affirmation or mantra is generated every time the "Receive Message" button is clicked. The user will be alerted with a small but noticeable popup if they try to generate a message without first selecting whether they would like to receive a mantra or an affirmation. Once the message has been generated, the user can click "Clear Message" which will remove the current message and replace it with the original meditation icon.

Installation Instructions:

Fork this repository
Clone it down to your machine
cd into the directory
Run open index.html to launch the application in your default browser

Preview of App:

Context:

This is the second solo project this module and was assigned in Week 3 of Module 1. We were given approximately 5.5 days to complete the project. At the time of writing this, I have spent approximately 11.5 hours working on it and was able to complete the minimum required features in just 4 hours and spent the remaining time attempting to tackle more complex additional features.

Contributors:

Rachel Soae Prather, sole contributor

Learning Goals:

The goals of this project were: 1) Successfully recreate a design given a visual comp 2) Create a functional web application that generates random affirmations or mantras per user inputs 3) Complete at least one additional feature from a given list of feature options

This web application was built from scratch using HTML, CSS, and JavaScript. Fonts and colors were given at time of assignment. For my first additional feature, I added error handling on the submission button, which notifies the user if they attempt submission without choosing either the affirmation or mantra option. I also added a clear button, which allows the user to clear a message and rever the message box back to its original state.

I attempted the Intermediate CSS feature, which adds responsive web design, animations, button hover responses, and transitions. I was able to achieve about half the required elements for this feature before running out of time.

Wins + Challenges:

I had a great time learning how to use keyframes and successfully animating several parts of the design to fade in and out, aiding in the user's relaxing experience of the application. I also made great headway in terms of my understanding of the units of measurement used in CSS, best case uses for them, and which are most applicable to creating responsive and accessible applications. Once I improved my understanding of units, I was able to streamline and refactor my responsive web design to meet the needs of almost any device size.

At the start of the project, trying to format and lay out the page using HTML and CSS was incredibly difficult. I spent most of my first two days feeling blind, unsure of the best practices to get my page elements where they needed to be. Learning Flexbox helped a bit, but until I had started practicing with Flexbox hands on I did not realize how powerful it can be. Ultimately, my greatest asset for this project was the MDN documentation. I improved my Googling skills and utilized the many internal links in the MDN articles, which helped me find the information I needed much more quickly and efficiently than in the last project. I also set strict boundaries around how long I allowed myself to struggle before going to study hall for help, which thankfully prevented me from going down a much longer rabbit hole where my radio buttons are concerned.

rachelsoae / Self-Care-Center