Easier ways of writing the grid, especially in tailwind. I feel like I'm writing alot of code somtimes, maybe that's okay.
Johnny Gérard
@johnnygerardAll comments
- @jamesbrown173Submitted 4 months agoWhat specific areas of your project would you like help with?@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
ornpm ci
.Marked as helpful0 - @ValsCodesSubmitted 4 months agoWhat 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
@johnnygerardPosted 4 months agoHello 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 - @codercreativeSubmitted 4 months agoWhat 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!
@johnnygerardPosted 4 months agoHello 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 helpful0 - @Harinivasan30Submitted 9 months ago
All feedback iswelcome thank you in advance
@johnnygerardPosted 9 months agoHello @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 theimages
folder in your code repository.You should also avoid
@import
for the fonts. Prefer using thelink
tags (in thehead
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">
0 - @AnlperrSubmitted 9 months ago
All feedback is welcomed thank you in advance.
@johnnygerardPosted 9 months agoHello @Anlperr,
You should use
<input type="number">
instead the default text type.0 - @WestSophoSubmitted 9 months ago
Any feedback is useful.
@johnnygerardPosted 9 months agoHello @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 - @MercySitieneiSubmitted 9 months ago
any form of feedback is appreciated
@johnnygerardPosted 9 months agoHello 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 formhref="style.css"
. The./
is implicit.Marked as helpful0 - @LucaSofronieSubmitted 9 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?
@johnnygerardPosted 9 months agoThe 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(); }
Marked as helpful1 - @LutpiaIrsadulMSubmitted 9 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
@johnnygerardPosted 9 months agoIf you ask someone to build your application, that is cheating; however, using search engines is actually the norm for professional developers.
1 - @oyesina-paulSubmitted 10 months ago
How do i make my project responsive? Responsive Design Is the most difficult for me.
@johnnygerardPosted 10 months agoHello 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 helpful1 - @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
@johnnygerardPosted 10 months agoHello 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
torating
.Tell me if you find my PR useful.
Good day!
Marked as helpful1 - @johnnygerardSubmitted over 1 year ago@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