Skip to content
OverviewSolutions
13
Comments
6

Stephen Johnston

@sjohnston82320 points

I am a full stack web developer who loves problem solving and learning new technologies.

Latest solutions

View more solutions

Latest comments

  • Stephen Johnston•320
    @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
  • Stephen Johnston•320
    @sjohnston82

    If you look in the style-guide.md file provided in the download, it shows you the font that is used.

  • Stephen Johnston•320
    @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
  • Stephen Johnston•320
    @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
  • Stephen Johnston•320
    @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?

  • Stephen Johnston•320
    @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