Self Care Center: Solo Project

Project Overview

Self Care Center is a self-guided solo project as part of the Turing Mod 1 Front-End coding program.

My goal was to create a affirmation/mantra generator, with the following functionality:

• Match original comp visual spec.
• Generate a random affirmation or mantra using existing and updatable arrays.
• Receive Message button is greyed out and unavailable until affirmation or mantra radio buttons are selected.
• Upon click of "Receive Message" button, a brief loader replaces the Buddha icon and the text fades in.
• Upon receiving the message, the user is given a "CLEAR" button in order to clear the message. Upon doing so the button and message are replaced with the Buddha icon using a fade transition.
• Site is scalable for a number of screen ratios and resolutions.

Setup

• The repository is available at https://github.com/ermatlock/self-care-center
• Fork this project to your own Github account
• Clone the repository to your local machine
• cd into the project

Instructions

Initial Load Screen

Upon inital load the user is greeted with a clean, simple layout featuring a selection section and a message section.

Select Message Type

The "receive message" button is greyed out until selecting either an affirmation or mantra.

Receive message

After selecting one of the two options, click on the "receive message button" to receive your randomized message. There will be a brief loader followed by the message. You can click as many times as you like to choose another randomized message.

Clear message

If you wish you can also clear the message with the "clear button". The text will disappear and be replaced by the Buddha icon. May your message bring you good health!

Future Features

• User can add their own message
• User can favorite a message
• User can delete a message
• User never sees a repeated message
• All Messages interface
• Login Page
• Additional CSS features
• Local Storage

Technologies Used

• Javascript
• HTML
• CSS

Contributors

• Eric Matlock - https://github.com/ermatlock
• Forked from Turing School Software and Design - (Base Javascript, HTML, CSS)