INTERACTIVE MEDIA DESIGN: 13 SIGN IN AND SIGN UP/ LOG IN FORMS

-

 HERE IS THE VIDEO :








HTML CODE

!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login and Signup </title>
<link rel="stylesheet" href="EX13 SIGN IN.CSS">
</head>

<body>

<form name="form">
<h2>Login</h2>
<p> EMMANS BLOGGER </p>
<div>
<label for="text"> <b> Username </b> </label>
<input  id="user"  name="user" type="text" placeholder="Username"> </div>
</div>
<div>
<label for="psw"> <b> Password </b> </label>
<input id="pass" name="pass" type="password"  placeholder="Password"> </div>
</div>
<div>
<button type="button" value="Login" onClick="validate(this.form)"> Login </button>
<button class="resetbtn" type="Reset"> Reset </button>
<hr>
<p> Don't have an account? <br> Sign up now for free! </p>
<a href="EX13 SIGN UP.HTML"> Sign Up </a>
</div>
</form>

<script src="EX 13.JS">

</script>

</body>
</html>

CSS:
body {
font-size: 16px;
background: #fff;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

h2 {
text-align: center;
text-decoration: underline;
}

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

button {
background-color: #CCEEFF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

form {
width: 300px;
background: #fff;
padding: 0px 40px 40px;
border: 1px solid #ccc;
margin: 1.5% auto auto auto;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px
}

label i {
color: #999;
font-size: 80%;
}

input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}

.cancelbtn, .resetbtn {
padding: 14px 20px;
background-color: #f44336;
}

.cancelbtn, .signupbtn {
width: 100%;
}

.container {
width: 300px;
background: #fff;
padding:0px 40px 40px;
border: 1px solid #ccc;
margin: 0px auto 0;
border-radius: 5px;
}

.modal {
display: none;
position: fixed;
background-color: #fff;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 30px 0px 30px 0px;
}

.modal-content {
background-color: #fefefe;
margin: 1% auto auto auto;
border: 1px solid #888;
width: 80%;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
 
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #5c5c5c;
}

.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}

.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}

.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}

.error {
color: red;
font-size: 90%;
}

@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

HTML
SIGN UP:
!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login and Signup </title>
<link rel="stylesheet" href="EX 13 SIGN UP.CSS">
</head>

<body>

<div id="signup-form" class="modal">
<form class="modal-content" onsubmit="return signup()">
<div class="container">
<h2> Sign Up </h2>
<p> Please fill in this form to create an account. </p>
<hr>
<label> <b>Username</b> </label>
<input id="username-input" type="text" placeholder="Enter Username" name="user" required>

<label> <b>Password</b> </label>
<input id="password-input" type="password" placeholder="Enter Password" name="pass" required>

<label> <b>Confirm Password</b> </label>
<input id="confirm-password-input" type="password" placeholder="Confirm Password" name="confirmPass" required>
<button type="submit" class="signupbtn"> Submit </button>
<button class="resetbtn" type="Reset"> Reset </button>
<a href="EX13 SIGN IN.HTML"> Back to Login </a>
</div>
</form>
</div>

</body>

<script src="EX 13.JS">

</script>

</html>

CSS CODE
body {
font-size: 16px;
background: #fff;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

h2 {
text-align: center;
text-decoration: underline;
}

input[type=text],
input[type=password],
input[type=confirm-password-input] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=confirm-password-input]:focus. {
background-color: #ddd;
outline: none;
}

button {
background-color: dodgerblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

form {
width: 300px;
background: #fff;
border: 1px solid #ccc;
margin: 1.5% auto auto auto;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px
}

label i {
color: #999;
font-size: 80%;
}

input,
select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}

.cancelbtn,
.resetbtn {
padding: 14px 20px;
background-color: #f44336;
}

.cancelbtn,
.signupbtn {
width: 100%;
}

.container {
width: 300px;
background: #fff;
padding:0px 40px 40px;
border: 1px solid #ccc;
margin: 0px auto 0;
border-radius: 5px;
}

.modal {
display: block;
position: fixed;
background-color: #fff;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 30px 0px 30px 0px;
}

.modal-content {
background-color: #CCEEFF ;
margin: 1% auto auto auto;
border: none;
width: 80%;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
 
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #5c5c5c;
}

.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}

.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}

.form-inline label,
.form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}

.error {
color: red;
font-size: 90%;
}

@media screen and (max-width: 300px) {
.cancelbtn,
.signupbtn {
width: 100%;
}
}


JAVA CODE: 
function validate(form) {

var credentials = JSON.parse(window.name);
var usernameInput = document.getElementById("user").value;
var passwordInput = document.getElementById("pass").value;
var matchingCredential = credentials.find(x => x.username == usernameInput);
if (matchingCredential == undefined) {
alert('No such user');
return;
}
if (matchingCredential.password == passwordInput) {
alert('Login Successful');
window.location.href = "https://portaitart.blogspot.com/";
}
else {
alert('No such credential');
}
}
var credentials = [];

function signup() {

var passwordPassesCriteria = false;
var passwordMatched = false;
var usernameInput = document.getElementById('username-input').value;
var passwordInput = document.getElementById('password-input').value;
var confirmPasswordInput = document.getElementById('confirm-password-input').value;
passwordMatched = passwordInput == confirmPasswordInput;
var regex = /^[a-zA-Z\s]+$/;
passwordPassesCriteria = regex.test(passwordInput);
console.log(saveCredentials);
if (passwordMatched && passwordPassesCriteria) {
displayFormData(usernameInput, passwordInput);
saveCredentials();
goToLogin();
}
}

function saveCredentials() {

var username = document.getElementById('username-input').value;
var password = document.getElementById('password-input').value;
credentials.push({
username: username,
password: password
});
var objectAsString = JSON.stringify(credentials);
    window.name = objectAsString;
}

function displayFormData(username, password) {
var alertMessage = 'Username: ' + username + '\n' +
'Password: ' + password;
alert(alertMessage);
}

function goToLogin() {
window.location.href = 'EX13 SIGN IN.HTML';
}

function goToSighUp() {
window.location.href = 'EX13 SIGN UP.HTML';
}


Comments

Post a Comment

Popular posts from this blog

-
Image
W elcome To My Art Blog Portraits are works of art that record the likenesses of humans or animals that are alive or have been alive. The word  portraiture  is used to describe this category of art. The purpose of a portrait is to memorialize an image of someone for the future. It can be done with painting, photography, sculpture or almost any other medium. Some portraiture is also created by artists purely for the sake of creating art, rather than working on commission. The human body and face are fascinating subjects that many artists like to study in their personal work. Many artists also choose to do a "self-portrait." It is a work of art depicting the artist created by their own hand. These are typically made from a reference photo or by looking in a mirror. Self-portraits can give you a good sense of how an artist views themselves and, quite often, it is rather introspective. Some artists will regularly create self-portraits
Read more
-
Image
 html EXERCISE NUMBER 1  PROFILE html   <!DOCTYPE html> <html> <head> <title>My Profile</title> <style> body {background-color: Skyblue;} // styles applied to body tag h1 {color: black;} // styles applied to h1 tag p {color: red;} // styles applied to p tag hr{ border: 10px solid red; } </style> </head> <body> <h1> Name : EMMANUEL B UBALDO </h1> <h1>My favorite Songs </h1> <hr> <ol> <li> 2002 by edge sheeran <li> centimeters by peggies <li> thru these tears lany <li> Gospel by panic at the disco <li> Meant it Lany and Lauv </lol> <h2>My favorite Subjects </h2> <ul> <li> Web programming <li> 3D modelling  <li> Drawing </ul> <h1> Links to your portfolio </h1> <p> <a href="https://www.instagram.com/emmonztah/"> instagram </a> </p> <p><a href="https://portaitart.blo
Read more