Jacob Marshall

Latest comments

• 

  Lul•20

  @lulamSubmitted over 2 years ago

  

  Product Card Page using Flexbox

  1

  80
  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  Good job it matches the design well, and has great accessibility!

  To improve it more you may want to look into adding a hover effect for the button, you can do this with:

  button:hover {
  * your css styling goes here*
  }
  

  This helps improve the usability of your components, as it feels more responsive to the user.

  0
• 

  Emmanuel Munyite•510

  @munyite001Submitted over 2 years ago

  

  Interactive Card Details

  1

  20
  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  You may want to explore the element.eventListener("input", ...) more, as this allows you to update the card details on the display whilst the user enters their details.

  I see you have used it to update the formatting of the cardnumber input, but this could use a little work as it breaks when users remove characters and enter them again. I think this may be down to your if statement if(i % 4 == 0 && i < 16) and how you handle i, as when users use backspaces the eventListener i increments, causing the if statement to incorrectly add spaces, and eventually the entry bypasses the if statement. You could also include maxlength in the <input> to limit the number of characters a user may enter.

  Other than that issue, you've followed the design well and your site looks good on mobile and desktop. Good job.

  Marked as helpful

  1
• 

  Tylerdurden230•120

  @TylerDurden230Submitted over 2 years ago

  

  Tip Calculator App

  3

  40
  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  Looks good to me. What bug did you find?

  0
• 

  nachtwurst•40

  @nachtwurstSubmitted over 2 years ago

  

  QR code component made with Flexbox, media query for mobile viewing

  4

  50
  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  Hey nachtwurst, good job on this project, your design looks great on both mobile and desktop.

  Typically in an @media query you only include the classes and attributes you want to change. So for instance if you wanted to change the box-shadow for the container, in your media query you would have .main_container with just a new value for the box-shadow design, instead of everything again.

  This is a useful resource for learning more about them, and applying them to more advanced projects.

  Keep up the good work!

  Marked as helpful

  1
• 

  Usman•350

  @awwsmanSubmitted over 2 years ago

  

  Interactive Card Details Form

  1

  30
  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  Hi Usman, good work. You may have to use border-radius on the input:focus css identifier too to achieve the rounded edges when focused on.

  You can also use EventListeners on form inputs too, allowing you to show errors as the user enters data, instead of telling them when they click the Confirm button.

  cnum.addEventListener("input", () => {
      *check if the form value is only digits here and use if statements to update errors*
  }
  

  Marked as helpful

  1
• 

  Shane Chaffe•900

  @ChaffexdSubmitted over 2 years ago

  

  Card details form

  2

  50
  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  Hi Shane, I like your solution. It looks good on both desktop and mobile. I like the use of type="number" for the month and year, but feel type="text" would be more appropriate for the CVC, as I doubt a user would increment up to a 3 digit number.

  The form validation could use a little work, for example I can place spaces in the card number input, allowing me to enter a string with less than 16 digits which is of course the incorrect format, this can be fixed in the JS by stopping the user from entering a space character, or altering the card number maxlength, or using an error message to say that it should be digits only and not spaces.

  It is also possible to submit the card details when the information is an incorrect format. For example, alphabetical characters can be included in the cardnumber and the submit button will still work. To fix this in your solution, I would expand your validate() function to include regex for each form input, and test the values against this. This could be extended to include an error message too, if the user tries to click the submit button without the correct information you could show that some details are incorrect, or instead grey out the button showing that it is disabled. Greying out the button could be performed with an event listener for hovering over the button calling the validate function, before the user clicks it.

  The CVC can also be accepted as a 1 or 2 digit number which is incorrect, though this is an easy fix requiring the user to enter 3 or 4 digits which can be done with regex or with an if statement focusing on the length.

  Numbers can also be entered as part of the cardholder name, but this is not a big problem. Another small problem is that the user can enter an expired credit card, as the year can be a value for a year which has already passed, for example 21.

  Regardless of these issues, the solution's design is great. Good luck with your next challenge.

  0