Playing with some ideas for tools.jkirchartz.com UI

index.html

<nav>
  <button name="box1">unshorten URL</button>
  <button name="box2">URL encode/decode</button>
  <button name="box3">Random Color</button>
  <button name="box4">Commas to Tabs</button>
</nav>
<div id="box1">
  <form id="untiny" action="/untiny" method="GET">
    <h2>Unshorten URL</h2>
    <input id="untiny-url" name="url">
    <button>Unshorten URL</button>
  </form>
</div>
<div id="box2">
  <form id="de-encoder">
    <h2>URI encode/decode</h2>
    <input id="codec">
    <button id="codec_btn">URI (en|de)code</button>
  </form>
</div>
<div id="box3">
   <form id="rand-color">
      <h2>Random Color</h2>
      <button id="rand-color_btn">random color</button>
  </form> 
</div>
<div id="box4">
  <form id="commatabs">
    <h2>Commas to Tabs</h2>
    <textarea id="commatabber"></textarea>
    <button id="execute">Convert Commas to Tabs</button>
  </form>
</div>

Playing with some ideas for tools.jkirchartz.com UI.markdown

Playing with some ideas for tools.jkirchartz.com UI

I haven't worked on this site in a while & recently wrote a bunch of mini-tools I could cram in there, so I need a new UI to enable that.

A Pen by Joel Kirchartz on CodePen.

License.

script.js

/* Framework */
var $ = document.querySelectorAll;
var toggle = function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var boxName = e.target.name;
    var box = document.getElementById(boxName);
    var boxes = document.getElementsByTagName('div');
    if (box.className == 'on') {
      box.className = '';
    } else {
      box.className = 'on';
    }
    for (var i in boxes) {
      if (boxes[i].id !== box.id) {
        boxes[i].className = '';
      }
    }
 }

window.addEventListener('load', function(){
  var boxName = window.location.hash;
  if (boxName) {
    $(boxName).className = 'on';
  }
  var buttons = $('nav button');
  buttons.map(function(){console.log("map",this);});
  for (var i in buttons) {
    buttons[i].addEventListener('click', toggle);
  }
});

/* tools */
document.getElementById('untiny').onsubmit = function (e) {
    e.preventDefault;
    var r = new XMLHttpRequest(),
        url = document.getElementById('untiny-url').value;
    r.open("GET", e.target.action + "?url=" + url, true);
    r.onreadystatechange = function () {
        if (r.readyState != 4 || r.status != 200) return; 
        var link = document.createElement('a');
        link.href = r.responseText;
        link.innerHTML = r.responseText;
        document.getElementById('untiny').appendChild(link);
    };
    r.send(null);
    return false;
}

document.getElementById('de-encoder').onsubmit = function(e){
    e.preventDefault();
    var codec = document.getElementById('codec');
    var val = codec.value;
    if(val.indexOf('%')>0){
        codec.value = decodeURIComponent(val);
    }else{
        codec.value = encodeURIComponent(val);
    }
    return false;
}


document.getElementById('rand-color').onsubmit = function(e){
  e.preventDefault();
  var color = Math.floor(Math.random()*16777216).toString(16),
      title = document.createElement('h1'),
      first = document.querySelector('#rand-color h1');
  title.innerHTML = '#'+color;
  title.style.backgroundColor = '#'+color;
  title.style.border = "1px solid black";
  title.style.textAlign = "center";
  if(first){
    this.removeChild(first);
  }
  this.appendChild(title);
  return false;
}
document.getElementById('commatabs').onsubmit = function(e) {
  e.preventDefault();
  console.log(this);
  var ct = document.getElementById('commatabber');
  var text = ct.value;
  ct.value = text.replace(/,/g, '	');
  return false;
}

style.css

html, body {
  margin:0;
  padding:0;
  background:#888;
  height: 100%;
  width: 100%;
}
nav {
  background:#DDD;
  text-align:center;
  box-shadow: 0 0 10px #888888;
}
nav button {
  margin:0.5em;
  padding:1em;
  border:0px;
  color:#FFF;
  text-transform:Capitalize;
  background: linear-gradient(to bottom, #2C82C9 0%,#0B6EC0 100%);
}
nav button:hover {
  background: linear-gradient(to bottom, #0B6EC0 0%,#2C82C9 100%);
}
nav button:active {
  box-shadow: 0 0 10px #444;
}
div > form {
  background: #2C82C9;
  height:60%;
  width:40%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  padding: 1em;
  text-align:center;
  box-shadow: 5px 5px 10px -5px #444;
}

form button {
  display:block;
  margin:1em auto;
  padding:1em;
  color: #FFF;
  border:none;
  background: linear-gradient(to bottom, #2C2C2C 0%, #0B0B0B 100%);
}
form button:hover {
  background: linear-gradient(to bottom, #0B0B0B 0%, #2C2C2C 100%);
  box-shadow: 0 0 10px #888;
}
form button:active {
  box-shadow: 0 0 10px #444;
}

form textarea, form input {
  width:90%;
}

textarea {
  min-height:10em;
}

div {
  display:none;
  margin:0.5em;
  padding: 1em;
}
div.on {
  display:block;
}