Loopin Mood Card

Acceptance Criteria

• A React component that takes a prop of mood that takes four values; "happy" | "neutral" | "sad" | undefined
• The component renders one of the four states listed above depending on the value of that prop
• Can I click a button to submit my mood if I haven't submitted my mood yet?
• The component also takes a prop of date and displays that back to the user
• Do we have a suite of test or stories for each component used?
• Is the code repository available to download on Github?
• Stretch goal: How will this look and work on mobile?
• Stretch goal: Add an animation to the component to make it pop; maybe the text bounces or slowly gains opacity on its first render.
• Stretch goal: Are there any other features you'd like to see in a daily mood tracker? You don't have to actually built them, but understanding your ideas would great - add comments in the code to explain future ideas

Built with

• CSS (Sass & BEM)
• Flexbox
• CSS Grid
• React

What I have learnt & would like to improve

• I've revisted React and loved working with props to set the mood.
• I would like to change the 'btn' block to be a component in itself to be reused elsewhere if needed.
• Also to be able to chain this up so the buttons do not display if the mood isn't selected.
• Found some fancy border styles online! Ref: https://codepen.io/tmrDevelops/pen/VeRvKX.
• I would have liked to have changed the date to a prop, and had a completed test case using it this way.
• I would have liked to have been able to render the component with both props.

Author

• GitHub - @jadetruexo