Skip to content
OverviewSolutions
33
Comments
18
P

Johnny Gérard

@johnnygerardBelgium880 points

Frontend Engineer

Latest solutions

View more solutions

Latest comments

  • Daniel Nwachukwu•110
    @Dannyx-huberf
    What are you most proud of, and what would you do differently next time?

    ability to use Grid and Flex without stress

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

    i encountered challenges with the hamburger menu because it was my first time of doin it but after much thinking and the help of depsek aii overcomed it

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

    my github please if anybody can help me i would appreciate when i run my code with live server it works perfectly but when i visit my site in github i shows only the html leaving out the markup and imgs i need serious help it happened with my last challenge too

    used grid and flex

    1
    P
    Johnny Gérard•880
    @johnnygerard

    The image URLs are not correct.

    Your website is sending requests like GET https://dannyx-huberf.github.io/images/icon-hamburger.svg. You're getting 404 responses because your website is at https://dannyx-huberf.github.io/landingPage/.

    You should use relative paths.

    You can try <img src="./images/icon-hamburger.svg" alt=""> instead of <img src="/images/icon-hamburger.svg" alt="">.

  • Yacine Ragueb•370
    @Yaciine19
    What specific areas of your project would you like help with?

    I need help implementing logic to handle invalid dates entered by the user, such as 31/04/1991 (since April has only 30 days).

    Responsive Age calculator app

    #react#tailwind-css#animation
    2
    P
    Johnny Gérard•880
    @johnnygerard

    Sorry, I thought you were asking for how to compute the age.

    For the date validation, I used this function:

    const isNonexistent = (date: Date, year: number, month: number, day: number): boolean => {
  return date.getFullYear() !== year
    || date.getMonth() !== month
    || date.getDate() !== day;
}

    Here is a better function:

    /**
 * Validates if the given year, month, and day form a valid date.
 *
 * @param {number} year - The year to validate.
 * @param {number} month - The month to validate (1-12).
 * @param {number} day - The day to validate.
 * @returns {boolean} True if the date is valid, otherwise false.
 */
const isValidDate = (year: number, month: number, day: number): boolean => {
  const date = new Date(year, month - 1, day);
  return (
    date.getFullYear() === year &&
    date.getMonth() === month - 1 &&
    date.getDate() === day
  );
};
    Marked as helpful
  • Yacine Ragueb•370
    @Yaciine19
    What specific areas of your project would you like help with?

    I need help implementing logic to handle invalid dates entered by the user, such as 31/04/1991 (since April has only 30 days).

    Responsive Age calculator app

    #react#tailwind-css#animation
    2
    P
    Johnny Gérard•880
    @johnnygerard

    Hello Yacine,

    I already wrote a detailed explanation for this challenge.

    Hopefully, that helps you.

    Good day.

    Marked as helpful
  • P
    Karolina Pietraś•40
    @ilierette
    What are you most proud of, and what would you do differently next time?

    I'm really proud of that I remember a lot after that long break I had, and I have something to return. I general it looks really close to design.

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

    I need to learn how to use Figma, but I googled everything that I couldn't find in UI (like drop-shadow).

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

    I struggle to understand where use px, em and rem and about accessibility.

    QR Code

    3
    P
    Johnny Gérard•880
    @johnnygerard

    Hello,

    I see that your images are not loading. It is probably because they are in the wrong folder. I think Netlify uses /public.

    So you can move images/favicon-32x32.png to public/images/favicon-32x32.png.

  • Mobina Esmati•360
    @mobina-dev-2001
    What challenges did you encounter, and how did you overcome them?

    I had a bit of a challenge with the showcasing different images in different widths. It was solved by giving the image element a srcset attribute and specifying the width of each image.

    Product preview card component

    1
    P
    Johnny Gérard•880
    @johnnygerard

    There is a mismatch with your breakpoint. You should use the same value.

    You used 650px for the media query in your CSS and 600px for sizes attribute in your HTML.

    Marked as helpful
  • P
    Johnny Gérard•880
    @johnnygerard

    Note that the design file is not strictly following the design system which specified a letter spacing of -1px for most of the typography. That explains the visual difference.

View more comments