4-Digit Code Cracker

4-Digit-Code-Cracker.markdown

4-Digit Code Cracker

Example for a friend who's learning to program

A Pen by Declan on CodePen.

License.

index.html

<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="CodeGen()" class="btn" id="random-btn">Generate Code</div>
    <div onclick="Cracker()" class="btn" id="submit-btn">Crack It</div></div>
</div>

script.js

code = "0000";
cracked = false;
function CodeGen(){
  code = "";
  for(var i = 0;i < 4; i++){
    code += String(Math.floor(Math.random() * (9 - 0) + 0));
  }
  document.getElementById("code").innerHTML = code;
}

function Cracker(){
  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++;
  }
}

style.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;
}

how or where do i run this

ok cool, but what if i dont know the actual code, i need something that actually types in a box and guesses it