Prasad K Prasad K - 2 months ago 22
CSS Question

Crossword puzzle using JavaScript or HTML

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.



<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
width:100%;
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;
width:50%
height: 50%;
}
#rightBox{
float: left;
}
#butt{
width: 100px;
padding:20px;
}
table{
padding:20px;
}

</style>
</head>
<body>
<div id="leftBox">
<table id="puzzel">
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
</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>




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

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.