Skip to content

Commit

Permalink
uploading project
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellinfy
ariellinfy committed Dec 26, 2020
0 parents commit 04b0f7a
Show file tree
Hide file tree
Showing 3 changed files with 213 additions and 0 deletions.
55 changes: 55 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Sign Up Today!</h1>
<form id="form">
<!-- Full Name -->
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Full Name" name="name"
required minlength="3" maxlength="100">
</div>
<!-- Phone Number -->
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" placeholder="999-999-9999" name="phone" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</div>
<!-- Email Address -->
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="email@address.com" name="email" required>
</div>
<!-- Website URL -->
<div class="form-group">
<label for="website">Website URL</label>
<input type="url" id="website" placeholder="https://google.com" name="website" required>
</div>
<!-- Password -->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" id="password1" placeholder="Create Password (Min. 8 characters)" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number.">
</div>
<!-- Confirm Password -->
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Confirm Password" name="password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$">
</div>
<button type="submit">Register</button>
</form>
<!-- Error/Success Message -->
<div class="message-container">
<h3 id="message">Don't Hesitate!</h3>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
65 changes: 65 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const form = document.getElementById('form');
const password1El = document.getElementById('password1');
const password2El = document.getElementById('password2');
const messageContainer = document.querySelector('.message-container');
const message = document.getElementById('message');

let isValid = false;
let passwordsMatch = false;

function validateForm() {
// Using Contraint API
isValid = form.checkValidity();
// Style main message for an error
if (!isValid) {
message.textContent = 'Please fill out all fields.';
message.style.color = 'red';
messageContainer.style.borderColor = 'red';
return;
}
// Check to see if passwords match
if(password1El.value === password2El.value) {
passwordsMatch = true;
password1El.style.borderColor = 'green';
password2El.style.borderColor = 'green';
} else {
passwordsMatch = false;
message.textContent = 'Make sure passwords match.';
message.style.color = 'red';
messageContainer.style.borderColor = 'red';
password1El.style.borderColor = 'red';
password2El.style.borderColor = 'red';
return;
}
// If form is valid and passwords match
if(isValid && passwordsMatch) {
message.textContent = 'Successfully Registered!';
message.style.color = 'green';
messageContainer.style.borderColor = 'green';
}
}

function storeFormData() {
const user = {
name: form.name.value,
phone: form.phone.value,
email: form.email.value,
website: form.website.value,
password: form.password.value,
};
// Do something with user data
console.log(user);
}

function processFormData(event) {
event.preventDefault();
// Validate form
validateForm();
// Submit data if valid;
if(isValid && passwordsMatch) {
storeFormData();
}
}

// Event listener
form.addEventListener('submit', processFormData);
93 changes: 93 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
@import url('https://fonts.googleapis.com/css2?family=Sen&display=swap');

html {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
font-family: Sen, sans-serif;
letter-spacing: 2px;
display: flex;
justify-content: center;
align-items: center;
background: #c9ced3;
}

.container {
width: 480px;
height: 630px;
background: white;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.4);
}

/* Form */
form {
width: 90%;
}

.form-group {
height: 65px;
}

label {
position: relative;
bottom: 3px;
}

input {
width: 100%;
height: 34px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
outline: none;
box-sizing: border-box;
transition: all 0.3s;
}

input:valid {
border: 1px solid green;
}

input:invalid {
border: 1px solid red;
}

button {
cursor: pointer;
color: white;
background: black;
border: none;
border-radius: 5px;
height: 50px;
width: 100%;
font-family: Sen, sans-serif;
font-size: 20px;
letter-spacing: 2px;
margin-top: 5px;
}

button:hover {
filter: brightness(200%);
background: rgb(22, 22, 22);
}

button:focus {
outline: none;
}

.message-container {
border: 1px solid black;
border-radius: 5px;
width: 90%;
margin-top: 20px;
display: flex;
justify-content: center;
color: black;
}

0 comments on commit 04b0f7a

Please sign in to comment.