Skip to content
OverviewSolutions
3
Comments
8
Fexxix
@Fexxix

All comments

  • Fexxix•230
    @FexxixPosted over 1 year ago

    It's good and it's nice you didn't get any accessibility errors but I think that I will point out a few things:

    • I, as a user, would prefer if the theme switcher, select, and search icons didn't animate indefinitely.
    • I think you forgot to change the input font color based on theme.
    • The text shadow in the details page is kinda uncomfortable and I personally don't like it.
    • When viewing details in succession (clicking through borders), the back button doesn't move backward by 1 so you might wanna look into that. (This might be the intended behaviour so I am sorry in case it is).
    Marked as helpful
    0
  • Fexxix•230
    @FexxixPosted over 1 year ago

    I love it! I had no intention to do this one when I saw the some solutions but this one changed my mind. You have inspired me. I love all the hover effects and text animations. It looks very cool. But just like last time, I think the scroll bar could use some less width. Try using a different property(like width instead of min-width) or a different unit.

    Marked as helpful
    1
  • vinu cyril•980
    @vinumanSubmitted over 1 year ago

    The share component becomes active on hover. However, i gave it a position absolute relative to the body causing it to change position when screen width decreases.

    I tried changing the position right based on the screen width change using JS, but that didn't help as I hoped.

    Little JS

    1
    Fexxix•230
    @FexxixPosted over 1 year ago

    You shouldn't need JS for share button this. Use before and after pseudo elements. This use case is like their reason for existing.

    and if you did want to use JS, it should have been like this:

    shareButton.addEventListener("click", showShareOptions)
shareButton.addEventListener("mouseover", showShareOptions)

function showShareOptions() {
  share.classList.add("show")

  shareButton.removeEventListener("click", showShareOptions)
  shareButton.removeEventListener("mouseover", showShareOptions)
  shareButton.addEventListener("click", hideShareOptions)
  shareButton.addEventListener("mouseleave", hideShareOptions)
}

function hideShareOptions() {
  share.classList.remove("show")

  shareButton.addEventListener("click", showShareOptions)
  shareButton.addEventListener("mouseover", showShareOptions)
  shareButton.removeEventListener("click", hideShareOptions)
  shareButton.removeEventListener("mouseleave", hideShareOptions)
}

    Of course, this is not the most optimal approach and can be improved.

    0
  • Fexxix•230
    @FexxixPosted over 1 year ago

    Everything seems detailed there's really nothing wrong except two parts:

    • When customizing a scroll bar, always keep in mind that you should never use units for it's width (and height if your setting it) that scale up or down when zoomed in or out, your scroll bar does scale based on zoom and it shouldn't since it makes the UI look ugly so I think you should fix it. Personally, I use viewport units for this.

    Pro tip: You should use hover states for the scroll bar as well to make it visible only when needed. I'm suggesting it because the default ones do that.

    • This one is just me being nitpicky. I like the subtle animation for when the sign in modal appears but what I don't like is that it just erases itself out of existence when you close it, same goes for the hamburger nav menu. Again, this is pretty opinionated so you don't have to fix it if you don't want to.

    I could only list the things I thought you should fix since I wouldn't be able to list all the good parts of your solution. In fact, the things I did mention aren't all that important either. I guess what I am saying is that it just simply looks really cool and amazing and there isn't much wrong with it.

    Marked as helpful
    1
  • Fexxix•230
    @FexxixPosted over 1 year ago

    I think it's pretty good but its overflowing on my screen so might wanna look into that.

    this is just extra stuff since it's not letting me comment with a comment this short.

    Try adding an Exclude Duplicate and an Include Spaces option. I made a password generator just like this when I started out and the exclude duplicate option was kind of tough for me as a beginner. I would like to see how you implement it in to your code as an experienced front end coder.

    Marked as helpful
    1
  • mohammad salih•220
    @mohammadsalihSubmitted over 1 year ago

    I recently completed a front-end challenge to create a website landing page with multiple sections. The task was challenging, but not overly difficult. I'm excited to share my solution on a website that posts front-end challenges and would love feedback from fellow developers on how I can improve my code and make it cleaner. Any suggestions are welcome!

    dark theme landing page

    2
    Fexxix•230
    @FexxixPosted over 1 year ago

    It looks professional and the resposiveness is also good. I won't point out the alt img text problem since @Finney06 already briefed you on that. The only thing I noticed that was off was the input at the bottom of the page. It could use a bigger font and a placeholder text. You can get rid of the default border and outline by:

       border: none; 
   outline: none;
   outline-color: transparent; // this is preferable if you are taking contrast theme users into account

    Then you could utilize box shadow or a border to match your theme and give it a pleasing look. Other than that, superb stuff. Happy Coding!

    Marked as helpful
    0
  • Fexxix•230
    @FexxixPosted over 1 year ago

    Came over when I saw you liked my solution. After checking this out, I couldn't help but comment. Simply Beautiful. Probably the best solution for this one I have seen. Not just design-wise but also performance wise. Great Work! About the blur feature thought, I think you could do something like .grid-section:has(.country-card:hover) .country-card:not(:hover) to blur all grid items except the one being hovered on.

    Marked as helpful
    1
  • .•50
    @ProceduralFoxSubmitted almost 2 years ago

    I'd be grateful for any sort of review really, but I'd be especially curious about any views on my handling of mutations as well as the validity of nesting my supabase api calls inside of requests to the next.js api pages.

    Kanban (Next.js, Supabase)

    1
    Fexxix•230
    @FexxixPosted almost 2 years ago

    Awesome work tbh, I am also gonna tackle this after some time, I don't have any experience in NextJS so I can't really comment on that but I do have some things to say about the styling. For example, you could remove the default outlines on the inputs and and introduce some animations where the dialog boxes appear. Again, good job and I will use this as reference so thanks a lot.

    1