Responsive landing page using flex, tailwindcss and javaScript

Community feedback

• 

  Aimal Khan•2,260

  @Aimal-125Posted over 1 year ago

  Use this js code for validation:-

  
  let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  
  function myfunc() {
  if(x.value == "") {
  y.style.visibility = "visible";
  y.innerHTML = "Empty Field";
  y.style.color = "hsl(0, 74%, 74%)";
  q.style.border = "2px solid hsl(0, 74%, 74%)";
  a.style.visibility = "visible";
  }
  else if(!(x.value.match(regex))) {
  y.style.visibility = "visible";
  y.innerHTML = "Please provide a valid email";
  y.style.color = "hsl(0, 74%, 74%)";
  q.style.border = "2px solid hsl(0, 74%, 74%)";
  a.style.visibility = "visible";
  }
  else if(x.value.match(regex)) {
  y.style.visibility = "visible";
  y.innerHTML = "Valid email";
  y.style.color = "green";
  q.style.border = "1px solid hsl(0, 6%, 24%)";
  a.style.visibility = "hidden";
  }
  }
  
  z.addEventListener("click", myfunc);
  

  where z is the pink button. y is the red error image. q is the div in which input element is. x is input type text. a is the p element in which error msg will display.

  Marked as helpful

  0

  ---

  

  SURU EMMANUEL•390

  @suruainoPosted over 1 year ago

  wow, that a whole lot of information. Thanks, I really appreciate.@Aimal-125

  0
• 

  Mohammed Fakih•1,590

  @javascriptor1Posted over 1 year ago

  Hello Suru ,

  Please check my solution where you can find validation for email in Javascript.

  Usually , a regular expression pattern is made then we check user input againt our pattern.

  Marked as helpful

  0
• 

  Matias Ludueña•1,990

  @matiasluduena23Posted over 1 year ago

  Hi @suruaino! good work!

  Your image is not in your code folder, put it in a folder and push again to github. And also use a .jpg image

  Good luck!

  0

  ---

  

  SURU EMMANUEL•390

  @suruainoPosted over 1 year ago

  Honestly I observed that too. I don't know while the image folder is always skipped when I push them together. I will try and find my way around it though. Thanks for your observation. @matiasluduena23

  0
• 

  Abdul Azeez•70

  @Aazeez257Posted over 1 year ago

  Hello @suruaino, try uploading the screenshot to the same file location as the readme file example - screenshot.png not like this images/screenshot.png😊😉

  0

  ---

  

  SURU EMMANUEL•390

  @suruainoPosted over 1 year ago

  Okay, Thanks. I will try that. @Aazeez257

  1