Aisyah Nurhalimah: Tugas 3

Pada minggu ketiga diberkan tugas untuk membuat tampilan signup form dan login form pada web. Berikut adalah tampilannya :

Login Form :

Sign Up Form

Berikut adalah source code nya :

- Login Form

	<!DOCTYPE html>

	<head>
	<title> Login Form </title>
	</head>

	<body>
	<h3> LOGIN </h3>
	<formform="Login_form" onsubmit="submit_form()" {">
	<h4> USERNAME </h4>
	<input type="text" placeholder="Enter your email id" />
	<h4> PASSWORD </h4>
	<input type="password" placeholder="Enter your password" /><br><br>
	<input type="submit" values="Login" />
	<input type="button" values="SignUp" onClick="create()" />
	</formform>
	<script type="text/javascript">
	function submit_form(){
	alert("Login successfully");
	}
	function create(){
	window.location = "signup.html";
	}
	</script>
	</body>

view raw login.html hosted with ❤ by GitHub

-Sign Up Form

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>SignUp Page</title>
	</head>
	<body align="center">
	<h1> CREATE YOUR ACCOUNT</h1>
	<table cellspacing="2" align="center" cellpadding="8" border="0">
	<tr><td> Name </td>
	<td><input type="text" placeholder="Enter your name" id="n1">
	</td></tr>
	<tr><td> Email </td>
	<td><input type="text" placeholder="Enter your email id" id="e1">
	</td></tr>
	<tr><td> Set Password </td>
	<td><input type="password" placeholder="Set a password" id="p1">
	</td></tr>
	<tr><td> Confirm Password </td>
	<td><input type="password" placeholder="Confirm your password" id="p2">
	</td></tr>
	<tr><td>
	<input type="submit" value="Create" onClick="create_account()"/>
	</td></tr>

	</table>

	<script type="text/javascript">
	function create_account(){
	var n = document.getElementById("n1").value;
	var e = document.getElementById("e1").value;
	var p = document.getElementById("p1").value;
	var cp = document.getElementById("p1").value;

	var letters = /^[A-Za-z]+$/;
	var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2, 4})+$/;

	if(n==''\|\|e==''\|\|p==''\|\|cp==''){
	alert("Enter each details correctly");
	}else if(!letters.test(n)){
	alert('Name is incorrect must contain alphabets only');
	}else if(!email_val.test(e)){
	alert('Invalid email format please enter valid email id');
	}else if(p!=cp){
	alert("Password not matching");
	}else if(document.getElementById("p1").value.length > 12){
	alert("Password maximum length is 12");
	}else if(document.getElementById("p1").value.length < 6){
	alert("Password minimun length is 6");
	}else{
	alert("Your account has been created succesfully... Redirecting to JavaTpoint.com");
	window.location="https://www.javatpoint.com/";
	}
	}
	</script>
	</body>
	</html>

view raw signup.html hosted with ❤ by GitHub

Aisyah Nurhalimah

Rabu, 14 September 2022

Tugas 3 - JavaScript

Tidak ada komentar:

Posting Komentar