Skip to content
OverviewSolutions
15
Comments
13
P

Mitali Shah

@MitaliShah320 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Ortaly•1,060
    @ortalyartsSubmitted about 1 year ago
    What specific areas of your project would you like help with?

    I've tried to make this calculator app accessible. Please advise if you spot any accessibility issues, or if you have any other suggestions. Thanks in advance 😊

    Responsive accessible Tip calculator. Vanilla JS & CSS

    1
    P
    Mitali Shah•320
    @MitaliShahPosted 11 months ago

    Hi, @ortalyarts congratulations on completing your project!

    • I noticed a few things that you might want to take a look at:

      • Currently, the bill amount is only accepting integers. It would be nice if users could enter tip amounts with decimals, for example, $146.56.

      • The text for "Tip Amount/Person" and "Total/Person" could be improved in terms of color. Please check the contrast ratio of the colors for accessibility using the webaim.org Contrast Checker.

      • The border color of the "Bill" and "Number of People" input fields does not match the design.

    Overall, great solution!

    I hope this feedback is helpful. Keep up the good work, and happy coding!

    -Mitali

    Marked as helpful
    0
  • P
    Mitali Shah•320
    @MitaliShahPosted 11 months ago

    @Litheesh-kumar

    • Great job on completing this project!

      • Here are some suggestions:

        • Instead of using li::before for adding orange tick marks to the <li>, you can use svg as a value for list-style-type. Check out this article from MDN

        • I noticed that your image is not displayed on the mobile layout. For responsive images, look into this mdn article about <picture>: The Picture element so that mobile and desktop images can change based on which viewport it is.

    • Hope this helps you! Happy coding!

    Marked as helpful
    0
  • P
    Mitali Shah•320
    @MitaliShahSubmitted 11 months ago
    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) =&gt;
    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!

    Time tracking dashboard built using React and styled-components

    #styled-components#vite#react
    2
    P
    Mitali Shah•320
    @MitaliShahPosted 11 months ago

    Hi @CipiVlad

    That absolutely works. I didn't think about adding a class to the styled component.

    I appreciate you taking the time to look at my code; thanks!

    0
  • P
    Mitali Shah•320
    @MitaliShahPosted 11 months ago

    Hi @hassan-12-source

    • I just noticed a few things and wanted to mention:

      • In the mobile layout: As per the design, Current hours and last week's hours are supposed to be on the same line.
      • Currently, in your code, they're in the column. Same with the Daily, Weekly, and Monthly. For the mobile layout, It should be in the same line.

    • Overall, it is a great solution! Keep up the great work! Happy coding! :)

    Marked as helpful
    0
  • P
    Mitali Shah•320
    @MitaliShahPosted 12 months ago

    Hello @HarmonJavier01 , your solution looks great!

    Here something I noticed which might be useful for you.

    For responsive images, look into this mdn article about <picture> element: so that mobile and desktop images can change based on which viewport it is.

    Happy coding!

    Marked as helpful
    0
  • Zakaria Elaroussi•470
    @DepressedPenguinSubmitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    If you resize the page, you will see extra space. I don't know where it is located. If you know tell me thank you 🙂‍

    stats-preview-card-component

    #sass/scss#react
    1
    P
    Mitali Shah•320
    @MitaliShahPosted 12 months ago

    Hi @DepressedPenguin Great solution!

    • About the space you asked: I found a space between the image and content in the mobile viewport. Try removing justify-content: space-evenly; from class _parent_box_d51td_1

    Hope this helps!

    0
View more comments