Skip to content

add ui - htmml, css and js #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+329 −0
Open

add ui - htmml, css and js #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regex App</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div>
<div class="header">
<div class="box-heading">
<div class="main-heading">Regex App</div>
<div class="sub-heading">The Online Validator</div>
<a class="btn" href="/#formBox" id="btn">Get Started</a>
</div>
</div>
<div class="form-box" id="formBox">
<div class="form-heading">
<h1>Please fill form correctly</h1>
</div>
<div class="form-body">
<form action="" method="GET" id="myForm">
<label for="fullName">Full Name</label>
<input type="text" name="fullName" id="fullName" placeholder="More than 2 letters">
<p class="warning" id="fullNameError">Wrong input. Must be more than two letters</p>
<p class="success" id="fullNameSuccess">Correct!</p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" placeholder="Valid email address">
<p class="warning" id="emailError">Wrong input. Must be a valid email address</p>
<p class="success" id="emailSuccess">Correct!</p>
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="should be alphanumeric">
<p class="warning" id="usernameError">Wrong input. Must be alphanumeric. Eg. johndoe123</p>
<p class="success" id="usernameSuccess">Correct!</p>
<label for="dob">Date of Birth</label>
<input type="text" id="dob" placeholder="dd-mm-yyyy">
<p class="warning" id="dobError">Wrong input. Must be dd-mm-yyyy</p>
<p class="success" id="dobSuccess">Correct!</p>
<label for="website">Webiste URL</label>
<input type="text" name="website" id="website" placeholder="http(s)://website.com">
<p class="warning" id="websiteError">Wrong input. Must be a valid url Eg. http(s)://whatever.com</p>
<p class="success" id="websiteSuccess">Correct!</p>
<label for="streetAddress">Street Address</label>
<input type="text" id="streetAddress" placeholder="No 1,my address, sate, country.">
<p class="warning" id="streetAddressError">Wrong input. Must be a valid Street Address Eg. No 1, my address, sate, country. </p>
<p class="success" id="streetAddressSuccess">Correct!</p>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div class="footer">

</div>
</div>
<script src="script.js"></script>
</body>
</html>
109 changes: 109 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
}
161 changes: 161 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}