Ping Single Column Coming Soon Page | HTML CSS Sass JavaScript

Community feedback

• 

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  Hello Vanza! The amount of extra work you put into this challenge is amazing and I would love to add them into my solution too. However, I've a few questions...

  • How do u redirect your page to display "Thank you!". I don't see any extra html files nor additional line of codes for that redirected page... Would you mind explaining me how things worked?
  • I also don't understand the difference between capturing groups and non-capturing groups in RegEx patterns so could you explain to me in simpler terms?

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pyaetheiN Hi Ricky! Thank you for the questions! Here are the answers to your questions.

  • I use the Netlify built-in form handling that’s enabled by default. It gives me the default "Thank you" page. You can do the same thing by hosting your solution to Netlify and follow the setup guide.
  • The difference between those is the capturing group remembers the matched text while the non-capturing group doesn't. So, for example.

  const sentence = "hello world"
  const captureRegex = /(hello) (world)/
  const nonCaptureRegex = /(?:hello) (?:world)/
  
  const captureMatch = sentence.match(captureRegex)
  const nonCaptureMatch = sentence.match(nonCaptureRegex)
  
  // It remembers the matched string
  console.log(captureMatch[1]) // hello
  console.log(captureMatch[2]) // world
  
  // It doesn't remember the matched string
  console.log(nonCaptureMatch[1]) // undefined
  console.log(nonCaptureMatch[2]) // undefined
  

  So, by using the capturing group, you can recall or use the matched strings later with an array from index number one to index number two in this case. While the non-capturing group doesn't remember the matched string. So, it just returns undefined.

  The number zero index of the array returns all the matched strings.

  console.log(captureMatch[0]) // ["hello world"]
  console.log(nonCaptureMatch[0]) // ["hello world"]
  

  I recommend trying it yourself by copy-paste the code and running the code by yourself. It's going to help you understand what's going on. Feel free to play around with it and ask me more questions about it.

  2

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pyaetheiN I want to share the resources that I used to answer your second question.

  • Regexr - it helps me to test the RegEx
  • Groups and ranges - JavaScript | MDN - I read this documentation to understand Capturing group and Non-capturing group.

  Hopefully, it's helpful to you. 😄

  1

  

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  @vanzasetia Thank you so much for helping me out... everything's adding up to my questions. I really appreciate your time and support on this!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pyaetheiN No problem! 👍

  1