diff --git a/index.html b/index.html new file mode 100644 index 0000000..6f88c71 --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + Regex App + + + + +
+
+
+
Regex App
+
The Online Validator
+ Get Started +
+
+
+
+

Please fill form correctly

+
+
+
+ + +

Wrong input. Must be more than two letters

+

Correct!

+ + +

Wrong input. Must be a valid email address

+

Correct!

+ + +

Wrong input. Must be alphanumeric. Eg. johndoe123

+

Correct!

+ + +

Wrong input. Must be dd-mm-yyyy

+

Correct!

+ + +

Wrong input. Must be a valid url Eg. http(s)://whatever.com

+

Correct!

+ + +

Wrong input. Must be a valid Street Address Eg. No 1, my address, sate, country.

+

Correct!

+ +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..84ef251 --- /dev/null +++ b/script.js @@ -0,0 +1,109 @@ +var fullnameValue = document.getElementById("fullName") +var emailValue = document.getElementById("email") +var usernameValue = document.getElementById("username") +var dobValue = document.getElementById("dob") +var websiteValue = document.getElementById("website") +var streetAddressValue = document.getElementById("streetAddress") + +var fullnameError = document.getElementById("fullNameError"); +var emailError = document.getElementById("emailError") +var usernameError = document.getElementById("usernameError") +var dobError = document.getElementById("dobError") +var websiteError = document.getElementById("websiteError") +var streetAddressError = document.getElementById("streetAddressError") + + +var fullnameSuccess = document.getElementById("fullNameSuccess"); +var emailSuccess = document.getElementById("emailSuccess") +var usernameSuccess = document.getElementById("usernameSuccess") +var dobSuccess = document.getElementById("dobSuccess") +var websiteSuccess = document.getElementById("websiteSuccess") +var streetAddressSuccess = document.getElementById("streetAddressSuccess") + +const myForm = document.getElementById("myForm"); + +const validateForm = (boolValue) =>{ + if(boolValue){ + myForm.addEventListener("sumbit", ()=>{ + console.log("I will submit") + return true + }) + }else{ + myForm.addEventListener("sumbit", ()=>{ + console.log("I will not submit") + return false + }) + } +} + +//FOR FULL NAME +fullNamePatt = /[a-zA-z]{2,}/gi +fullnameValue.addEventListener("change", (e)=>{ + if(fullNamePatt.test(e.target.value) && e.target.value){ + successFunction(fullnameError, fullnameSuccess) + }else{ + errorFunction(fullnameError, fullnameSuccess) + } + validateForm(fullNamePatt.test(e.target.value) && e.target.value) +}) + +//FOR EMAIL PATTERN +var emailPatt = /^[a-z]+@[a-z]+\.com$|^[a-z0-9]+@[a-z]+\.com$/gi +emailValue.addEventListener("change", (e)=>{ + if(emailPatt.test(e.target.value) && e.target.value){ + successFunction(emailError, emailSuccess) + }else{ + errorFunction(emailError, emailSuccess) + } +}) + +//FOR USENAME PATTERN +var usernamePatt = /\w/gi +usernameValue.addEventListener("change", (e)=>{ + if(usernamePatt.test(e.target.value)&& e.target.value){ + successFunction(usernameError, usernameSuccess) + }else{ + errorFunction(usernameError, usernameSuccess) + } +}) + +//FOR DOB PATTERN +var dobPatt = /^[[0-9][0-9]]{0,31}-[0-9][0-9]-[0-9][0-9][0-9][0-9]$/gi +dobValue.addEventListener("change", (e)=>{ + if(dobPatt.test(e.target.value)&& e.target.value){ + successFunction(dobError, dobSuccess) + }else{ + errorFunction(dobError, dobSuccess) + } +}) + +//FOR WEBSITE URL +var websitePatt = /^http:\/\/[a-zA-Z]+\.com$|https:\/\/[a-zA-Z]+\.com$/gi +websiteValue.addEventListener("change", (e)=>{ + if(websitePatt.test(e.target.value) && e.target.value){ + successFunction(websiteError, websiteSuccess) + }else{ + errorFunction(websiteError, websiteSuccess) + } +}) + +//FOR STREET ADDRESS +var streetPatt = /No\s[0-9],\s[a-zA-Z]+,\s[a-zA-Z]+,\s[a-zA-Z]+/gi +streetAddressValue.addEventListener("change", (e)=>{ + if(streetPatt.test(e.target.value) && e.target.value){ + successFunction(streetAddressError, streetAddressSuccess) + }else{ + errorFunction(streetAddressError, streetAddressSuccess) + } +}) + + +function errorFunction(errorName, successName){ + errorName.style.display = "block"; + successName.style.display = "none"; +} + +function successFunction(errorName, successName){ + successName.style.display = "block"; + errorName.style.display = "none"; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f208466 --- /dev/null +++ b/style.css @@ -0,0 +1,161 @@ +*{ + padding:0; + margin: 0; + box-sizing: border-box; +} + +body{ + font-family: "Lato", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.7; + color:#777; + padding: 20px; +} + +.header{ + position: relative; + height: 95vh; + background-image:linear-gradient(to right,rgba(128, 214, 113, 0.801), rgba(40, 180, 133, 0.801)); + clip-path: polygon(0 0, 100% 0, 100% 75vh , 0 100%); +} + +.box-heading{ + position: relative; + top:20%; + width: 80%; + text-align: center; + margin:auto; + text-transform: uppercase; +} + +.main-heading{ + display:block; + font-weight: 400; + color:#ffff; + font-size: 4vw; + letter-spacing: 3vw; + animation: moveInLeft 1s ease-out; +} + +.sub-heading{ + display: block; + font-weight: 400; + color:#fff; + font-size: 2vw; + animation: moveInRight 1s ease-out; + margin-bottom: 50px; +} + + +@keyframes moveInLeft{ + 0%{ + opacity:0; + transform: translate(-100px); + } + 80%{ + transform: translate(10px); + } + 100%{ + transform: translate(0); + opacity: 1; + } +} + +@keyframes moveInRight{ + 0%{ + opacity:0; + transform: translate(100px); + } + 80%{ + transform: translate(-10px); + } + 100%{ + transform: translate(0); + opacity: 1; + } +} + +.btn:link, .btn:visited{ + text-transform: uppercase; + text-decoration: none; + background-color: #fff; + color:#777; + padding:2%; + display:inline-block; + border-radius: 100px; +} + +.btn:hover{ + transform: translateY(-3px); + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); +} + +.btn:active{ + transform: translate(-1px); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +.form-heading{ + text-align: center; +} + +.form-body{ + width:50%; + margin:auto; + height: 100vh; +} + + +input{ + margin-bottom: 2%; + display: block; + border-radius: 100px; + width: 100%; + padding:2%; + color:black; + border: 1px solid rgba(128, 214, 113, 0.801); + outline: none; + animation: moveInLeft 1s ease-out; +} + +button{ + padding:3%; + border-radius: 100px; + border:none; + outline:none; + color: #777; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} +button:hover{ + transform: translateY(-3px); + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); +} + +input:focus{ + box-shadow: 0 3px 20px rgba(40, 180, 133, 0.801); +} + +@media screen and (max-width: 480px) { + .form-body{ + width:90%; + } + } + + +.footer{ + margin-top: 20px; + height: 50px; + background-image:linear-gradient(to right,rgba(128, 214, 113, 0.801), rgba(40, 180, 133, 0.801)); + clip-path: polygon(0 100%, 100% 0, 100% 100% , 0 100%); +} + +.warning{ + color:red; + display:none; +} + +.success{ + color:lightgreen; + display:none +} \ No newline at end of file