<H1>Pigpen Cipher Encoder</H1>
<H2>Plaintext:</H2>
<input type="text" id="plaintext" style="width: 60%">&nbsp;<button onclick="Javascript: encode();">Encode</button>

<H2>Ciphertext:</H2>
<div id=ciphertext style="min-height:60px;"></diV>
&copy;101Computing.net

BODY {
  background: black;
  color: white;
  font-family: courier new;
}

.pigpen-wrapper {
 display: inline-block;
 background: white;
 width: 50px;
 height: 50px; 
 padding: 10px;
 box-sizing: border-box;
 overflow: hidden;
}
.dotted {
 background: black;
 -webkit-box-shadow:  inset 0px 0px 0px 23px rgba(255,255,255,1);
 -moz-box-shadow:  inset 0px 0px 0px 23px rgba(255,255,255,1);
 box-shadow: inset -2px 0px 0px 23px rgba(255,255,255,1);
}

.pigpen {
 display: inline-block;
background: transparent;
 width:10px;
 height: 30px; 
 padding: 10px;
 box-sizing: border-box;
border: 4px solid white;
}

.a, .j {
  border-color: white black black white;
}
.b, .k {
  border-color: white black black black;
}
.c, .l {
  border-color: white white black black;
}
.d, .m {
  border-color: black black black white;
}
.e, .n {
  border-color: black black black black;
}
.f, .o {
  border-color: black white black black;
}
.g, .p{
  border-color: black black white white;
}
.h, .q {
  border-color: black black white black;
}
.i, .r {
  border-color: black white white black;
}

.s {
  border-color: white black black white;
  transform: translate(0px, -6px) rotate(45deg);
}
.u {
  border-color: white white black black;
  transform: translate(6px, 0px) rotate(45deg);  
}
.t{
  border-color: black black white white;
  transform: translate(-6px, 0px) rotate(45deg);  
}
.v {
  border-color: black white white black;
  transform: translate(0px, 6px) rotate(45deg);  
}
 

.w {
  border-color: white black black white;
  transform: translate(0px, -6px) rotate(45deg);
}
.y {
  border-color: white white black black;
  transform: translate(6px, 0px) rotate(45deg);  
}
.x {
  border-color: black black white white;
  transform: translate(-6px, 0px) rotate(45deg);  
}
 .z {
  border-color: black white white black;
  transform: translate(0px, 6px) rotate(45deg);  
}


function encode() {
  var plaintext=document.getElementById("plaintext").value;
  plaintext=plaintext.toLowerCase();
  var ciphertext="";
  var alphabetNoDot="abcdefghistuv";
  var alphabetDot="jklmnopqrwxyz";
  
  for (var i = 0; i < plaintext.length; i++) {
  var letter=plaintext.charAt(i);
    if (alphabetNoDot.indexOf(letter)>-1) {
      ciphertext=ciphertext+"<div class='pigpen-wrapper'><div class='pigpen " + letter + "'> </div></div>";
    } else {
    if (alphabetDot.indexOf(letter)>-1) {
      ciphertext=ciphertext+"<div class='pigpen-wrapper dotted'><div class='pigpen " + letter + "'> </div></div>";
    }    
    }
  }
  document.getElementById("ciphertext").innerHTML=ciphertext;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.