Creating JavaScript Objects
Uploaded by
Nivya babuCreating JavaScript Objects
Uploaded by
Nivya babuCreating JavaScript Objects
<!DOCTYPE html>
<html>
<body>
<h1>Creating JavaScript Objects</h1>
<h2>Using an Object Literal</h2>
<p id="demo"></p>
<script>
// Create an empty Object
const person = {};
// Add Properties
person.firstName = "Shankar";
person.lastName = "Sharma";
person.age = 24;
person.eyeColor = "skyblue";
// Display Data from Object
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
JavaScript Object Constructors
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Object Constructors</h1>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create two Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
// Display age
document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age + ".";
</script>
</body>
</html>
Registration form
<html lang="en">
<head>
<title>Form Validation</title>
<style>
body {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
font-family: 'Poppins', sans-serif;
}
#form {
width: 300px;
margin: 20vh auto 0 auto;
padding: 20px;
background-color: whitesmoke;
border-radius: 4px;
font-size: 12px;
}
#form h1 {
color: #0f2027;
text-align: center;
}
#form button {
padding: 10px;
margin-top: 10px;
width: 100%;
color: white;
background-color: rgb(41, 57, 194);
border: none;
border-radius: 4px;
}
.input-control {
display: flex;
flex-direction: column;
}
.input-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 12px;
padding: 10px;
width: 100%;
}
.input-control input:focus {
outline: 0;
}
.input-control.success input {
border-color: #09c372;
}
.input-control.error input {
border-color: #ff3860;
}
.input-control .error {
color: #ff3860;
font-size: 9px;
height: 13px;
}
</style>
</head>
<body>
<div class="container">
<form id="form" action="/">
<h1>Registration</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="email">Email</label>
<input id="email" name="email" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Password</label>
<input id="password"name="password" type="password">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password2">Password again</label>
<input id="password2"name="password2" type="password">
<div class="error"></div>
</div>
<button type="submit">Sign Up</button>
</form>
</div>
<script>
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const validateInputs = () => {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setError(username, 'Username is required');
} else {
setSuccess(username);
}
if(emailValue === '') {
setError(email, 'Email is required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email address');
} else {
setSuccess(email);
}
if(passwordValue === '') {
setError(password, 'Password is required');
} else if (passwordValue.length < 8 ) {
setError(password, 'Password must be at least 8 character.')
} else {
setSuccess(password);
}
if(password2Value === '') {
setError(password2, 'Please confirm your password');
} else if (password2Value !== passwordValue) {
setError(password2, "Passwords doesn't match");
} else {
setSuccess(password2);
}
};
</script>
</body>
</html>