Latest solutions
Dynamic expense chart component using ChartJs, nextjs and tailwind
#chart-js#next#tailwind-cssSubmitted over 1 year ago
Latest comments
- @kvk1999@sjohnston82
It looks great!
One thing you could consider doing is calling your Comment component recursively, which would allow for multiple levels of nesting in comments, instead of replies to replies being at the same level as the original reply.
Marked as helpful - @CasteAwayy@sjohnston82
If you look in the style-guide.md file provided in the download, it shows you the font that is used.
- @Marvin-kamwenji@sjohnston82
Running a javascript function that runs some email regex on the input when it submitted and then setting the input into localStorage when it is validated is all that's needed for the form to validate and carry over the email address to the confirmation page, no server necessary. Although after looking it looks like you had the validation part covered.
Marked as helpful - @Ebi-Tech@sjohnston82
Nice project! A couple of things I would comment on is that since you are using tailwind, its really easy to start with the mobile version first and just add your screen sizes in front of the classes (lg:mt-12) for example for the desktop version. Also, I saw that you were using w-[50%] which can be easily replaced as w-1/2.
For correctly sizing the component, one method I found has been working for me is to pull the design image into a browser tab and then inspect it to get the dimensions instead of just eyeballing it.
Hope this helps.
Marked as helpful - @sjohnston82@sjohnston82
Does anyone know why my styling for the prices wouldn't show up in the screen shot when it does in the live site?
- @garcialexco@sjohnston82
The styling looks great! One thing I noticed was you are not passing the input email to the success page.
This can easily be done by setting the form data into local storage and then retrieving it on the success page:
let userEmail = document.getElementById("emailAddress").value; localStorage.setItem("email", userEmail);
and in a script tag on the success page:
const email = localStorage.getItem("email"); const spanElement = document.getElementsByClassName("user-email-success")[0]; spanElement.textContent = email;
Marked as helpful