Skip to content
OverviewSolutions
29
Comments
16

matbac85

@matbac85600 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

  • P
    Srijan Manandhar•450
    @srijanss
    What are you most proud of, and what would you do differently next time?

    I learned how to,

    • Pass the text to the custom web components. And this was possible by adding element in the CustomCheckbox component.
    • use CSS pseudo selector :nth-child to show the strength meter bars and apply colors to it. I had some idea about passing number to nth-child which selects the corresponding child of an element. However, the use of :nth-child(-n + 2) was new to me, and it was really helpful for this case.
    • set internal states to the custom web components and make use of those pseudo selectors in CSS to apply different styles.
    • use RegExp constructor method to match the generated password and calculate the strength.
    What challenges did you encounter, and how did you overcome them?

    I had some issue making the custom range slider.

    • Adding CSS to the built in input['range'] was too time consuming and it was not looking like in the design. So, I decided to make custom range slider.
    • To make it work I had to handle events like mousedown, mousemove and mouseup. - And based on the width of the slider track and screen position of the thumb, we need to calculate the left or right movement based on how much the thumb was dragged across.
    • And then I calculated the percentage of the movement to set value based on the max attribute of the default range slider.
    • Similar, events listener for touch enabled devices were also done using touch events like touchstart, touchmove and touchend.
    What specific areas of your project would you like help with?

    Open for feedback

    Password generator app using web components

    #vite#web-components#accessibility
    1
    matbac85•600
    @matbac85

    At first, I had the impression that your app wasn't working because the strength indicator for your password wasn't responding to the user's choices. When I tested your button, I realized that your strength indicator did work, but it was triggered when the button was clicked.

    I approached it differently. I made the user see the strength of the password before it was generated, based on the selected criteria. I didn't investigate the best practice, but intuitively, I find it more useful to see the impact of the selected options on the password's strength before it's generated. What do you think?

    Aside from this question, which I'm curious to hear your opinion on, I think you've done a really good job.

    Your design is great. It's pixel-perfect in Chrome and Firefox. I'm impressed.

  • Bakhtiar•380
    @b4khtiar
    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?

    ..?

    Vue - Tips Calculator

    #vue#tailwind-css
    1
    matbac85•600
    @matbac85

    Hello,

    I noticed a few things that could enhance the user experience of the Tip Calculator App:

    Display Bug When Selecting Tip Percentage: There seems to be a display issue when selecting a tip percentage. It's not updating as expected visually.

    Error Messages Showing Unnecessarily: Error messages are appearing on the "Number of People" input even when it's not interacted with yet.

    Legibility Issue with Disabled Button: The text on the disabled button is currently hard to read due to its color against the background.

    Design Alignment with the Model: The current design doesn't align perfectly with the provided design model. Some elements might need adjustment.

    App Functionality: It seems like there might be an issue with the overall functionality of the app. It's not functioning as intended.

    To improve the app:

    • Check the logic for updating the display when selecting tip percentages.
    • Ensure error messages only appear when the respective inputs have been interacted with.
    • Adjust the button's text color for better readability when disabled.
    • Review the design elements to match the provided model more closely.
    • Double-check the functionality to ensure calculations and resets work seamlessly.
    • Validation in setTip Function: Update the setTip function to properly handle validation and calculation when selecting tip percentages or entering a custom tip.
    • Error Handling: Ensure error messages are shown correctly based on user input and interactions, particularly focusing on the "Bill" and "Number of People" fields.
    • Button Styling: Adjust the disabled button's text color to ensure it's readable against its background.
    Marked as helpful
  • P
    Kamran Kiani•2,780
    @kaamiik
    What are you most proud of, and what would you do differently next time?

    This challenge was a landing page that has different parts and using media query properly is really important in this challenge.

    What challenges did you encounter, and how did you overcome them?
    • Aligning the images on this page was very tough for me.
    What specific areas of your project would you like help with?

    • First, is my HTML structure correct? Could it be improved? I’d appreciate any suggestions.

    • Regarding the alignment of the phone image, I used negative margins and adjusted visibility with a media query. Is this approach correct?

    • In general, can I write my CSS code more concisely? Which parts should I consider removing?

    • Do you have any recommendations for better coding structure in this challenge?

    • Additionally, for added convenience, I’ve created some functions using Sass mixins. Is this a good practice?

    Workit Landing Page

    #sass/scss#accessibility
    1
    matbac85•600
    @matbac85

    It seems to me that you've done a great job! I remember doing this challenge and it was deceptively simple.

    I see in your CSS code that you write your media queries at each stage, I imagine that's because you're thinking about the three screen sizes and how the elements evolve as you go along, but isn't it safer to put your media queries at the very end?

    I've seen that you've liked all my challenges. Thank you for your support!

    Keep up the good work!

  • matbac85•600
    @matbac85

    The dashboard looks vertically off-centre to me. I think that's because you've left the margins in the desktop version.

    I tried changing the data by clicking on "weekly", "daily" and "monthly", but it didn't work. I haven't managed to look at your source code, so I can't really help you unfortunately.

  • Piyush Bhatt•190
    @Piyushb790
    What challenges did you encounter, and how did you overcome them?

    showing and success page and get back to main-container

    HTML CSS JS

    1
    matbac85•600
    @matbac85

    Hello !

    I see that you haven't followed the design completely. The error message should be next to the label with the same typeface, but in red, and the edge of the input and its background should also be in red.

    In the mobile version, it seems to me that there are extraneous margins. Don't hesitate to use a CSS reset to remove the default settings.

    Your HTML is well coded. I can see that you attach importance to using semantic tags. That's really good.

    I've also just done this challenge and one of my friends, who's an experienced developer, advised me to do this challenge on two HTML pages, one page with the form and another that you arrive at when the form is submitted. The information submitted can be retrieved in the params. Initially, I coded my solution in the same way as you.

    Apart from that, on the whole, it looks great. Well done and all the best for the future.

    Marked as helpful
  • matbac85•600
    @matbac85

    Hello,

    I've just gone through your code and here are my comments and/or advice, bearing in mind that I'm also a beginner.

    General

    • CSS Reset: Consider using a CSS reset or normalization for consistent rendering across browsers.
    • Units: Prefer rem or em units over px for scalability and accessibility.
    • Media Queries: Follow "mobile first" approach, use rem units in media queries.

    Specific CSS Properties

    • height Property: Avoid fixed heights, use percentage or flexible values.
    • width Property: Prefer relative units for better responsiveness.

    CSS Variables

    • Usage: Utilize CSS variables for consistency.

    Recommendations for Improvement

    • Implement CSS reset for consistency.
    • Replace fixed dimensions with relative units.
    • Use rem units in media queries, adopt "mobile first" approach.

    good job and keep up the good work !!

    Marked as helpful
View more comments