requirebin sketch

index.js

var COLORLIST = ['red', 'blue', 'yellow', 'green', 'pink'];
var h = require('hyperscript');

function toggler(value) {
  return function(evt) {
    var currentColor = evt.target.innerText;
    var currentIdx = COLORLIST.indexOf(currentColor);
    
    console.log(currentIdx + ' ^ ' + value + ' = ' + (currentIdx ^ value));
    evt.target.innerText = COLORLIST[currentIdx ^ value];
  }
}

document.body.appendChild(h('button', COLORLIST[0], { onclick: toggler(1) }));
document.body.appendChild(h('button', COLORLIST[3], { onclick: toggler(1) }));

// RED    = 0x000
// BLUE   = 0x001
// YELLOW = 0x010
// GREEN  = 0x011
// PINK   = 0x100

// a XOR operation is useful for flipping the relevant bit, so 1 == 0x01
// so to toggle between RED and GREEN we would use a XOR value of 0x11 or 3
document.body.appendChild(h('button', COLORLIST[0], { onclick: toggler(3) }));

// or to toggle between BLUE and YELLOW we would use a XOR value of 3 also
document.body.appendChild(h('button', COLORLIST[1], { onclick: toggler(3) }));

// in general if you want to toggle between a value and the base state (0-index) then just use it's own value
document.body.appendChild(h('button', COLORLIST[4], { onclick: toggler(4) }));

// so what XOR value is used to toggle between YELLOW and pink?

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){},{}],2:[function(require,module,exports){module.exports=function split(undef){var nativeSplit=String.prototype.split,compliantExecNpcg=/()??/.exec("")[1]===undef,self;self=function(str,separator,limit){if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return nativeSplit.call(str,separator,limit)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;str+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===undef?-1>>>0:limit>>>0;while(match=separator.exec(str)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(str.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i<arguments.length-2;i++){if(arguments[i]===undef){match[i]=undef}}})}if(match.length>1&&match.index<str.length){Array.prototype.push.apply(output,match.slice(1))}lastLength=match[0].length;lastLastIndex=lastIndex;if(output.length>=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===str.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(str.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output};return self}()},{}],3:[function(require,module,exports){var indexof=require("indexof");module.exports=ClassList;function ClassList(elem){var cl=elem.classList;if(cl){return cl}var classList={add:add,remove:remove,contains:contains,toggle:toggle,toString:$toString,length:0,item:item};return classList;function add(token){var list=getTokens();if(indexof(list,token)>-1){return}list.push(token);setTokens(list)}function remove(token){var list=getTokens(),index=indexof(list,token);if(index===-1){return}list.splice(index,1);setTokens(list)}function contains(token){return indexof(getTokens(),token)>-1}function toggle(token){if(contains(token)){remove(token);return false}else{add(token);return true}}function $toString(){return elem.className}function item(index){var tokens=getTokens();return tokens[index]||null}function getTokens(){var className=elem.className;return filter(className.split(" "),isTruthy)}function setTokens(list){var length=list.length;elem.className=list.join(" ");classList.length=length;for(var i=0;i<list.length;i++){classList[i]=list[i]}delete list[length]}}function filter(arr,fn){var ret=[];for(var i=0;i<arr.length;i++){if(fn(arr[i]))ret.push(arr[i])}return ret}function isTruthy(value){return!!value}},{indexof:4}],4:[function(require,module,exports){var indexOf=[].indexOf;module.exports=function(arr,obj){if(indexOf)return arr.indexOf(obj);for(var i=0;i<arr.length;++i){if(arr[i]===obj)return i}return-1}},{}],hyperscript:[function(require,module,exports){var split=require("browser-split");var ClassList=require("class-list");require("html-element");function context(){var cleanupFuncs=[];function h(){var args=[].slice.call(arguments),e=null;function item(l){var r;function parseClass(string){var m=split(string,/([\.#]?[a-zA-Z0-9_:-]+)/);if(/^\.|#/.test(m[1]))e=document.createElement("div");forEach(m,function(v){var s=v.substring(1,v.length);if(!v)return;if(!e)e=document.createElement(v);else if(v[0]===".")ClassList(e).add(s);else if(v[0]==="#")e.setAttribute("id",s)})}if(l==null);else if("string"===typeof l){if(!e)parseClass(l);else e.appendChild(r=document.createTextNode(l))}else if("number"===typeof l||"boolean"===typeof l||l instanceof Date||l instanceof RegExp){e.appendChild(r=document.createTextNode(l.toString()))}else if(isArray(l))forEach(l,item);else if(isNode(l))e.appendChild(r=l);else if(l instanceof Text)e.appendChild(r=l);else if("object"===typeof l){for(var k in l){if("function"===typeof l[k]){if(/^on\w+/.test(k)){(function(k,l){if(e.addEventListener){e.addEventListener(k.substring(2),l[k],false);cleanupFuncs.push(function(){e.removeEventListener(k.substring(2),l[k],false)})}else{e.attachEvent(k,l[k]);cleanupFuncs.push(function(){e.detachEvent(k,l[k])})}})(k,l)}else{e[k]=l[k]();cleanupFuncs.push(l[k](function(v){e[k]=v}))}}else if(k==="style"){if("string"===typeof l[k]){e.style.cssText=l[k]}else{for(var s in l[k])(function(s,v){if("function"===typeof v){e.style.setProperty(s,v());cleanupFuncs.push(v(function(val){e.style.setProperty(s,val)}))}else e.style.setProperty(s,l[k][s])})(s,l[k][s])}}else if(k.substr(0,5)==="data-"){e.setAttribute(k,l[k])}else{e[k]=l[k]}}}else if("function"===typeof l){var v=l();e.appendChild(r=isNode(v)?v:document.createTextNode(v));cleanupFuncs.push(l(function(v){if(isNode(v)&&r.parentElement)r.parentElement.replaceChild(v,r),r=v;else r.textContent=v}))}return r}while(args.length)item(args.shift());return e}h.cleanup=function(){for(var i=0;i<cleanupFuncs.length;i++){cleanupFuncs[i]()}cleanupFuncs.length=0};return h}var h=module.exports=context();h.context=context;function isNode(el){return el&&el.nodeName&&el.nodeType}function isText(el){return el&&el.nodeName==="#text"&&el.nodeType==3}function forEach(arr,fn){if(arr.forEach)return arr.forEach(fn);for(var i=0;i<arr.length;i++)fn(arr[i],i)}function isArray(arr){return Object.prototype.toString.call(arr)=="[object Array]"}},{"browser-split":2,"class-list":3,"html-element":1}]},{},[]);var COLORLIST=["red","blue","yellow","green","pink"];var h=require("hyperscript");function toggler(value){return function(evt){var currentColor=evt.target.innerText;var currentIdx=COLORLIST.indexOf(currentColor);console.log(currentIdx+" ^ "+value+" = "+(currentIdx^value));evt.target.innerText=COLORLIST[currentIdx^value]}}document.body.appendChild(h("button",COLORLIST[0],{onclick:toggler(1)}));document.body.appendChild(h("button",COLORLIST[3],{onclick:toggler(1)}));document.body.appendChild(h("button",COLORLIST[0],{onclick:toggler(3)}));document.body.appendChild(h("button",COLORLIST[1],{onclick:toggler(3)}));document.body.appendChild(h("button",COLORLIST[4],{onclick:toggler(4)}));

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "hyperscript": "1.4.6"
  }
}

requirebin.md

made with requirebin