Skip to content
OverviewSolutions
15
Comments
4
Wismal
@Wismal

All comments

  • mrcordova•1,360
    @mrcordovaSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to figure out how to use js to change the classes of the share button.

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

    working with the svg image and making the tooltip. I used the filter in css to change the color and js to switch them out when an event was triggered. Tooltip I got from googling.

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

    How can I make the tooltip better?

    Article preview component using flex and js

    1
    Wismal•220
    @WismalPosted 7 months ago

    ** Hi mrcordova! **

    First of all, good job. I notice you wanted some ideas to make the tooltip better.

    I recommend using transitions. Especially in hovers, a transition will make your popup sightly. A good duration for single transitions like this one are between 100-400ms.

    ** Hope it helped **

    Marked as helpful
    0
  • Wismal•220
    @WismalPosted 9 months ago

    Hi, good job! You can do a very easy responsive design if you put a max-width instead of a fixed width and some flex.

    Something more. Try to put the number notification to zero as a subtitute of deleting it by changing the innerText/innerHtml Hope it helps

    0
  • Wismal•220
    @WismalSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Next time I'll analyse better the images because the bold sentences are links. A reminder for my future projects. In this case it didn't matter, so I chose to leave it like that.

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

    Nothing special. Only I thought for creating the circles you needed to custom dots, but it was just a span with a border-radius: 50%

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

    It's a good practice to nest CSS like that? Check the .message in the style.css

    Pure JS with flex

    1
    Wismal•220
    @WismalPosted 9 months ago

    I don't know why but some style doesn't appear in the design comparison

    0
  • Wismal•220
    @WismalPosted over 1 year ago

    In your parent object, in this case the body, I recommend you to use the properties display:flex or display:grid. Both of them are indispensable for learning front-end. If you use flex, then you have to write "justify-content: center" (centers horizontally) and "align-items: center" (centers vertically). Later, the property "height: 100vh" to ensure that the body takes all the height.

    ps: if you use grid, is the same, but you can use the property "place-content: center" instead of the justify and align

    0