Hotodogo | Snippets: Chmod Calcutor

*, *::before, *::after {
	outline: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	background: white;
	font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: black;
	line-height: 1.2;
}
html {

}
body {
	width: 100%;
	height: 100%;
        min-height: 100vh;
        background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

CSS Before Head

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" crossorigin="anonymous"></script>

HTML Head

.container {
  width: 40%;
  margin: 1% auto 0 auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1 {
    font-size : 2em;
    color: #fff;
	  text-shadow: 2px 3px #333;
    margin-bottom: 40px;
}

p {
    margin: 10px 0;
}
input[type=text] {
  font-size: 16px;
    padding: 6px;
    margin-top : 3px;
  text-align: center;
    display : inline-block;
}
input[type=submit] {
    padding: 10px;
    margin-top : 3px;
    display : inline-block;
}

.results {
    font-family : Times New Roman;
    height : 1em;
    font-size: 1.5em;
}
.boxes {
    display: flex;
    gap: 15px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box {
    display: inline-block;
    margin: 0;
    padding : 10px;
    width : 120px;
    margin : 0;
    vertical-align: top;
    text-align : left;
}

h2 {
    font-size : 1.5em;
    font-weight : bold;
    margin-bottom: 5px;
}

ul {
    text-align: left;
    padding: 0;
    margin: 0 0 5px 0;
}
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li input[type=checkbox]:checked+span {
  font-weight: bold;
}

CSS After Head

JS Before HTML Body

<div class="container">
      <h1>Chmod Calculator</h1>
      <p>Enter a permission number code (like 777).</p>
      <p><input type="text" value="000"/></p>
      <p class="results">---------</p>
    <div class="boxes">
      <div class="box" id="owner">
            <h2>Owner</h2>
            <ul class="detail">
              <li><input type="checkbox" name="owner_r" /> <span>Read</span></li>
              <li><input type="checkbox" name="owner_w" /> <span>Write</span></li>
              <li><input type="checkbox" name="owner_x" /> <span>Execute</span></li>
            </ul>
        </div>
        <div class="box" id="group">
            <h2>Group</h2>
            <ul class="detail">
              <li><input type="checkbox" name="group_r" /> <span>Read</span></li>
              <li><input type="checkbox" name="group_w" /> <span>Write</span></li>
              <li><input type="checkbox" name="group_x" /> <span>Execute</span></li>
            </ul>
        </div>
        <div class="box" id="other">
            <h2>Other</h2>
            <ul class="detail">
              <li><input type="checkbox" name="other_r" /> <span>Read</span></li>
              <li><input type="checkbox" name="other_w" /> <span>Write</span></li>
              <li><input type="checkbox" name="other_x" /> <span>Execute</span></li>
            </ul>
        </div>
    </div>
</div>

HTML Body

HTML Foot

/**
 * Take a numerical value in and converts it to the binary permission
 *
 * @param num string Integer value of permission as string
 * @return object The permission object
 */ 
var parsePermission = function(num) {    
    // Turns the int into a binary string
    binaryString = parseInt(num).toString(2);
    
    // Adds length to the binary. So 1 becomes 001.
    while(binaryString.length < 3)
    {
        binaryString = "0"+binaryString;
    }
    
    // Sets each of the three numbers to their respective permissions
    perm = {
        r : binaryString[0],
        w : binaryString[1],
        x : binaryString[2]
    }
    
    return perm;
}

/**
 * Checks to see if the number is valid
 * @return bool true if it's valid, false if not.
 */
var checkBounds = function(num)
{
    for(i in num)
    {
        if(num[i] > 7 || num[i] < 0)
        {
           $(".results").html("Invalid number, each number has to be between 0 and 7.");
            $("input[type=checkbox]").removeAttr("checked");
           return false;
        }
        if(num.length != 3)
        {
            if(num.length > 3)
               $(".results").html("Invalid number length. Permission numbers can only be 3 digits.");
            else
               $(".results").html("---------");
            $("input[type=checkbox]").removeAttr("checked");
           return false;
        }
    }
    return true;
}

$("input[type=checkbox]").on("click", function() {
    perms = {
        owner : new Array(0, 0, 0),
        group : new Array(0, 0, 0),
        other : new Array(0, 0, 0)
    };
    $.each($("input[type=checkbox]"), function() {
       if($(this).prop("checked"))
       {
           var permName = $(this).attr("name").split("_");
           var permissionPosition = new Array("r", "w", "x");
           var permissionIndex = permissionPosition.indexOf(permName[1]);
           perms[permName[0]][permissionIndex] = 1;
       }
    });
   var permString = "";
   var permResult = "";
   for(i in perms)
   {
       if(perms[i][0] == 1) { permResult += "r"; }
       else { permResult += "-"; }
       if(perms[i][1] == 1) { permResult += "w"; }
       else { permResult += "-"; }
       if(perms[i][2] == 1) { permResult += "x"; }
       else { permResult += "-"; }
       permString += parseInt(perms[i].join(""),2).toString(10);
   }
   $("input[type=text]").val(permString);
   $(".results").html(permResult);

});
$("input[type=text]").on("keyup", function(e) {
    var value = $(this).val();

    // If the number is above 7, below 0, or there's more than 3 numbers, error out.
    if(!checkBounds(value))
        return;
    if(value.length >= 3)
    {
        // Holder for the rwxr--rw- bit
        var permLine= "";
        
        // An object that will hole the individual number for each section.
        var perm = {
            owner : parsePermission(value[0]),
            group : parsePermission(value[1]),
            other : parsePermission(value[2]),
        };
        
        // Clear out the lists (so they don't bunch up)
        $("input[type=checkbox]").prop("checked", false)
        
          // For each section (owner, group, other)
        for(i in perm)
        {
            // For each permission (read, write, execute)
            for(j in perm[i])
            {
                // The list under that particular section
                var detail = "";
                
                // expand on what r,w, and x mean
                switch(j) {
                    case "r":
                        detail = "read";
                        break;                                
                    case "w":
                        detail = "write";
                        break;                                
                    case "x":
                        detail = "execute";
                        break;                                
                }
    
                // If that permission is active            
                if(perm[i][j] > 0)
                {
                    
                    // Add it to the list and the line
                    $("input[type=checkbox][name="+i+"_"+j+"]").prop("checked", true);
                    permLine += j;
                }
                // Else the line gets a -
                else
                {
                    permLine += "-";
                }
            }
        }
        $(".results").html(permLine);
    }
});

JS After HTML Body