title: Crossword puzzle using JavaScript or HTML
body: <p><a href="https://drive.google.com/file/d/0B00URazV5RS1djB2NFZrclMwb0k/view?usp=sharing" rel="nofollow">Please see this image to read the actual assignment</a></p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cross word Puzzel&lt;/title&gt;
  &lt;style&gt;
  #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;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="leftBox"&gt;
  &lt;table id="puzzel"&gt;
    &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
    &lt;/tr&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross"&gt;?&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
   &lt;td id="cross" bgcolor="#000000"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="rightBox"&gt;
  &lt;table&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Clear All"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Check"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Solve"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Clue"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
   And also I have tried this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cross word Puzzel&lt;/title&gt;
  &lt;style&gt;
  #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;
  }
  
  &lt;/style&gt;
  
  &lt;script&gt;
  
  function initializeScreen(){
  
   var puzzelTable = document.getElementById("puzzel");
  
   var puzzelArrayData = preparePuzzelArray();
  
   for ( var i = 0; i &lt; puzzelArrayData.length ; i++ ) {
    var row = puzzelTable.insertRow(-1);
    var rowData = puzzelArrayData[i];
    for(var j = 0 ; j &lt; 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;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initializeScreen()"&gt;
  &lt;div id="leftBox"&gt;
  &lt;table id="puzzel"&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="rightBox"&gt;
  &lt;table&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Clear All"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Check"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Solve"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input id="butt"  type="submit" value="Clue"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>