Johnny Gérard

@johnnygerard

All comments

James Brown•260
@jamesbrown173Submitted 4 months ago
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
1
Johnny Gérard•640
@johnnygerardPosted 4 months ago
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
0
Ivaylo Ivanov•260
@ValsCodesSubmitted 4 months ago
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
1
Johnny Gérard•640
@johnnygerardPosted 4 months ago
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]">
0

Christina•240

@codercreativeSubmitted 5 months ago

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

Johnny Gérard•640

@johnnygerardPosted 5 months ago

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

Harinivasan30•30

@Harinivasan30Submitted 10 months ago

All feedback iswelcome thank you in advance

QR-code-component

Johnny Gérard•640

@johnnygerardPosted 10 months ago

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">

Anlperr•150
@AnlperrSubmitted 10 months ago
All feedback is welcomed thank you in advance.
Age Calculator App
1
Johnny Gérard•640
@johnnygerardPosted 10 months ago
Hello @Anlperr,

You should use <input type="number"> instead the default text type.
0
WestSopho•350
@WestSophoSubmitted 10 months ago
Any feedback is useful.
Responsive Product Preview Card Component
3
Johnny Gérard•640
@johnnygerardPosted 10 months ago
Hello @WestSopho,

Your Tailwind standalone CLI tailwindcss.exe should not be in your Git repository. In general, binary files should not be committed because they take a lot of space (37.4MB in your case). Only source code should be in your repository (except images which are usually fine).

So, I recommend you add a .gitignore file with your file name as an entry:

/tailwindcss.exe
0
MercySitienei•20
@MercySitieneiSubmitted 10 months ago
any form of feedback is appreciated
qr code component using HTML and CSS
1
Johnny Gérard•640
@johnnygerardPosted 10 months ago
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
0

LucaSofronie•70

@LucaSofronieSubmitted 10 months ago

I struggled a lot with getting the correct time passed since a date because I didn't know what the algorithm should be like, so in the end I chose to count the days between the two dates and divide them by 365.25 to get the years etc. What do you think was the correct approach? Also, I struggled with the 'years', 'months' and 'days' elements in HTML and CSS due to their big font size (they were overflowing). How should I do it in a better way?

Age Calculator - JS CSS HTML

Johnny Gérard•640

@johnnygerardPosted 10 months ago

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

Lutpia•170
@LutpiaIrsadulMSubmitted 10 months ago
i try to use javascript DOM for selecting the rating without googling so the code quite messy, i try several time and this is the best i could do as of now. please, let me know for better method.

thank you
using scss and DOM manipulation
1
Johnny Gérard•640
@johnnygerardPosted 10 months ago
If you ask someone to build your application, that is cheating; however, using search engines is actually the norm for professional developers.
1
Oyesina Paul•90
@oyesina-paulSubmitted 10 months ago
How do i make my project responsive? Responsive Design Is the most difficult for me.
QR code component
3
Johnny Gérard•640
@johnnygerardPosted 10 months ago
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
1
Nrosta•530
@NrotsaSubmitted 10 months ago
Hi, this is my solution for this challenge.

I struggled with writing js code for rate buttons, I'm still a newbie when it comes to js.

If you have any ideas on what I can improve in the code or notice any errors, please let me know.

Feedback is welcome
Interactive rating component
1
Johnny Gérard•640
@johnnygerardPosted 10 months ago
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
1
Johnny Gérard•640
@johnnygerardSubmitted over 1 year ago
Results summary component
2
Johnny Gérard•640
@johnnygerardPosted over 1 year ago
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.
0

Johnny Gérard

All comments

responsive grid

QR Code centered div styled with tailwind

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

QR-code-component

Age Calculator App

Responsive Product Preview Card Component

qr code component using HTML and CSS

Age Calculator - JS CSS HTML

using scss and DOM manipulation

QR code component

Interactive rating component

Results summary component