Responsive landing page using flex, tailwindcss and javaScript

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.

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.

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!

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