Time tracking dashboard built using React and styled-components

Solution retrospective
- I learned how to conditionally change the background-color based on the title value using styled-components
const Wrapper = styled.div` background-color: ${(props) => props.title === "Work" ? "var(--work-light-red)" : props.title === "Play" ? "var(--play-soft-blue)" : props.title === "Study" ? "var(--study-light-red)" : props.title === "Exercise" ? "var(--exercise-lime-green)" : props.title === "Social" ? "var(--social-violet)" : props.title === "Self Care" ? "var(--self-care-soft-orange)" : null}; `; };
-
I began the challenge with a few components and an MVP that mainly consisted of JavaScript logic to manipulate the data and display the current and previous hours based on the view. However, when I started working on the styling, I had to modify the HTML structure to fit the styling requirements. In the future, I would consider planning for this earlier in the project to avoid any issues.
-
Overall, I really enjoyed working on it
- I had difficulty conditionally applying the background color and SVG icons to the cards. I had to brush up on styled-components in order to complete that.
-
Currently clicking or hovering on daily, weekly, and monthly links change the color to
white.
However, I couldn't figure out how to make the default selected link(Weekly) white color. If anyone has any suggestions, I would greatly appreciate it! -
Also, feel free to share any feedback you may have. Thank you!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Mitali Shah's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord