nbuechler/jQueryGridTargeting.html

## jQueryGridTargeting.html
<html>
  <head>
  <title>jQueryGridTargeting</title>
  </head>
  <style>

    #rows {
      display: flex;
      flex-direction: column;
    }

    .row {
      display: flex;
    }

    .cell.focused {
      background: red;
    }

    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid #AAA;
    }

  </style>

  <body>

    <h1>
      Grid Targeting
    </h1>
    <p>Click on the grid to change it's color to red.</p>

    <div id="main">
      Loading...
    </div>

  </body>

  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>

  <script type="application/javascript">
    let gridSize = [40, 40]
    let main = $('#main')

    let rows = '<div id="rows">';

    main.html('')
    main.append(rows)

    function addRow(i) {
      let row_id = 'row_' + i
      let row = '<div id="' + row_id + '" class="row">'
      $('#rows').append(row)
    }

    function addCell(i, j) {
      let cell_id = 'f-' + i + '_' + j
      let cell = '<div id="' + cell_id + '" class="cell">'
      $('#row_' + i).append(cell)
      $('#' + cell_id).click(function () {
        $('.cell').removeClass('focused')
        $(this).addClass('focused')
      })
    }

    for (var i = 0; i < gridSize[0]; i++) {
      addRow(i)
      for (var j = 0; j < gridSize[1]; j++) {
        addCell(i, j)
      }
    }


  </script>
</html>
	<html>
	<head>
	<title>jQueryGridTargeting</title>
	</head>
	<style>

	#rows {
	display: flex;
	flex-direction: column;
	}

	.row {
	display: flex;
	}

	.cell.focused {
	background: red;
	}

	.cell {
	width: 20px;
	height: 20px;
	border: 1px solid #AAA;
	}

	</style>

	<body>

	<h1>
	Grid Targeting
	</h1>
	<p>Click on the grid to change it's color to red.</p>

	<div id="main">
	Loading...
	</div>

	</body>

	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous"></script>

	<script type="application/javascript">
	let gridSize = [40, 40]
	let main = $('#main')

	let rows = '<div id="rows">';

	main.html('')
	main.append(rows)

	function addRow(i) {
	let row_id = 'row_' + i
	let row = '<div id="' + row_id + '" class="row">'
	$('#rows').append(row)
	}

	function addCell(i, j) {
	let cell_id = 'f-' + i + '_' + j
	let cell = '<div id="' + cell_id + '" class="cell">'
	$('#row_' + i).append(cell)
	$('#' + cell_id).click(function () {
	$('.cell').removeClass('focused')
	$(this).addClass('focused')
	})
	}

	for (var i = 0; i < gridSize[0]; i++) {
	addRow(i)
	for (var j = 0; j < gridSize[1]; j++) {
	addCell(i, j)
	}
	}


	</script>
	</html>