daltobello / self-care-center-da

Self-Care Center

Abstract:

• This website allows users to receive a mantra or affirmation. After selecting the type of message and clicking a button, a random mantra or affirmation message is displayed to the user. Additionally, users can remove a message if they do not like it and that message will not be displayed to the user again. If a user removes all of the messages, they will be alerted to refresh the page in order to receive a message again.

Installation Instructions:

• git clone this repo to your local machine
• cd into that directory
• git open index.html to open the browser
• Get inspired by affirmations and mantras.

Preview of App:

Context:

• I spent 20 hours working on this project. I am in week three of Mod 1.

Contributors:

[Devin Altobello] (https://github.com/alto-fx)

Learning Goals:

• My learning goal was not only to create a landing page identical to the mockup using HTML and CSS, but also to add functionality to the radio inputs and buttons with JavaScript and DOM manipulation. I wanted to use and grow my understanding of functions that rely on a user event in the browser. I also wanted to get more practice using git commands, pushing code into the remote repo and pulling it back down to my local machine.

Wins + Challenges:

• I refactored my HTML to be more semantic while also using div containers for styling.
• In my CSS file, I stored the colors used throughout the website in CSS variables with semantic identifiers so they can easily be referenced or globally updated.
• Although I revisited the Flexbox Froggy game before beginning this project, achieving the desired layout of buttons was challenging. Paying attention to parent/child relationships between HTML elements and reading up on the CSS box model helped my understanding.
• I am continuing to gain familiarity with using MDN Docs as a tool for research and troubleshooting.