JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<label for="name">Name:</label>
<input type="text" data-class='name' data-value='value' value="<img class='image' src='https://www.google.com/images/srpr/logo11w.png'>"></input>
<br/>Hello, <span class='name' data-value='innerHTML'></span>!
<br/>Select A Service:
<div class='service' data-objects="services" data-clickable="active"></div>
<div data-objectvalue='price'></div>

CSS

[id=active] {
    display:none;
}
[id=name] {
    display:inline-block;
}
[id=price] {
    display:block;
    text-align:right;
    float:right;
    margin-left:10%;
}
.name {
    max-width:100px !important;
    max-height:100px !important;
}
.service {
    display:block;
    outline:solid RGBA(0,0,0,.25) 3px;
    width:200px;
}
.service > *{
    margin:6px 3px 6px 3px;
    display:block;
   cursor:pointer;
}
.service > [selected=true] {
    background-color:RGBA(255,165,0, .5);
    outline:outset RGBA(255,255,0,.8);
}

JavaScript

window.services = [{
    name: 'Web Development',
    price: 300,
    active: true
}, {
    name: 'Design',
    price: 400,
    active: false
}, {
    name: 'Integration',
    price: 250,
    active: false
}, {
    name: 'Training',
    price: 220,
    active: false
}];

qs('[data-objects]').forEach(function (e) {
    this[e.dataset.objects].forEach(function (f) {
        var r = document.createElement('div');
        r.setAttribute('class', e.dataset.objects);
        r.setAttribute('selected', f[e.dataset.clickable]);
        r.addEventListener('click', function (g) {
            r[e.dataset.clickable] = !r[e.dataset.clickable];
            r.setAttribute('selected', r[e.dataset.clickable]);
        });

        Object.keys(f).forEach(function (g, i, arr) {
            var a = document.createElement('span');
            a.setAttribute('id', arr[i]);
            a.innerHTML = f[g];
            r.appendChild(a);
        });
        e.appendChild(r);
    });
}, this);

var keyevent = function keyevent(f) {
    [].splice.call(document.getElementsByClassName(f.target.dataset.class), 0).forEach(function (g) {
        g[g.dataset.value] = f.target[f.target.dataset.value];
    });
};
qs('[data-class]').forEach(function (e) {
    keyevent({
        target: e
    });
    e.addEventListener('keyup', keyevent);
    e.addEventListener('keypress', keyevent);
    e.addEventListener('keydown', keyevent);
});

function qs(s) {
    return [].splice.call(document.querySelectorAll(s), 0);
}