All solutions

What are you most proud of, and what would you do differently next time?

Implementation of the radio buttons I created for the tip selection.

What challenges did you encounter, and how did you overcome them?

I struggled with the following things:

• How to keep the custom tip a radio as well as make it a type number when the user interacts with it. I ended up making a separate element and changed that to input type number on interaction.
• Displaying error messages to screen readers. I used aria-invalid and aria-describedby to solve that.
• Styling the background color for tip selection labels when it's active: Used active state to conditionally do that.

What specific areas of your project would you like help with?

I would appreciate any feedback! :) Thank you!

What are you most proud of, and what would you do differently next time?

• 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

What challenges did you encounter, and how did you overcome them?

• 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.

What specific areas of your project would you like help with?

• 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!

What are you most proud of, and what would you do differently next time?

I'm happy with the end result.

What challenges did you encounter, and how did you overcome them?

None, however, I did learn a new thing that I could use svg as a value for list-style-type

What specific areas of your project would you like help with?

I'm open to any feedback! :) Thanks!

What are you most proud of, and what would you do differently next time?

• CSS for tooltip.

What challenges did you encounter, and how did you overcome them?

• CSS took a long time for active state. I used z-index to show tool tip on top of other children.

What specific areas of your project would you like help with?

• Any feedback on how I can improve this would be helpful!

What are you most proud of, and what would you do differently next time?

I learned sass and implemented this landing page.

What challenges did you encounter, and how did you overcome them?

Positioning the hero image. I used flow layout as well as element for changing the image based on the screen width.

What specific areas of your project would you like help with?

I am open to any suggestions/feedback! Also, this is my first time implementing Sass. Any suggestions on how I can improve?

Thank you!

What are you most proud of, and what would you do differently next time?

I'd try grid next time.

What challenges did you encounter, and how did you overcome them?

Aligning the vertical line and number. I used transform: translateX(-50%);

What specific areas of your project would you like help with?

Any feedback on how I can improve this would be helpful!

What are you most proud of, and what would you do differently next time?

Using grid-template-areas to align the cards

What challenges did you encounter, and how did you overcome them?

I had fun building it!

What specific areas of your project would you like help with?

Any feedback is appreciated! Thank you!

What are you most proud of, and what would you do differently next time?

Using grid-template-areas to align the cards

What challenges did you encounter, and how did you overcome them?

Card alignment: utilized CSS Grid

What specific areas of your project would you like help with?

Any feedback is appreciated! Thank you!

What are you most proud of, and what would you do differently next time?

Any feedback is appreciated! Thank you!

What challenges did you encounter, and how did you overcome them?

To display different images for mobile and desktop screens, I have utilized the element.

What specific areas of your project would you like help with?

Any feedback is appreciated! Thank you!

Any feedback is appreciated! Thank you!

Any feedback is appreciated! Thank you!

Any feedback is appreciated! Thank you!

Any feedback is appreciated! Thank you!

Any feedback is appreciated!