Created
July 21, 2019 07:39
-
-
Save rethna2/0c7c91f6de901d3dc3f357a9151a7926 to your computer and use it in GitHub Desktop.
Display Maze based on the input
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<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') | |
createBtn.addEventListener('click', () => { | |
var data = input.value.split('\n'); | |
data = data.map(row => row.split(',').map(cell => Number(cell))); | |
try{ | |
validate(data); | |
printBoard(data); | |
}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 printBoard(data){ | |
const htmlStr = | |
`<table> | |
${ | |
data.map(row => `<tr> | |
${ | |
row.map(cell => `<td class=${cell===0 ? 'closed' : 'open' }> </td>`).join('') | |
} | |
</tr>`).join('') | |
} | |
</table>`; | |
output.innerHTML = htmlStr; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment