soham2008xyz · November 25, 2015 18:44
diff --git a/1.html b/1.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 1</title>
 </head>
 <body>
 	<h2>Factorial</h2>
 	<label for="">Enter Number</label>
 	<input type="number" id="num">
 	<br>
 	<button id="btn">Find Factorial</button><br>
 	<div id="result"></div>
 	<script type="text/javascript">
 		function calc() {
 			var n = document.getElementById("num").value;
 			var fact=1, i;
 			for(i=1; i<=n; i++) {
 				fact = fact * i;
 			}
 			document.getElementById("result").innerHTML="Factorial = "+fact;
 		}
 		document.getElementById("btn").addEventListener('click', calc);
 	</script>
 </body>
 </html>
diff --git a/1.jpg b/1.jpg
diff --git a/2.html b/2.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 2</title>
 </head>
 <body>
 	<h2>Form Validation</h2>
 	<form action="6.html">
 		<label for="required">This is a required field</label>
 		<input type="text" id="required" name="required" required><br>
 		<label for="email">This is an email field</label>
 		<input type="email" id="email" name="email"><br>
 		<label for="number">This is a range field</label>
 		<input type="number" id="number" name="number" min="1" max="5"><br>
 		<button onClick="validate()">Submit</button>
 	</form>
 	<script type="text/javascript">
 		function validate() {
 			text = document.getElementById("required").value;
 			if(text == "") alert("Required field cannot be empty!");
 			email = document.getElementById("email").value;
 			if(validateEmail(email)) alert("Not a valid email address!");
 			n = document.getElementById("number").value;
 			if(isNaN(n)) alert("Not a number!");
 			else if(n>5 || n<1) alert("Out of range!"); 
 		}
 		function validateEmail(email) {
 		    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 		    return re.test(email);
 		}
 	</script>
 </body>
 </html>
diff --git a/2.png b/2.png
diff --git a/3.html b/3.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 3</title>
 </head>
 <body>
 	<h1 id="message"></h1>
 	<script type="text/javascript">
 		var h = new Date().getHours();
 		if(h>=0 && h<12) message = "Good Morning";
 		else if(h>=12 && h<18) mesage = "Good Evening";
 		else message = "Good Night";
 		document.getElementById("message").innerHTML = message;
 	</script>
 </body>
 </html>
diff --git a/3.jpg b/3.jpg
diff --git a/4.html b/4.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 4</title>
 </head>
 <body>
 	<img id="img" src="1.jpg"><br>
 	<button onclick="document.getElementById('img').src='1.jpg'">Red</button>
 	<button onclick="document.getElementById('img').src='2.png'">Blue</button>
 	<button onclick="document.getElementById('img').src='3.jpg'">Green</button>
 </body>
 </html>
diff --git a/5.html b/5.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 5</title>
 </head>
 <body>
 	<h2>Input Fields</h2>
 	Colorpicker: <input type="color"><br>
 	Datepicker: <input type="date">
 </body>
 </html>
diff --git a/6.html b/6.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 6</title>
 </head>
 <body>
 	<h2>Form Results</h2>
 	<h3>Name: <span id="name"></span></h3>
 	<h3>Email: <span id="email"></span></h3>
 	<h3>Number: <span id="number"></span></h3>
 	<script type="text/javascript">
 		function getParameterByName(name) {
 		    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
 		    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
 		        results = regex.exec(location.search);
 		    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
 		}

 		document.getElementById('name').innerHTML = getParameterByName('required');
 		document.getElementById('email').innerHTML = getParameterByName('email');
 		document.getElementById('number').innerHTML = getParameterByName('number');

 	</script>
 </body>
 </html>
diff --git a/7.html b/7.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 7</title>
 </head>
 <body>
 	<p id="p1">
 		With colors you can set a mood, attract attention, or make a statement. You can use color to energize, or to cool down. By selecting the right color scheme, you can create an ambiance of elegance, warmth or tranquility, or you can convey an image of playful youthfulness. Color can be your most powerful design element if you learn to use it effectively.
 	</p>
 	<label for="color">Color: </label>
 	<input type="text" id="color" name="color">
 	<button onClick="setColor()">Change Color</button>
 	<script type="text/javascript">
 		function setColor() {
 			document.getElementById('p1').style.color = document.getElementById('color').value;
 		}
 	</script>
 </body>
 </html>
diff --git a/8.html b/8.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Assignment 8</title>
 </head>
 <body>
 	<h2>Candidate Form</h2>
 	<form id="form">
 		<label for="canName">Name: </label>
 		<input type="text" id="canName" name="canName">
 		<br>
 		<label for="canAddress">Address: </label>
 		<input type="text" id="canAddress" name="canAddress">
 		<br>
 		<label for="canPhone">Phone: </label>
 		<input type="text" id="canPhone" name="canPhone">
 		<br>
 		<label for="canEmail">Email: </label>
 		<input type="email" id="canEmail" name="canEmail">
 		<br>
 		<label for="gender">Gender: </label><input type="radio" id="male" name="gender"> Male<input type="radio" id="female" name="gender"> Female<br>
 		<label for="file">Biodata: </label>
 		<input type="file" id="file" name="file">
 		<br>
 		<label for="details">Details: </label>
 		<textarea name="details" id="details" cols="30" rows="10"></textarea>
 		<br>
 		<label for="username">Username: </label>
 		<input type="text" id="username" name="username" required="">
 		<br>
 		<label for="password">Password: </label>
 		<input type="password" id="password" name="password" required="">
 		<br>
 		<button id="submit" type="submit">Submit</button>
 		<button type="reset">Reset</button>
 	</form>
 	<script type="text/javascript">
 		document.getElementById('form').addEventListener('submit', clickHandler);

 		function clickHandler(event) {
 			username = document.getElementById('username').value;
 			password = document.getElementById('password').value;

 			if(username.length > 10) {
 				alert('Username cannot be more than 10 characters!');
 				event.preventDefault();
 				event.stopPropagation();
 				return false;
 			}

 			var regularExpression = /^(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]$/;
 			if (regularExpression.test(password)) {
 				alert("Password should contain atleast one special character");
 				return false;
 			}
 			
 			alert('You have successfully registered!');
 		}
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Assignment 1</title>
	</head>
	<body>
	<h2>Factorial</h2>
	<label for="">Enter Number</label>
	<input type="number" id="num">
	<br>
	<button id="btn">Find Factorial</button><br>
	<div id="result"></div>
	<script type="text/javascript">
	function calc() {
	var n = document.getElementById("num").value;
	var fact=1, i;
	for(i=1; i<=n; i++) {
	fact = fact * i;
	}
	document.getElementById("result").innerHTML="Factorial = "+fact;
	}
	document.getElementById("btn").addEventListener('click', calc);
	</script>
	</body>
	</html>