rethna2/pathFinder_part2.html

## pathFinder_part2.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
    #inputArr{
  width: 300px;
  height: 200px;
}

table{
  border-collapse: collapse;
}
td{
  border: 1px solid #999;
  padding:4px;
  width: 30px;
  height: 30px;
  text-align: center;
}

td.closed {
  background-color: #999;
}

td.open {
  background-color: #ddd;
}
  </style>
</head>
<body>
<div>
  <textarea id = "inputArr">
1,0,1,1,1,1,1,0,0,1,1,1,1,1,1
1,0,1,0,0,0,1,0,0,1,0,0,0,0,0
1,1,1,1,0,0,1,0,1,1,0,1,1,1,0
1,0,0,0,0,1,1,0,1,0,0,1,0,1,0
1,1,1,0,0,1,0,0,1,1,0,1,0,0,0
1,0,1,1,0,1,1,0,0,1,0,1,1,1,1
1,0,0,1,0,0,1,1,1,1,0,1,0,0,1
1,1,0,0,0,0,0,0,0,0,0,1,0,0,1
0,1,0,0,0,0,1,1,1,0,0,1,0,0,1
1,1,1,1,1,1,1,0,1,1,1,1,0,1,1</textarea>
  <div>
    <label>Start Point: </label>
    <input type = "text" id = "startPt" value = '0,9' />
  </div>
  <div>
    <label>End Point: </label>
    <input type = "text" id = "endPt" value = '14,0' />
  </div>
  <button id='createBtn' > Create Puzzle </button>
</div>

<div class = 'tableWrapper'> </div>
<script>
const createBtn = document.querySelector('#createBtn');
const input = document.querySelector('#inputArr');
const output = document.querySelector('.tableWrapper')

const startPtInput = document.getElementById('startPt');
const endPtInput = document.getElementById('endPt');

createBtn.addEventListener('click', () => {

    var data = input.value.split('\n');
    data = data.map(row => row.split(',').map(cell => Number(cell)));
    let startPt = startPtInput.value.split(',')
      .map(value => value.trim())
      .map(value => Number(value));

    let endPt = endPtInput.value.split(',')
      .map(value => value.trim())
      .map(value => Number(value));
    try{
      validate(data);
      validatePt(startPt, data);
      validatePt(endPt, data);

      startPt = {x: startPt[0], y: startPt[1]}
      endPt = {x: endPt[0], y: endPt[1]}

      printBoard(data);
      highlightPts(startPt, endPt)
    }catch(e){
      alert(e.message);
      console.dir(e);
    }
  })

function validate(data){
    if(!Array.isArray(data)){
      throw new Error('Input is not an array');
    }
    if( data.length < 5 || data.length > 30 ){
      throw new Error('Number of rows should be between 5 and 30');
    }

    let columnLength;
    data.forEach((row, index) => {
      if(!Array.isArray(row)){
        throw new Error(`Input line no ${index} is not an array`);
      }

      if(index === 0){
        columnLength = row.length;
      }else{
        if(columnLength !== row.length){
          throw new Error(`Input line no ${index} : No of entries is wrong`);
        }
      }

      row.forEach(cell => {
        if(cell !== 0 && cell !== 1){
          throw new Error(`Input line ${index} : invalid input (only 1 and 0 are allowed`);
        }
      })
    })
    if( columnLength < 5 || columnLength > 30 ){
      throw new Error('Number of columns should be between 5 and 30');
    }
  }


function highlightPts(startPt, endPt){
    document.getElementById(`${startPt.y}~${startPt.x}`).style.backgroundColor = "green";
    document.getElementById(`${endPt.y}~${endPt.x}`).style.backgroundColor = "red";
  }

function validatePt(pt, data){
    if(pt.length !== 2){
      throw new Error ('Invalid Point');
    }
    if(!Number.isInteger(pt[0]) || !Number.isInteger(pt[1]) ){
      throw new Error ('Point co-ordinates should only be number');
    }
    if( pt[0] < 0 || pt[0] >= data[0].length){
      throw new Error ('Point is out of range');
    }
    if( pt[1] < 0 || pt[1] >= data.length){
      throw new Error ('Point is out of range');
    }

    if(data[pt[1]][pt[0]] !== 1 ){
      throw new Error('The given Point is a closed point');
    }
  }


  function printBoard(data){
    const htmlStr =
      `<table>
      ${
        data.map((row, rowIndex) => `<tr>
          ${
            row.map((cell, colIndex) =>
              `<td id = ${`${rowIndex}~${colIndex}`} class = ${ cell===0 ? 'closed' : 'open' } >

              </td>`
              ).join('')
          }
        </tr>`).join('')
       }
      </table>`;
      output.innerHTML = htmlStr;
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title></title>
	<style>
	#inputArr{
	width: 300px;
	height: 200px;
	}

	table{
	border-collapse: collapse;
	}
	td{
	border: 1px solid #999;
	padding:4px;
	width: 30px;
	height: 30px;
	text-align: center;
	}

	td.closed {
	background-color: #999;
	}

	td.open {
	background-color: #ddd;
	}
	</style>
	</head>
	<body>
	<div>
	<textarea id = "inputArr">
	1,0,1,1,1,1,1,0,0,1,1,1,1,1,1
	1,0,1,0,0,0,1,0,0,1,0,0,0,0,0
	1,1,1,1,0,0,1,0,1,1,0,1,1,1,0
	1,0,0,0,0,1,1,0,1,0,0,1,0,1,0
	1,1,1,0,0,1,0,0,1,1,0,1,0,0,0
	1,0,1,1,0,1,1,0,0,1,0,1,1,1,1
	1,0,0,1,0,0,1,1,1,1,0,1,0,0,1
	1,1,0,0,0,0,0,0,0,0,0,1,0,0,1
	0,1,0,0,0,0,1,1,1,0,0,1,0,0,1
	1,1,1,1,1,1,1,0,1,1,1,1,0,1,1</textarea>
	<div>
	<label>Start Point: </label>
	<input type = "text" id = "startPt" value = '0,9' />
	</div>
	<div>
	<label>End Point: </label>
	<input type = "text" id = "endPt" value = '14,0' />
	</div>
	<button id='createBtn' > Create Puzzle </button>
	</div>

	<div class = 'tableWrapper'> </div>
	<script>
	const createBtn = document.querySelector('#createBtn');
	const input = document.querySelector('#inputArr');
	const output = document.querySelector('.tableWrapper')

	const startPtInput = document.getElementById('startPt');
	const endPtInput = document.getElementById('endPt');

	createBtn.addEventListener('click', () => {

	var data = input.value.split('\n');
	data = data.map(row => row.split(',').map(cell => Number(cell)));
	let startPt = startPtInput.value.split(',')
	.map(value => value.trim())
	.map(value => Number(value));

	let endPt = endPtInput.value.split(',')
	.map(value => value.trim())
	.map(value => Number(value));
	try{
	validate(data);
	validatePt(startPt, data);
	validatePt(endPt, data);

	startPt = {x: startPt[0], y: startPt[1]}
	endPt = {x: endPt[0], y: endPt[1]}

	printBoard(data);
	highlightPts(startPt, endPt)
	}catch(e){
	alert(e.message);
	console.dir(e);
	}
	})

	function validate(data){
	if(!Array.isArray(data)){
	throw new Error('Input is not an array');
	}
	if( data.length < 5 \|\| data.length > 30 ){
	throw new Error('Number of rows should be between 5 and 30');
	}

	let columnLength;
	data.forEach((row, index) => {
	if(!Array.isArray(row)){
	throw new Error(`Input line no ${index} is not an array`);
	}

	if(index === 0){
	columnLength = row.length;
	}else{
	if(columnLength !== row.length){
	throw new Error(`Input line no ${index} : No of entries is wrong`);
	}
	}

	row.forEach(cell => {
	if(cell !== 0 && cell !== 1){
	throw new Error(`Input line ${index} : invalid input (only 1 and 0 are allowed`);
	}
	})
	})
	if( columnLength < 5 \|\| columnLength > 30 ){
	throw new Error('Number of columns should be between 5 and 30');
	}
	}


	function highlightPts(startPt, endPt){
	document.getElementById(`${startPt.y}~${startPt.x}`).style.backgroundColor = "green";
	document.getElementById(`${endPt.y}~${endPt.x}`).style.backgroundColor = "red";
	}

	function validatePt(pt, data){
	if(pt.length !== 2){
	throw new Error ('Invalid Point');
	}
	if(!Number.isInteger(pt[0]) \|\| !Number.isInteger(pt[1]) ){
	throw new Error ('Point co-ordinates should only be number');
	}
	if( pt[0] < 0 \|\| pt[0] >= data[0].length){
	throw new Error ('Point is out of range');
	}
	if( pt[1] < 0 \|\| pt[1] >= data.length){
	throw new Error ('Point is out of range');
	}

	if(data[pt[1]][pt[0]] !== 1 ){
	throw new Error('The given Point is a closed point');
	}
	}


	function printBoard(data){
	const htmlStr =
	`<table>
	${
	data.map((row, rowIndex) => `<tr>
	${
	row.map((cell, colIndex) =>
	`<td id = ${`${rowIndex}~${colIndex}`} class = ${ cell===0 ? 'closed' : 'open' } >

	</td>`
	).join('')
	}
	</tr>`).join('')
	}
	</table>`;
	output.innerHTML = htmlStr;
	}
	</script>
	</body>
	</html>