API tools faq
paste
Advertisement
richarduie

findMatches.html

richarduie
Dec 14th, 2013
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>Find Matches</title>
  6.  
  7.     <style type="text/css">
  8.         table, td { border: 1px solid black; }
  9.         td { padding: 2px 4px; text-align: center; }
  10.     </style>
  11.  
  12.     <script type="text/javascript">
  13.         // raw input arrays apply to both solutions
  14.         var nums1 = [
  15.             170, 997, 678, 416, 260, 7, 658, 239, 63, 802,
  16.             419, 442, 879, 154, 281, 759, 439, 855, 338, 944,
  17.             656, 635, 846, 818, 985, 625, 615, 179, 892, 241,
  18.             8, 75, 196, 52, 318, 132, 466, 824, 923, 225, 22,
  19.             213, 469, 674, 354, 577, 223, 69, 423, 64, 241,
  20.             766, 948, 343, 369, 60, 762, 322, 148, 401, 19,
  21.             266, 993, 313, 139, 740, 388, 341, 802, 224, 270,
  22.             261, 114, 508, 840, 731, 336, 160, 718, 195, 201,
  23.             927, 501, 60, 494, 692, 127, 512, 705, 840, 588,
  24.             408, 703, 98, 823, 44, 346, 288, 482, 101
  25.         ];
  26.  
  27.         var nums2 = [
  28.             509, 357, 679, 451, 372, 245, 747, 813, 75, 746,
  29.             341, 752, 796, 485, 390, 237, 995, 951, 685, 356,
  30.             891, 483, 906, 896, 196, 358, 27, 394, 104, 560,
  31.             987, 173, 779, 750, 752, 715, 895, 955, 241, 267,
  32.             504, 748, 241, 832, 105, 825, 590, 890, 232, 918,
  33.             677, 814, 383, 368, 907, 264, 779, 821, 378, 208,
  34.             566, 120, 416, 782, 207, 274, 530, 547, 927, 161,
  35.             214, 252, 35, 356, 164, 731, 173, 804, 173, 741,
  36.             942, 892, 680, 926, 850, 399, 403, 789, 178, 699,
  37.             566, 841, 136, 749, 546, 746, 237, 661, 182, 350
  38.         ];
  39.  
  40.         // SOLUTION 1 ELEMENTS START HERE - - - -
  41.         // utility
  42.         function get( eid ) {return document.getElementById( eid ); };
  43.  
  44.         // get unique elements of array a
  45.         function kernel( a ) {
  46.             // Set hashtable style associative array working storage.
  47.             var r = new Array();
  48.             // For each element in a...
  49.             for (var i = 0; i < a.length; i++) {
  50.                 // ...assign key/value pair - repeated values have same key and
  51.                 // replace one another, leaving only single instance of value.
  52.                 r[a[i].toString()] = a[i];
  53.             }
  54.             // Initialize return.
  55.             var k = new Array();
  56.             // For each key in r...
  57.             for (var el in r) {
  58.                 // ...set value into index-oriented array.
  59.                 k.push(r[el]);
  60.             }
  61.             return k;
  62.         };
  63.         // find elements in a1 that are also in a2
  64.         function findMatches( a1, a2 ) {
  65.             // index counter for a1
  66.             var i1 = 0;
  67.             // array to collect matches
  68.             var m = [];
  69.             // while index for a1 is in bounds and there are any unprocessed
  70.             // elements of a2 remaining
  71.             while( i1 < a1.length && 0 < a2.length ) {
  72.                 // if current a1 matches first a2, add to collector and
  73.                 // shorten a2 by chopping its first element
  74.                 if ( a1[i1] == a2[0] ) {
  75.                     m.push( a1[i1] );
  76.                     a2.shift();
  77.                     i1++; // increment to next index for a1
  78.                 }
  79.                 // else, if current a1 greater than first a2, shorten a2 by
  80.                 // chopping its first element
  81.                 else if ( a1[i1] > a2[0] ) a2.shift();
  82.                 // NOTE:
  83.                 // whether match found or first a2 smaller than current a1,
  84.                 // first a2 needs never be considered again - could have left
  85.                 // it for case that it was matched without considering whether
  86.                 // smaller, but an extra iteration iteration of the {while}
  87.                 // would be required to remove the unneeded a2 element
  88.                 else i1++; // increment to next index for a1
  89.             }
  90.             return m;
  91.         };
  92.         // SOLUTION 1 ELEMENTS END HERE - - - -
  93.  
  94.         // once the page's HTML elements have resolved...
  95.         window.onload = function() {
  96.             // clean up the arrays by sorting them ascending and removing
  97.             // any dulicate values
  98.             var n1 = kernel( nums1.sort() );
  99.             var n2 = kernel( nums2.sort() );
  100.     /*
  101.             // display the cleaned up versions of the input arrays (optional)
  102.             get( 'n1' ).innerHTML = 'The ' + (nums1.length) + ' raw, unsorted ' +
  103.                 'elements of array 1 give rise to the following ' + (n1.length) +
  104.                 ' unique, sorted elements :<br> ' +
  105.                 n1.join(', ');
  106.             get( 'n2' ).innerHTML = 'The ' + (nums2.length) + ' raw, unsorted ' +
  107.                 'elements of array 2 give rise to the following ' + (n2.length) +
  108.                 ' unique, sorted elements:<br> ' +
  109.                 n2.join(', ');
  110.     */
  111.             // get the matches and display in page
  112.             get( 'out' ).innerHTML = 'Numbers in both: ' +
  113.                 findMatches( n1, n2 ).join(', ');
  114.             displayTable(); // different visualization
  115.         };
  116.  
  117.         // SOLUTION 2 ELEMENTS START HERE - - - -
  118.         // offer a tabular display with a color key to indicate the source(s)
  119.         // of the values
  120.         function displayTable() {
  121.             // get background color for table cell: green, if in first array
  122.             // only - blue, if in second only - red, if in both
  123.             function getBgColor( idx ) {
  124.                 var c = 'white';
  125.                 if (isIn( all[ idx ], n1)) {
  126.                     if (isIn( all[ idx ], n2)) c = '#FAA';
  127.                     else c = '#AFA';
  128.                 }
  129.                 else c = '#AAF';
  130.                 return c;
  131.             };
  132.             // return true if item is in set
  133.             function isIn( item, set ) {
  134.                 var is = false;
  135.                 for (var i = 0; i < set.length; i++) {
  136.                     is = set[i] == item;
  137.                     if (is) break;  // quit for first hit
  138.                 }
  139.                 return is;
  140.             };
  141.             var n1 = kernel( nums1.sort() );
  142.             var n2 = kernel( nums2.sort() );
  143.             var all = kernel( (n1.concat( n2 )).sort() );
  144.             var last = all.length;
  145.             var colCnt = 10;    // arbitrary choice
  146.             var lastRow = Math.ceil( last/colCnt );
  147.             var tbl = '<table>';
  148.             for (var rows = 0; rows < lastRow; rows++) {
  149.                 tbl += '<tr>';
  150.                 for (var cols = 0; cols < colCnt; cols++) {
  151.                     var idx = rows*colCnt + cols;
  152.                     if (idx < last) {
  153.                         var s = ' style="background-color:' +
  154.                             getBgColor( idx );
  155.                         tbl += '<td ' + s + '">' + all[ idx ] + '</td>';
  156.                     }
  157.                     else tbl += '<td >---</td>';    // pad end of table
  158.                 }
  159.                 tbl += '</tr>';
  160.             }
  161.             tbl += '</table>';
  162.             get( 'tbl' ).innerHTML = tbl;
  163.         };
  164.         // SOLUTION 2 ELEMENTS END HERE - - - -
  165.     </script>
  166. </head>
  167.  
  168. <body>
  169.     <p id="n1"></p>
  170.     <p id="n2"></p>
  171.     <p id="out"></p>
  172.     <p id="tbl"></p>
  173. </body>
  174. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!