Skip to content

Instantly share code, notes, and snippets.

@JoelCodes
Created May 26, 2017 22:45
Show Gist options
  • Select an option

  • Save JoelCodes/a18cbf9a249c1ab4424123e2ea1b38db to your computer and use it in GitHub Desktop.

Select an option

Save JoelCodes/a18cbf9a249c1ab4424123e2ea1b38db to your computer and use it in GitHub Desktop.
{
  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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment