JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<button onclick="createTable()">Create Table</button>
<table id="datatable">
  <tr>
    <th>Select</th>
    <th>Name</th>
    <th>DOB</th>
  </tr>
</table>
<button onclick="saveData()">Save Selected</button>
<br />
<div class="container"></div>
<button onclick="logSavedData()">Get Saved Data</button>
<button id="showExtForm-btn">Open External Form</button>

<div id="extUser">
  <form id="extUserForm">
    <p>
      <label for="name">Name:</label>
      <input type="text" id="name" required>
    </p>
    <br />
    <p>
      <label for="myImg">Image:</label>
      <input type="url" id="myImg" required>
    </p>
    <br />
    <p>
      <label for="dob">DOB:</label>
      <input type="date" id="dob" required>
    </p>
    <br />
    <button onclick="addExtUser()">Submit</button>
  </form>
</div>

CSS

table,
	th,
	td {
	  border: 1px solid #ddd;
	  border-collapse: collapse;
	  padding: 10px;
	}
	
	.parent {
	  height: 25%;
	  width: 90%;
	  padding: 1%;
	  margin-left: 1%;
	  margin-top: 1%;
	  border: 1px solid black;
	}
	
	.parent:nth-child(odd) {
	  background: skyblue;
	}
	
	.parent:nth-child(even) {
	  background: green;
	}
	
	label {
	  float: left;
	  width: 80px;
	}
	
	input,
	textarea {
	  width: 130px;
	}
	
	#extUser {
	  border: 1px solid lightgrey;
	  border-radius: 5px;
	  display: none;
	  padding: 10px;
	  background-color: skyblue;
	}
	
	#extUserForm {
	  margin: 3px;
	  padding: 5px;
	}

JavaScript

function createTable() {
  $.getJSON("https://api.randomuser.me/?results=5", function(data) {
    $('#datatable tr:has(td)').remove();
    data.results.forEach(function(record) {
      var json = JSON.stringify(record);
      $('#datatable').append(
        $('<tr>').append(
          $('<td>').append(
            $('<input>').attr('type', 'checkbox')
            .addClass('selectRow')
            .val(json)
          ),
          $('<td>').append(
            $('<a>').attr('href', record.picture.thumbnail)
            .addClass('imgurl')
            .attr('target', '_blank')
            .text(record.name.first)
          ),
          $('<td>').append(record.dob)
        )
      );
    })
  }).fail(function(error) {
    console.log("**********AJAX ERROR: " + error);
  });
}

var savedData = new Map; // Keyed by image URL. Start with nothing.

function saveData() {
  var errors = [];
  // Add selected to map
  $('input.selectRow:checked').each(function(count) {
    // Get the JSON that is stored as value for the checkbox
    var obj = JSON.parse($(this).val());
    // See if this URL was already collected (that's easy with Set)
    if (savedData.get(obj.picture.thumbnail)) {
      errors.push(obj.name.first);
    } else {
      // Append it to the Map:
      savedData.set(obj.picture.thumbnail, obj);
    }
  });
  refreshDisplay();
  if (errors.length) {
    alert('The following were already selected:\n' + errors.join('\n'));
  }
}

function refreshDisplay() {
  $('.container').html('');
  savedData.forEach(function(obj) {
      // Reset container, and append collected data (use jQuery for appending)
      $('.container').append(
        $('<div>').addClass('parent').append(
          $('<label>').addClass('dataLabel').text('Name: '),
          obj.name.first + ' ' + obj.name.last,
          $('<br>'), // line-break between name & pic
          $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
         ...