Chmod numeric to symbolic calculator

chmod-numeric-to-symbolic-calculator.markdown

Chmod numeric to symbolic calculator

Chmod numeric to symbolic calculator

A Pen by Chmod Calculators on CodePen.

License.

index.html

<h1 class="title">chmod numeric calculator</h1>
<p class="description">Create octal chmod permissions easily</p>
<div class="calc">
  <div class="bits">
    <div class="spacer bit"></div>
    <div class="owner bit">Owner</div>
    <div class="group bit">Group</div>
    <div class="other bit">Other</div>
  </div>
  <div class="modes">
    <div class="label">
      <div class="read">Read (4)</div>
      <div class="write">Write (2)</div>
      <div class="execute">Execute (1)</div>
    </div>
    <div class="who owner">
      <input class="mode read" type="checkbox" value="4"/>
      <input class="mode write" type="checkbox" value="2"/>
      <input class="mode execute" type="checkbox" value="1"/>
    </div>
    <div class="who group">
      <input class="mode read" type="checkbox" value="4"/>
      <input class="mode write" type="checkbox" value="2"/>
      <input class="mode execute" type="checkbox" value="1"/>
    </div>
    <div class="who other">
      <input class="mode read" type="checkbox" value="4"/>
      <input class="mode write" type="checkbox" value="2"/>
      <input class="mode execute" type="checkbox" value="1"/>
    </div>
  </div>
  <div class="results">
    <div class="result spacer">Result</div>
    <div class="result owner">0</div>
    <div class="result group">0</div>
    <div class="result other">0</div>
  </div>
</div>

script.js

$(document).ready(function() {
  var output = {
    owner: null,
    group: null,
    other: null
  };
  
  var input = {
    owner: {
      read: null,
      write: null,
      execute: null
    },
    
    group: {
      read: null,
      write: null,
      execute: null
    },
    
    other: {
      read: null,
      write: null,
      execute: null
    }
  };
  
  output.owner = $('.result.owner');
  output.group = $('.result.group');
  output.other = $('.result.other');
  
  input.owner.read = $('.who.owner .mode.read');
  input.owner.write = $('.who.owner .mode.write');
  input.owner.execute = $('.who.owner .mode.execute');
  
  input.group.read = $('.who.group .mode.read');
  input.group.write = $('.who.group .mode.write');
  input.group.execute = $('.who.group .mode.execute');
  
  input.other.read = $('.who.other .mode.read');
  input.other.write = $('.who.other .mode.write');
  input.other.execute = $('.who.other .mode.execute');
  
  function calculateBit(bit) {
    var result = 0,
    		mode;
    
    for (mode in input[bit]) {
      result += (input[bit][mode][0].checked) ? parseInt(input[bit][mode].val()) : 0;
    }
    
    return result;
  }
  
  function calculateNumeric() {
    var bit;
    
    for (bit in input) {
      output[bit].text(calculateBit(bit));
    }
  }
  
  $('input[type=checkbox]').on('change', calculateNumeric);
});

style.css

html {
  box-sizing: border-box;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

body {
  background: rgba(51, 51, 51, 0.2);
}

.title,
.description {
  text-align: center;
}

.title {
  text-transform: uppercase;
  font-weight: 100;
}

.description {
  margin: 0 auto;
  max-width: 500px;
  font-weight: 100;
}

.calc {
  margin: 50px auto;
  max-width: 400px;
  background: white;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.5);
}

.bits {
  overflow: hidden;
}
.bits .bit {
  width: 25%;
  float: left;
  text-align: center;
  padding: 10px;
}

.modes {
  overflow: hidden;
}
.modes .label {
  width: 25%;
  float: left;
}
.modes .label .read,
.modes .label .write,
.modes .label .execute {
  display: block;
  margin: 25px auto;
  text-align: right;
  padding-left: 10px;
}
.modes .who {
  width: 25%;
  float: left;
  text-align: center;
}
.modes .who .mode {
  display: block;
  margin: 25px auto;
}

.results {
  border-top: 1px solid #666666;
  background: #f3f3f3;
  overflow: hidden;
}
.results .result {
  width: 25%;
  float: left;
  margin: 10px 0;
  text-align: center;
}