PIN LOCK SCREEN

Image of Output

HTML:

	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<div id="top">
	<span id="a1">.</span>

	<span id="a2">.</span>

	<span id="a3">.</span>

	<span id="a4">.</span>
	</div>
	<input type="hidden" maxlength="4" id="result"/>
	<table border="0">
	<tr onclick="change()">
	<td><button onclick="dis('1')">1</button></td>
	<td><button onclick="dis('2')">2</button></td>
	<td><button onclick="dis('3')">3</button></td>
	</tr>
	<tr onclick="change()">
	<td><button onclick="dis('4')">4</button></td>
	<td><button onclick="dis('5')">5</button></td>
	<td><button onclick="dis('6')">6</button></td>
	</tr>
	<tr onclick="change()">
	<td><button onclick="dis('7')">7</button></td>
	<td><button onclick="dis('8')">8</button></td>
	<td><button onclick="dis('9')">9</button></td>
	</tr>
	<tr>
	<td><button></button></td>
	<td><button onclick="dis('0'); change();">0</button></td>
	<td><button></button></td>
	</tr>
	<tr>

	</tr>
	<tr>
	<td></td>
	<td><button onclick="solve()">OPEN</button></td>
	<td></td>
	</tr>
	</table>
	<div id="bottom">
	<P>CORRECT PASSWORD</P>
	<P>{DEVICE OPENED}</P>
	<p> <a href="https://www.coding-greed.blogspot.com">CODING GREED</a></p>
	<p>click above&uparrow; to visit my website!!</p>

	</div>
	</body>
	</html>

CSS:

	body {
	background:#cccc;

	}

	#top{
	position:absolute ;
	top:20%;
	left:53%;
	transform:translate(-50%,-50%);
	}

	span{
	font-weight:bolder;
	font-size:3em;
	line-space:2em;
	color:gray;
	opacity:0.5;

	}

	table{
	position:absolute ;
	top:60%;
	left:52%;
	transform:translate(-50%,-50%);

	}

	td{
	width:100px;
	height:70px;
	text-align:center;
	}

	button{
	width:50px;
	height:50px;
	background-color:transparent ;
	font-size:2em;
	border:none;
	outline:none;
	}

	button:hover{
	font-size:3em;
	}

	#bottom{
	width:100%;
	height:100%;
	background:lightgreen;
	position:absolute ;
	z-index:1;
	display:none;
	}

	p{
	position:absolute ;
	top:40%;
	left:48%;
	transform:translate(-50%,-50%);
	font-weight:bold;
	font-size:1em;
	}

	#bottom>p:nth-child(2){
	top:45%;

	}

	#bottom>p:nth-child(3){
	top:55%;

	}

	#bottom>p:nth-child(4){
	top:60%;
	font-size:0.8em;
	}

	a{
	text-decoration:none;
	font-weight:bolder;
	font-size:1em;
	}

	tr:nth-child(6){

	text-align:center;
	}

	tr:nth-child(6)>td:nth-child(2)>button{
	height:50px;
	font-size:1.5em;
	margin-right:20px;
	}

	tr:nth-child(5){
	height:20px;
	}

JAVA-SCRIPT:

	//function that display value

	function dis(val)

	{

	document.getElementById("result").value+=val

	}


	//function that evaluates the digit and return result

	function solve()

	{

	let x = document.getElementById("result").value

	let y = eval(x)

	document.getElementById("result").value = y



	if (y== "7890"){
	h = document.getElementById("bottom")
	h.style.display="block"
	}

	else{
	alert("Incorrect-Password")
	document.getElementById("result").value = ""

	document.getElementById("a1").style.color="gray"
	document.getElementById("a2").style.color="gray"
	document.getElementById("a3").style.color="gray"
	document.getElementById("a4").style.color="gray"
	}

	}

	function change(){

	let m = document.getElementById("result").value

	if(m <= 9){
	n = document.getElementById("a1")
	n.style.color="red"
	}

	else if ( m <= 99){
	document.getElementById("a2").style.color="red"
	}

	else if ( m <= 999){
	document.getElementById("a3").style.color="red"
	}

	else{
	document.getElementById("a4").style.color="red"
	}


	}