Skip to content
OverviewSolutions
33
Comments
18
P
Johnny Gérard
@johnnygerard

All 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
    @yacineragueb
    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
    @yacineragueb
    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.

  • James Brown•260
    @jamesbrown173
    What specific areas of your project would you like help with?

    Easier ways of writing the grid, especially in tailwind. I feel like I'm writing alot of code somtimes, maybe that's okay.

    responsive grid

    #tailwind-css
    1
    P
    Johnny Gérard•880
    @johnnygerard

    Hi James,

    To avoid committing the node_modules folder in your Git repository, add an entry to your .gitignore file:

    /node_modules/

    When anyone clones your repo, they can reinstall npm packages with npm install or npm ci.

    Marked as helpful
  • P
    Ivaylo Ivanov•260
    @ValsCodes
    What are you most proud of, and what would you do differently next time?

    It took like 1 hour and 30 mins to get something small like this to look as the figma file

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

    I am very new to tailwinds syntax and I found a tailwind cheat sheet to have at ease, I had a very hard time setting up github pages

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

    I would like to get some feedback on the tailwind properties I've used

    QR Code centered div styled with tailwind

    #tailwind-css
    1
    P
    Johnny Gérard•880
    @johnnygerard

    Hello Ivaylo,

    I see that you're using an older version of Tailwind CSS, i.e. major version 2 instead of 3.

    To use the latest version, you should follow the instructions from the official website.

    My second advice is to avoid mixing pure CSS with Tailwind CSS. Only use pure CSS as a last resort.

    For example, you can replace this CSS style rule:

    body {
  background-color: #d5e1ef;
}

    with this HTML:

      <body class="bg-[#D5E1EF]">
  • Christina•240
    @codercreative
    What are you most proud of, and what would you do differently next time?

    I am happy with the solution. Had to do a few workarounds - but overall it was a fun challenge.

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

    I had a strange issue where I could not hide my main wrapper with JS. I had to hide the img and form wrapper separately. Also, in order to handle validation of email inputs purely through my custom JavaScript logic, I had to remove required and type="email attributes from my input element. These attributes triggered the browser's automated validation messages.

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

    ANY and all help very much appreciated!

    Newsletter sign-up with success message built with HTML/CSS/JavaScript

    2
    P
    Johnny Gérard•880
    @johnnygerard

    Hello Christina,

    To improve the picture element, use this code:

    <picture>
  <!-- Desktop hero image -->
  <source
    media="(min-width:768px)"
    srcset="assets/images/illustration-sign-up-desktop.svg"
  />
  <!-- Mobile hero image -->
  <img
    src="assets/images/illustration-sign-up-mobile.svg"
    class="hero-img"
    id="hero-img"
    alt="Orange/red color hero image with tech images"
  />
</picture>

    The fallback is already ensured by the nested img tag and does not need any extra steps.

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

    Hello @Harinivasan30,

    Your image is not loading because you have no images in your repository.

    Based on your HTML <img src="images/image-qr-code.png" alt="">, you should store the QR code image in the images folder in your code repository.

    You should also avoid @import for the fonts. Prefer using the link tags (in the head element):

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
  • P
    Johnny Gérard•880
    @johnnygerard

    Hello @Anlperr,

    You should use <input type="number"> instead the default text type.

  • P
    Johnny Gérard•880
    @johnnygerard

    Hello Mercy,

    I recommend you use link elements for Google fonts, instead of @import.

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">

    This will be a lot better in terms of performance. When you put the font URL within an external CSS stylesheet using @import, you actually delay the loading. The browser first requests your main stylesheet from <link rel="stylesheet" href="./style.css"> and only when downloaded, it will then request your @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');.

    When using relative URLs like href="./style.css", you can use the more compact form href="style.css". The ./ is implicit.

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

    The simplest way to get the age is to compute a date difference between today and the birthdate.

    Let me give you an example:

    Pretend today is 2024-01-23 and the user's birthdate is 2000-02-28.

    Compute the year difference: 2024 - 2000 = 24. It will never be negative as long as the birthdate is in the past.

    Compute the month difference: 1 - 2 = -1. Because we have a negative value, we need to borrow a year and add 12 months.

    Currently the computed age is: 23 years, 11 months and ? days.

    Let us now compute the day difference: 23 - 28 = -5. Again a negative value, let us borrow a month and add the number of days in the previous month (December 2023).

    When borrowing a month, we need to check for a negative value and borrow a year and add 12 months again in that case.

    To get the number of days in the previous month, we can use this JavaScript expression: new Date(2024, 0, 0).getDate(). Note that the second argument (month) is zero-based and the third argument (day) is one-based. By using 0 instead of 1 for the third argument, we get the last day of the previous month instead of the first day of the current month.

    We can now add 31 to -5 which is 26. The computed age is 23 years, 10 months and 26 days.

    We can confirm this by adding the values to the birthdate.

    Birthdate: 2000-02-28

    +23 years: 2023-02-28

    +10 months: 2023-12-28

    +26 days: 2023-12-54

    We can evaluate new Date(2023, 11, 54).toDateString() which gives 'Tue Jan 23 2024'.

    Here my TypeScript code for this:

    static computeAge(year: number, month: number, day: number): Age {
    const today = new Date;
    const currentYear = today.getFullYear();
    const currentMonth = today.getMonth();
    const currentDay = today.getDate();

    let years = currentYear - year;
    let months = currentMonth - month;
    let days = currentDay - day;

    if (months < 0) {
      // Borrow a year
      years--;
      months += 12;
    }

    if (days < 0) {
      // Borrow a month
      months--;
      days += this.getPreviousMonthDays(currentYear, currentMonth);

      if (months < 0) {
        // Borrow a year
        years--;
        months += 12;
      }
    }

    return { years, months, days };
  }

  /**
 * @param month Zero-based month
 * @param year Year
 * @returns Total number of days in the previous month
 */
  private static getPreviousMonthDays(year: number, month: number): number {
    // Day 0 is shifted to the previous month's last day
    return new Date(year, month, 0).getDate();
  }

    Age calculator app solution

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

    If you ask someone to build your application, that is cheating; however, using search engines is actually the norm for professional developers.

  • P
    Johnny Gérard•880
    @johnnygerard

    Hello Oyesina,

    If you read the challenge page, you will see that it has only one layout. To build a responsive layout, you need to start another challenge.

    I can already tell you that @media CSS rule is the main way to make a website responsive.

    Good luck with your projects!

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

    Hello Nrosta,

    I opened a pull request to improve your JavaScript code.

    Inline scripts should be favored over external scripts when the amount of code is small. This saves an HTTP request.

    I also changed a little bit your HTML and renamed rate to rating.

    Tell me if you find my PR useful.

    Good day!

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

    Hello Pranav,

    Even if it works, your solution is overly complicated.

    There is really no need to use observables, the HttpClient, a service class or a separate data.json file.

    Instead, the score and category data can be embedded directly in a component class.

    For small SVG icons, it is better not to use the static assets folder. Otherwise, your page will send 4 extra HTTP requests when it loads. I recommend using inline SVGs. This can be done with SVG templates.

    Now, it is true that there is a slight overhead because of the extra components. It is a trade-off between performance and readability.

  • P
    Johnny Gérard•880
    @johnnygerard

    Hello Wiks,

    I opened a pull request to improve your contact form.

    Other suggestions:

    • Use @use instead of @import (see Sass documentation).
    • Add stylePreprocessorOptions key to angular.json. This allows you to use shorter file paths in your Sass imports (Style preprocessor options).
    • Commit more often. In particular, your initial commit should be the initialization of the Angular project.
    • Use conventional commits (optional). This is a convention followed by Angular and other developers.
    • Overwrite the default Angular README.md with your own. You can use the README-template.md from the starter files.

    I hope you find this feedback useful.

    One last thing I forgot to mention:

    • For simple forms, it is better to use template-driven forms (ngModel directive). You will have less code to write and maintain.
    Marked as helpful