Git Product home page Git Product logo

lets-loopin-project's Introduction

Loopin Mood Card

Mood Card Mood Card Mobile

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

lets-loopin-project's People

Contributors

jadetrue avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.