Skip to content

Instantly share code, notes, and snippets.

@pankajpatel

pankajpatel/example-data.html

Created April 9, 2017 17:23
Download ZIP

Revisions

  1. pankajpatel created this gist Apr 9, 2017.
    31 changes: 31 additions & 0 deletions example-data.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <p id="sum">0</p>
    <div id="items"></div>
    <script>
    let items = [5, 14, 3, 8];
    let sum = {
    total: 0,
    items: {}
    }
    items.forEach((item, index) => {
    sum.items[index] = {checked: false, value: item};
    document.querySelector('#items').innerHTML += '<p>\
    <input type="checkbox" class="item"\
    data-index="'+index+'" value="'+item+'"\
    /> '+item+'</p>';
    });

    document
    .querySelector('#items')
    .addEventListener('click', (event) => {
    let item = event.target;
    if( item.classList.contains('item') ) {
    if(sum.items[item.dataset.index].checked) { //already checked
    sum.total -= parseInt(item.value);
    } else {
    sum.total += parseInt(item.value);
    }
    sum.items[item.dataset.index].checked = item.checked;
    }
    document.querySelector('#sum').innerHTML = sum.total;
    })
    </script>