Skip to content
OverviewSolutions
15
Comments
13
P
Mitali Shah
@MitaliShah

All comments

  • Ortaly•970
    @ortalyartsSubmitted 8 months 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
    Mitali Shah•320
    @MitaliShahPosted 6 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
  • Mitali Shah•320
    @MitaliShahPosted 6 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
  • Mitali Shah•320
    @MitaliShahSubmitted 7 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

    2
    Mitali Shah•320
    @MitaliShahPosted 6 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
  • Mitali Shah•320
    @MitaliShahPosted 7 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
  • Mitali Shah•320
    @MitaliShahPosted 7 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 7 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

    1
    Mitali Shah•320
    @MitaliShahPosted 7 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
  • NovikovIlya•910
    @NovikovIlyaSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    ;)

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

    ;)

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

    ;)

    Article

    1
    Mitali Shah•320
    @MitaliShahPosted 7 months ago

    @NovikovIlya Great job on completing this project! Here are some suggestions:

    • Use a media query to adjust the width of a card. It exceeds 730px.
    • Change font size and padding for desktop. It seems like there is some extra space between the title and paragraph.
    • The mobile layout active tooltip doesn't match the design.
    • Use relative units for font size such as rem instead of px.

    Hope this helps! Happy coding!

    Marked as helpful
    1
  • Quân•120
    @Kwun7826Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Need more practicing

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

    Responsive layout

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

    Responsive layout Should i put a fixed with, or percentage

    Meeting-Page

    1
    Mitali Shah•320
    @MitaliShahPosted 8 months ago

    Hey @Kwun7826 Nice try

    Hope this helps!

    0
  • Ruben•250
    @rugarcia25Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Working with grid is always difficult, so this time i tried to simplify as much as i could.

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

    The grid...

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

    All feedback is welcome.

    Responsive Testimonials Grid Component

    1
    Mitali Shah•320
    @MitaliShahPosted 8 months ago

    Hi @rugarcia25

    Your CSS grid looks great and I think you did an excellent job with it.

    I do have one suggestion, which is entirely optional. You may want to consider updating the font size of the testimonial title to 1.25rem, as this would be a better match with the design.

    Happy coding!

    0
  • Mitali Shah•320
    @MitaliShahPosted 8 months ago

    Hi Garrett, your solution looks great! Here's a suggestion: you may want to consider making the parent of the cards a <ul> and each card a <li> to improve its semantics instead of using div.

    Happy coding!

    0
  • Ruben•250
    @rugarcia25Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm very proud of my self

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

    The media query and it was simple but i didn't see the image of web version :P

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

    All feedback is welcome!

    Responsive Product Card Component

    2
    Mitali Shah•320
    @MitaliShahPosted 8 months ago

    Hello @rugarcia25 , your solution looks great!

    Here are a few things that I noticed which might be useful for you.

    • The cart image is decorative, so the alt must be empty.
    • For responsive images, look into this mdn article about <picture> element:
    Marked as helpful
    0
  • Mitali Shah•320
    @MitaliShahSubmitted 8 months ago
    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!

    Responsive | Product preview card component

    4
    Mitali Shah•320
    @MitaliShahPosted 8 months ago

    Appreciate the feedback, Harsh! Thank you!

    0