Skip to content
OverviewSolutions
4
Comments
5
Lou
@LouMauriege

All comments

  • Ouss_Ach•810
    @OUSSAMAACHICHESubmitted about 1 year ago

    *Hi there I had many problems with this project. I do not know how to calculate age, and I faced issues with logic. Please, can anyone help me?

    Age calculator app

    1
    Lou•110
    @LouMauriegePosted about 1 year ago

    Hi! You made a pretty good job yet.

    To calculate difference between two dates you can create two dates and subtract them.

    You create the variable date on script.js.line.16, you can create another on with the input values that the user gives you. Then you can subtract those dates, and you'll have the difference between those two dates in milliseconds. After that you just had to divide, this result with the number of milliseconds in one year and the result of it should be the years between your two dates. Then take the modulo of this division and divide it with the numbers of milliseconds in one month and so on till you get the years, month and days between your two dates.

    Hope it will help you :)

    Marked as helpful
    1
  • Lou•110
    @LouMauriegePosted about 1 year ago

    Hi,

    First of all congrats for the job you've accomplished ! :) Your classes are well labeled, your code is clean.

    The main problem I can observe is, you didn't use any "display: flex;" instead of it you're using some span tag where you shouldn't.

    But otherwise you put your image in "display: block;" which is a good trick to get ride of any strange comportment do to the "display: inline-block;".

    If you want to learn about flexbox this website is really good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Then to answer to your question, to add the hover effect, you can create another div inside your <div class="image"> which should have the same size and be on top of you image tag but without background color(transparent). Then when the <div class="image"> is hovered add a background to this new div. To get the eye do the same thing but instead of being same size just put it in the middle with an opacity of 0 and on hover opacity of 100.

    I hope it will help you, feel free to ask more questions if needed.

    0
  • Lou•110
    @LouMauriegePosted about 1 year ago

    Hi,

    Your code is really good, you did it !

    But I can see one thing witch, for me, could be improved. While hovering your equilibrium picture we can see the eye is half transparent, that because its parent has "opacity: 0.625;". To avoid this transparency on the eye, you could take off the "opacity: 0.625" and rather than editing the opacity of the block you could use a color witch is half transparent. To do this simply adds two numbers to the hex code of your color like so : #00FFFF is your color with an alpha of 100% and if you want 50% you just had to convert it in hex witch gives you 32 and so #00FFFF32 is your #00FFFF color with 50% opacity apply on it and your eye will be more visible.

    Hope it will help you !

    Marked as helpful
    1
  • Lou•110
    @LouMauriegePosted about 1 year ago

    Hi,

    Your code is really good, you did it !

    But I can see one thing witch, for me, could be improved. While hovering your equilibrium picture we can see the eye is half transparent, that because its parent has "opacity: 0.5;". To avoid this transparency on the eye, you could take off the "opacity: 0.5" and rather than editing the opacity of the block you could use a color witch is half transparent. To do this simply adds two numbers to the hex code of your color like so : #00FFFF is your color with an alpha of 100% and if you want 50% you just had to convert it in hex witch gives you 32 and so #00FFFF32 is your #00FFFF color with 50% opacity apply on it and your eye will be more visible.

    Hope it will help you !

    1
  • Ramez Gamel•40
    @samcoding90Submitted about 1 year ago

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://www.frontendmentor.io/profile/samcoding90

    Any suggestions on how I can improve are welcome!

    Responsive Nft-Card HTML&CSS

    1
    Lou•110
    @LouMauriegePosted about 1 year ago

    Hi,

    Very clean HTML code ;)

    But you have a small gap below your equilibrium picture. This error makes your two bottom corners look awkward, and this gap became even more visible while hovering the picture.

    You can easily solve this issue by adding "display: block;" to your picture element.

    Hope it will help you !

    0