{
id,
title: 'Study Group',
description: "we're gonna study",
slots: [
{id, date, start, end},
{id, date, start, end},
{id, date, start, end},
]
}input:
{
...eventDescription,
participants: [
{name: Joel, selected: [slotId, slotId]}
]
}
output:{
{name: Joel, selected: [slotId, slotId]}
}| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.js" | |
| integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <table class="entry-table"> | |
| </table> | |
| <button id='final'>Final</button> | |
| <table class='slots-table'> | |
| <tr> | |
| <td></td> | |
| <td>Burgers</td> | |
| <td>Sushi</td> | |
| <td>Pizza</td> | |
| </tr> | |
| <tr> | |
| <td>Joel</td> | |
| <td><input type="checkbox" data-food='Burgers'></td> | |
| <td><input type="checkbox" data-food='Sushi'></td> | |
| <td><input type="checkbox" data-food='Pizza'></td> | |
| </tr> | |
| </table> | |
| <button id='like'>What Do I Like</button> | |
| </div> | |
| <script> | |
| $(function(){ | |
| var foods = ['Burgers', 'Sushi', 'Pizza']; | |
| var $table = $('.entry-table'); | |
| var $slots = $('.slots-table'); | |
| var output = []; | |
| foods.forEach(function(food) { | |
| // I set up my output object | |
| var dataObject = {food: food, score: 0} | |
| output.push(dataObject); | |
| // I generate some DOM | |
| var $tr = $('<tr>').appendTo($table); | |
| $('<td>').text(food).appendTo($tr); | |
| var $buttonTd = $('<td>').appendTo($tr); | |
| $('<button>') | |
| .text('Increment') | |
| .on('click', function(){ | |
| // Change the data | |
| dataObject.score += 1; | |
| $resultTd.text(dataObject.score); | |
| }) | |
| .appendTo($buttonTd); | |
| var $resultTd = $('<td>').text(0).appendTo($tr); | |
| }); | |
| $('#final').on('click', function(){ | |
| alert(JSON.stringify(output)); | |
| }); | |
| $('#like').on('click', function(){ | |
| var liked = []; | |
| var $checkboxes = $('.slots-table input[type=checkbox]'); | |
| $checkboxes.each(function(id, checkbox){ | |
| if(checkbox.checked){ | |
| liked.push($(checkbox).data('food')); | |
| } | |
| }); | |
| console.log(liked); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |