Create a 4-Digit craking code
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-Digit Code Cracker MBOX - TUTS</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="centre">
<div id="output">
<div class="number">0</div>
<div class="number">0</div>
<div class="number">0</div>
<div class="number">0</div>
<div id="output-shadow"></div>
</div>
<div id="code">0000</div>
<div id="btns">
<div onclick="GetCode()" class="btn" id="random-btn">Get Code</div>
<div onclick="Crack()" class="btn" id="submit-btn">Crack</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
js:
code = "0000";
cracked = false;
function GetCode(){
code = "";
for(var i = 0;i < 4; i++){
code += String(Math.floor(Math.random() * (9 - 0) + 0));
}
document.getElementById("code").innerHTML = code;
}
function Crack(){
cracked = false;
a = 0;
b = 0;
c = 0;
d = 0;
while(d<9 && cracked === false){
c = 0;
while(c<9 && cracked === false){
b = 0;
while(b<9 && cracked === false){
a = 0;
while(a<9 && cracked === false){
if (code === String(d) + String(c) + String(b) + String(a)){
cracked = true;
$("#output div:nth-child(4)").text(a);
$("#output div:nth-child(3)").text(b);
$("#output div:nth-child(2)").text(c);
$("#output div:nth-child(1)").text(d);
$(".number").css({"transition" : "", "color" : "#fff" ,"text-shadow" : "0px 0px 15px #fff"});
$("#output-shadow").css({"transition" : "", "box-shadow" : "0px 0px 0px #000 inset"});
setTimeout(function(){$(".number").css({"transition" : "all 0.5s ease", "color" : "#3af" ,"text-shadow" : "0px 0px 5px #3af"});$("#output-shadow").css({"transition" : "all 0.5s ease", "box-shadow" : "0px 0px 5px #000 inset"});},100);
}else{
a++;
$("#output div:nth-child(4)").text(a);
$("#output div:nth-child(3)").text(b);
$("#output div:nth-child(2)").text(c);
$("#output div:nth-child(1)").text(d);
}
console.log(String(d)+String(c)+String(b)+String(a));
}
b++;
}
c++;
}
d++;
}
}
css:
@import url(http://fonts.googleapis.com/css?family=Play);
body{
background:#151515;
font-family:Play;
color:#999;
user-select:none;
-webkit-user-select:none;
}
.number:first-child{
border-right:1px solid #090909;
}
.number:last-child{
width:calc(25%);
border-right:0px;
}
.number{
width:calc(25% - 1px);
height:100%;
border-right:1px solid #090909;
display:inline-block;
font-size:50px;
text-align:center;
color:#3af;
text-shadow:0px 0px 5px #3af;
}
.btn{
background:#222;
display:inline-block;
padding:5px;
cursor:pointer;
transition:all 0.5s ease;
margin:4px;
}
.btn:hover{
background:#333;
color:#fff;
}
.btn:active{
background:#fff;
color:#000;
}
#centre{
position:absolute;
left:50%;
top:50%;
margin:-86px 0px 0px -100px;
}
#output{
position:relative;
width:200px;
height:58px;
background:#111;
}
#output-shadow{
position:absolute;
top:0px;
left:0px;
width:200px;
height:58px;
box-shadow:0px 0px 5px #000 inset;
}
#code{
font-size:30px;
text-align:center;
color:#999;
}
#btns{
text-align:center;
}
0 comments:
Post a Comment