Skip to content
OverviewSolutions
6
Comments
5
Felix
@felix-stuff

All comments

  • Felix•160
    @felix-stuffPosted 4 months ago

    Really nice solution. Very close to the original design and I really like the levitating hover effect on the cards. Your JS code also looks really clean and nice and way smarter than my solution, but when I look at it I get the impression you have quite much similar code, that you could even simplify more with a single method where you pass matching parameters and make some smart switch case maybe?

    Really cool solution anyways, good job!

    Marked as helpful
    0
  • Felix•160
    @felix-stuffPosted 4 months ago

    Hi @giamimino, I don't want to criticise your solution, but you decided to not use any validation on the input field? Do you need help with that?

    The design is nicely done though. :-) Only a few adjustments and it'd be pixel perfect. If you want some help with the details let me know.

    1
  • errbrokko•80
    @errbrokkoSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I got it running because this one was tougher than the ones before. It's still not perfect though.

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

    Combining Javascript and CSS for responsive layouts was tough. I did not solve my problem fully. See below.

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

    I would like to know how to effectively combine Javascript and CSS in this case. Although my solution seems to work at first, it does run into problems when I toggle a state and then switch from mobile to desktop viewport or vice versa.

    Also, how do I get the "bubble look" for a popup?

    Article Preview with HTML, CSS and JS

    1
    Felix•160
    @felix-stuffPosted 5 months ago

    Hi @errbrokko, I just looked at your solution. It's quite far, but some of the CSS spacing needs a closer look and for the mobile version there are some issues with the popup and the overall design of the card.

    For your questions on how to combine JS and CSS in this case I would recommend reducing the JS to a bare minimum. In my solution I only use one event listener to toggle the share popups visibility. The rest is all done by CSS.

    For the bubble look you are only missing on the little arrow at the bottom of your popup. Maybe check out https://cssarrowplease.com to see how you can use the border property in CSS to create this type of arrow.

    Another thing worth checking out might be the details of position absolute. In my solution I repositioned the popup to be visible in the center of the screen on mobile and moved the little arrow to the right so that its above the share button.

    Marked as helpful
    0
  • Felix•160
    @felix-stuffPosted over 1 year ago

    Hi @vladimir-semeryuk, first of all: great solution, I love the clean JS code and I must admit I needed to get some help on the calculation of months and days and had to steal your beautiful and easy calc function. I was getting really unnecessary complicated with that one.

    One thing I was wondering about in your solution was that I could enter a date in the future and it'd say "-1 years". I don't know if you want to fix this, but I thought I'd point it out.

    Besides that, thank you for your clean solution that inspires me to fix my own. :-)

    0
  • Felix•160
    @felix-stuffPosted over 1 year ago

    Hi @Ferabel, I just saw your solution for this challenge, that I also created yesterday. One thing I noticed was that I can't see the active state on the selected rating number in Chrome.

    And for my solution I used a form element with input type radio and removed the usual radio button design with CSS. Maybe you take a look into my code as inspiration. That way the selected state is easy to accomplish by browser default on click of the corresponding label.

    Besides that, nice solution. :-)

    Marked as helpful
    1