Crossword puzzle using JavaScript or HTML

Prasad K picture Prasad K · Sep 23, 2015 · Viewed 21.9k times · Source

Please see this image to read the actual assignment

I need to make this crossword puzzle, I am totally new in IT, however I have been trying very hard to make this as I have to submit this as an assignment to get a job in web development. I am having a hard time deciding to use a HTML table with background color changed for the puzzle or do I make a javascript multidimensional array to make this crossword.

And also I have tried this.

<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
	width:330px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border: 1px solid black;
}
#cross{
	text-align: center;
	width:30px;
	height:30px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border: 1px solid white;
}


#buttons{
	width:30%;
	float: right;

}
tr{
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
#leftBox{
	float: left;	
}
#rightBox{
	float: left;
}
#butt{
	width: 100px;
}

</style>

<script>

function initializeScreen(){

	var puzzelTable = document.getElementById("puzzel");

	var puzzelArrayData = preparePuzzelArray();

	for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
		var row = puzzelTable.insertRow(-1);
		var rowData = puzzelArrayData[i];
		for(var j = 0 ; j < rowData.length ; j++){
			var cell = row.insertCell(-1);
			if(rowData[j] != 0){
				cell.innerHTML = rowData[j];
			}else{
				cell.innerHTML = "1";
				cell.style.backgroundColor  = "black";
			}
		}
	}

}

function preparePuzzelArray(){
var items = [	[0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, '?', 0, '?', 0, 0, 0, 0],
				[0, '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'],
				[0, 0, 0, 0, 0, 0, '?', 0, 0, 0, '?'],
				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
			];
return items;
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">
</table>
</div>
<div id="rightBox">
<table>
	<tr><td><input id="butt"  type="submit" value="Clear All"></td></tr>
	<tr><td><input id="butt"  type="submit" value="Check"></td></tr>
	<tr><td><input id="butt"  type="submit" value="Solve"></td></tr>
	<tr><td><input id="butt"  type="submit" value="Clue"></td></tr>
</table>

</body>
</html>

Answer

Alvaro Fla&#241;o Larrondo picture Alvaro Flaño Larrondo · Sep 23, 2015

I know I'm not supposed to do this, but I loved the challenge so I came with a solution in this JSFiddle

It uses the following markup

<div id="puzzle_container">
    <table id="puzzle">
    </table>
</div>

<div id="hints_container">
    <h3>Vertical</h3>
        <div id="vertical_hints_container"></div>
    <h3>Horizontal</h3>
        <div id="horizontal_hints_container"></div>
</div>

<div id="buttons_container">
    <button id="clear_all">Clear All</button>
    <button id="check">Check</button>
    <button id="solve">Solve</button>
    <button id="clue">Clue</button>
</div>

And jQuery.