flexbox and grif

Community feedback

• 

  Gabriel Bezerra•270

  @GabrielBezerraGPosted almost 2 years ago

  Hey Arhyel, I went through your code and I'd like to share some things that could be improved:

  • You could style the ".container" div to center the content on the screen. Apply this to the desktop layout using a media query.
  • Change the phone input type to 'tel'
  • The plan buttons should be inputs type 'radio' and have the same 'name' attribute so that only one option can be selected. You could do the same thing you did with the monthly switch where you kept the input hidden. In this case, you would have to verify which one is checked to apply the active style and use it in the finishing up step
  • I noticed there's something wrong with the 'addon' event listener. When the input is clicked, the event fires twice. The preventDefault() method seems to solve it but the input is not always selected in the event depending on where you click, which can cause an error. I'd suggest not to use event.target and choose a different approach.
  • The add-on inputs must have the same 'name' attribute
  • Instead of using .children and .childNodes you could use a querySelector in your parent element to prevent unexpected errors when you change the structure of your code
  • Instead of the 'add' array, I'd verify which add-ons are checked on the submit event. This array is never cleared and it keeps adding elements when an input is clicked
  • Consider breaking your code into smaller pieces using different CSS files and js modules to keep it more organized

  Overall, I think you did a nice job and I hope this helps you finish your project!

  1

  ---

  

  Arhyel Patrick•130

  @ArhyelTarfaPosted almost 2 years ago

  @GabrielBezerraG Thank-you very much Gabriel, I will definitely try and work on those aspects and I hope to get it right this time.

  0
• 

  Paweł Pohl•390

  @Pawel1894Posted almost 2 years ago

  Hey, i have some small tips for you to get closer to finishing this project.

  • I would recommend you doing very easy first step validation. in your function

  function changeStep(step)

  You can check if step is equal to 1 if yes then check if all required inputs contains value. Check each of them separately and if validation isn't fulfilled then for example change color of this input border to red and after use setTimeout function to bring it back to original color after for example 1 second.

  If you want some more detailed help feel free to contact me on my discord Paaaweł#7660

  1

  ---

  

  Arhyel Patrick•130

  @ArhyelTarfaPosted almost 2 years ago

  @Pawel1894 Thank you pawel!! I understand what you mean and I will work on it, I hope to get it this time and yes, I'll contact you if i have anymore questions. Thank you again

  0