Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Crossword numbers addition?

Edrol97

Edrol97

Silver Coder
Hi all, I've got this crossword that I've made, but I'm wondering how do I number each of the clue boxes? Link and code below.

Link

HTML: 
    <h1>CrossWords</h1>
    <div id="puzzlecontainer"></div>
    <div class="Clues"><h1>Clues</h1></div>
    <div id="Across">
      <div class="column1">
      <h1>Across</h1>
      <h2>1. Trump's third opponent in the presidential race (6)</h2>
      <h2>3. Below Budget Corporation (3)</h2>
      <h2>4. The main theme of this crossword which might bore some (8)</h2>
      <h2>8. Staple of Conservative economic policy since 2010 (9)</h2>
      <h2>
        10. Decision taken on a 52/48 decision in 2016 in the UK(6)
      </h2>
      <h2>11. The Party that launched the Rwanda Plan (13)</h2>
      <h2>
        12. Political party that's not a party but a business (6,2)
      </h2>
      <h2>
        14. Currency that Britain fought hard not to join (4)
      </h2>
    </div>
      <div id="Down">
        <div class="column2">
        <h1>Down</h1>
        <h2>
          2. Party leader named after the founder of the Labour Party (4,7)
        </h2>
        <h2>
          5. News outlet that hires Lee Anderson and Nigel Farage on its team
          (2,4)
        </h2>
        <h2>
          6. Tory who has a billionaire heiress wife and who spectacularly
          misjudged calling a general election (5,5)
        </h2>
        <h2>
          7. 930-year-old gargoyle that owns Fox News, The Times and The Sun
          among others. (6,7)
        </h2>
        <h2>
          9. Former party leader with name aptly being slang for the male
          appendage (5,7)
        </h2>
        <h2>
          13. Party leader and MP when it suits him whose name rhymes with
          Garage (6)
        </h2>
      </div>
    </div>
    </div>

CSS: 
@font-face {
  font-family: Eliot Lord;
  src: url(Fonts/Eliothand2-Regular.otf);
}
.square {
  border: 1px solid black;
  width: 25px;
  height: 25px;
  float: left;
  margin: 0px;
  padding: 0px;
}
.column1 {
  float: left;
  background-color: #f3efeb;
}
.column2 {
  padding-left: 1%;
  float: right;
  background-color: #f3efeb;
}
.squareempty {
  border: 1px solid black;
  background-color: black;
  width: 25px;
  height: 25px;
  float: left;
  margin: 0px;
  padding: 0px;
}
#puzzlecontainer {
  width: 550px;
  height: 550px !important;
  margin: auto;
}
.square input {
  width: 100%;
  height: 100%;
  text-align: center;
  float: left;
  text-transform: uppercase;
  font-family: Eliot Lord;
  font-size: 14pt;
  border: 0;
  padding: 0px;
  margin: 0px;
  vertical-align: text-top;
}
body::-webkit-scrollbar {
  width: 1em round;
  overflow: scroll;
}
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #000000;
}
body::-webkit-scrollbar-thumb {
  background-color: #000000;
  outline: 1px solid #000000;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover {
  cursor: url("img/background/cursors/pointer1.png");
}
h1 {
  font-size: 5dvh;
}
h2 {
  font-size: 3dvh;
}
#Down {
  display: inline-block;
  top: 0%;
}
input {
  cursor: url("img/background/cursors/text%20cursor.png") !important;
}
.titletext1 {
  background-color: #000000;
}
.titletext1 a {
  color: white;
}
.header {
  background-color: #000000;
}
.number {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 14px;
  color: #333;
}

JavaScript: 
let crossworddata = [
  [
    { active: false, number: 0, row: 0, col: 0, letter: "-" },
    { active: false, number: 0, row: 0, col: 1, letter: "-" },
    { active: false, number: 0, row: 0, col: 2, letter: "-" },
    { active: false, number: 0, row: 0, col: 3, letter: "5" },
    { active: false, number: 0, row: 0, col: 4, letter: "-" },
    { active: false, number: 0, row: 0, col: 5, letter: "1" },
    { active: false, number: 0, row: 0, col: 6, letter: "-" },
    { active: false, number: 0, row: 0, col: 7, letter: "-" },
    { active: false, number: 0, row: 0, col: 8, letter: "-" },
    { active: false, number: 0, row: 0, col: 9, letter: "-" },
    { active: false, number: 0, row: 0, col: 10, letter: "-" },
    { active: false, number: 0, row: 0, col: 11, letter: "-" },
    { active: false, number: 0, row: 0, col: 12, letter: "-" },
    { active: false, number: 0, row: 0, col: 13, letter: "-" },
    { active: true, number: "1", row: 0, col: 14, letter: "K" },
    { active: true, number: "1", row: 0, col: 15, letter: "A" },
    { active: true, number: 0, row: 0, col: 16, letter: "M" },
    { active: true, number: 0, row: 0, col: 17, letter: "A" },
    { active: true, number: 0, row: 0, col: 18, letter: "L" },
    { active: true, number: 0, row: 0, col: 19, letter: "A" },
  ],
  [
    { active: false, number: 0, row: 1, col: 0, letter: "-" },
    { active: false, number: 0, row: 1, col: 1, letter: "-" },
    { active: false, number: 0, row: 1, col: 2, letter: "-" },
    { active: false, number: 0, row: 1, col: 3, letter: "-" },
    { active: false, number: "2", row: 1, col: 4, letter: "" },
    { active: false, number: 0, row: 1, col: 5, letter: "-" },
    { active: false, number: 0, row: 1, col: 6, letter: "-" },
    { active: false, number: 0, row: 1, col: 7, letter: "-" },
    { active: false, number: 0, row: 1, col: 8, letter: "-" },
    { active: false, number: 0, row: 1, col: 9, letter: "-" },
    { active: false, number: 0, row: 1, col: 10, letter: "-" },
    { active: false, number: 0, row: 1, col: 11, letter: "-" },
    { active: false, number: 0, row: 1, col: 12, letter: "-" },
    { active: false, number: 0, row: 1, col: 13, letter: "-" },
    { active: true, number: 0, row: 1, col: 14, letter: "E" },
    { active: false, number: 0, row: 1, col: 15, letter: "" },
    { active: false, number: 0, row: 1, col: 16, letter: "-" },
    { active: false, number: 0, row: 1, col: 17, letter: "-" },
    { active: false, number: 0, row: 1, col: 18, letter: "-" },
    { active: false, number: 0, row: 1, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 2, col: 0, letter: "-" },
    { active: false, number: 0, row: 2, col: 1, letter: "-" },
    { active: false, number: 0, row: 2, col: 2, letter: "-" },
    { active: false, number: "3", row: 2, col: 3, letter: "" },
    { active: 1, number: "2", row: 2, col: 4, letter: "G" },
    { active: false, number: 0, row: 2, col: 5, letter: "" },
    { active: false, number: 0, row: 2, col: 6, letter: "-" },
    { active: false, number: 0, row: 2, col: 7, letter: "-" },
    { active: false, number: 0, row: 2, col: 8, letter: "-" },
    { active: true, number: "4", row: 2, col: 9, letter: "P" },
    { active: 1, number: "4", row: 2, col: 10, letter: "O" },
    { active: 1, number: 0, row: 2, col: 11, letter: "L" },
    { active: 1, number: 0, row: 2, col: 12, letter: "I" },
    { active: 1, number: 0, row: 2, col: 13, letter: "T" },
    { active: 1, number: 0, row: 2, col: 14, letter: "I" },
    { active: 1, number: 0, row: 2, col: 15, letter: "C" },
    { active: 1, number: 0, row: 2, col: 16, letter: "S" },
    { active: false, number: 0, row: 2, col: 17, letter: "" },
    { active: false, number: 0, row: 2, col: 18, letter: "-" },
    { active: false, number: 0, row: 2, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 3, col: 0, letter: "-" },
    { active: false, number: 0, row: 3, col: 1, letter: "-" },
    { active: false, number: 0, row: 3, col: 2, letter: "-" },
    { active: true, number: "3", row: 3, col: 3, letter: "B" },
    { active: 1, number: 0, row: 3, col: 4, letter: "B" },
    { active: true, number: 0, row: 3, col: 5, letter: "C" },
    { active: false, number: "5", row: 3, col: 6, letter: "" },
    { active: false, number: 0, row: 3, col: 7, letter: "-" },
    { active: false, number: 0, row: 3, col: 8, letter: "-" },
    { active: false, number: 0, row: 3, col: 9, letter: "-" },
    { active: false, number: 0, row: 3, col: 10, letter: "-" },
    { active: false, number: 0, row: 3, col: 11, letter: "-" },
    { active: false, number: 0, row: 3, col: 12, letter: "-" },
    { active: false, number: 0, row: 3, col: 13, letter: "-" },
    { active: true, number: 0, row: 3, col: 14, letter: "R" },
    { active: false, number: 0, row: 3, col: 15, letter: "" },
    { active: false, number: 0, row: 3, col: 16, letter: "-" },
    { active: false, number: 0, row: 3, col: 17, letter: "-" },
    { active: false, number: 0, row: 3, col: 18, letter: "-" },
    { active: false, number: 0, row: 3, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 4, col: 0, letter: "" },
    { active: false, number: 0, row: 4, col: 1, letter: "" },
    { active: false, number: 0, row: 4, col: 2, letter: "" },
    { active: false, number: 0, row: 4, col: 3, letter: "" },
    { active: true, number: 0, row: 4, col: 4, letter: "N" },
    { active: false, number: 0, row: 4, col: 5, letter: "" },
    { active: 1, number: "5", row: 4, col: 6, letter: "R" },
    { active: false, number: 0, row: 4, col: 7, letter: "" },
    { active: false, number: 0, row: 4, col: 8, letter: "" },
    { active: false, number: 0, row: 4, col: 9, letter: "-" },
    { active: false, number: 0, row: 4, col: 10, letter: "-" },
    { active: 1, number: "6", row: 4, col: 11, letter: "R" },
    { active: false, number: 0, row: 4, col: 12, letter: "-" },
    { active: false, number: 0, row: 4, col: 13, letter: "-" },
    { active: 1, number: 0, row: 4, col: 14, letter: "S" },
    { active: false, number: 0, row: 4, col: 15, letter: "" },
    { active: false, number: 0, row: 4, col: 16, letter: "-" },
    { active: false, number: 0, row: 4, col: 17, letter: "-" },
    { active: false, number: 0, row: 4, col: 18, letter: "-" },
    { active: false, number: 0, row: 4, col: 19, letter: "-" },
  ],
  [
    { active: true, number: "7", row: 5, col: 0, letter: "A" },
    { active: true, number: 0, row: 5, col: 1, letter: "U" },
    { active: true, number: 0, row: 5, col: 2, letter: "S" },
    { active: true, number: 0, row: 5, col: 3, letter: "T" },
    { active: 1, number: 0, row: 5, col: 4, letter: "E" },
    { active: true, number: 0, row: 5, col: 5, letter: "R" },
    { active: 1, number: 0, row: 5, col: 6, letter: "I" },
    { active: 1, number: 0, row: 5, col: 7, letter: "T" },
    { active: 1, number: 0, row: 5, col: 8, letter: "Y" },
    { active: false, number: 0, row: 5, col: 9, letter: "-" },
    { active: false, number: 0, row: 5, col: 10, letter: "-" },
    { active: 1, number: 0, row: 5, col: 11, letter: "U" },
    { active: false, number: 0, row: 5, col: 12, letter: "-" },
    { active: false, number: 0, row: 5, col: 13, letter: "-" },
    { active: 1, number: 0, row: 5, col: 14, letter: "T" },
    { active: false, number: 0, row: 5, col: 15, letter: "" },
    { active: false, number: 0, row: 5, col: 16, letter: "-" },
    { active: false, number: 0, row: 5, col: 17, letter: "-" },
    { active: false, number: 0, row: 5, col: 18, letter: "-" },
    { active: false, number: 0, row: 5, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 6, col: 0, letter: "-" },
    { active: false, number: 0, row: 6, col: 1, letter: "-" },
    { active: false, number: 0, row: 6, col: 2, letter: "-" },
    { active: false, number: 0, row: 6, col: 3, letter: "-" },
    { active: 1, number: 0, row: 6, col: 4, letter: "W" },
    { active: false, number: 0, row: 6, col: 5, letter: "-" },
    { active: 1, number: 0, row: 6, col: 6, letter: "S" },
    { active: false, number: 0, row: 6, col: 7, letter: "-" },
    { active: false, number: 0, row: 6, col: 8, letter: "-" },
    { active: false, number: 0, row: 6, col: 9, letter: "-" },
    { active: false, number: 0, row: 6, col: 10, letter: "-" },
    { active: 1, number: 0, row: 6, col: 11, letter: "P" },
    { active: false, number: 0, row: 6, col: 12, letter: "-" },
    { active: false, number: 0, row: 6, col: 13, letter: "-" },
    { active: 1, number: 0, row: 6, col: 14, letter: "A" },
    { active: false, number: 0, row: 6, col: 15, letter: "" },
    { active: false, number: 0, row: 6, col: 16, letter: "-" },
    { active: false, number: 0, row: 6, col: 17, letter: "-" },
    { active: false, number: 0, row: 6, col: 18, letter: "-" },
    { active: false, number: 0, row: 6, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 7, col: 0, letter: "-" },
    { active: false, number: 0, row: 7, col: 1, letter: "-" },
    { active: false, number: 0, row: 7, col: 2, letter: "-" },
    { active: false, number: 0, row: 7, col: 3, letter: "-" },
    { active: true, number: 0, row: 7, col: 4, letter: "S" },
    { active: false, number: 0, row: 7, col: 5, letter: "-" },
    { active: 1, number: 0, row: 7, col: 6, letter: "H" },
    { active: false, number: 0, row: 7, col: 7, letter: "-" },
    { active: 1, number: "8", row: 7, col: 8, letter: "B" },
    { active: false, number: 0, row: 7, col: 9, letter: "-" },
    { active: false, number: 0, row: 7, col: 10, letter: "-" },
    { active: 1, number: 0, row: 7, col: 11, letter: "E" },
    { active: false, number: 0, row: 7, col: 12, letter: "-" },
    { active: 1, number: "9", row: 7, col: 13, letter: "B" },
    { active: 1, number: 0, row: 7, col: 14, letter: "R" },
    { active: 1, number: 0, row: 7, col: 15, letter: "E" },
    { active: 1, number: 0, row: 7, col: 16, letter: "X" },
    { active: 1, number: 0, row: 7, col: 17, letter: "I" },
    { active: 1, number: 0, row: 7, col: 18, letter: "T" },
    { active: false, number: 0, row: 7, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 8, col: 0, letter: "-" },
    { active: false, number: 0, row: 8, col: 1, letter: "-" },
    { active: false, number: 0, row: 8, col: 2, letter: "-" },
    { active: false, number: 0, row: 8, col: 3, letter: "" },
    { active: false, number: 0, row: 8, col: 4, letter: "" },
    { active: false, number: 0, row: 8, col: 5, letter: "" },
    { active: 1, number: 0, row: 8, col: 6, letter: "I" },
    { active: false, number: 0, row: 8, col: 7, letter: "" },
    { active: 1, number: 0, row: 8, col: 8, letter: "O" },
    { active: false, number: 0, row: 8, col: 9, letter: "" },
    { active: false, number: 0, row: 8, col: 10, letter: "" },
    { active: 1, number: 0, row: 8, col: 11, letter: "R" },
    { active: false, number: 0, row: 8, col: 12, letter: "-" },
    { active: false, number: 0, row: 8, col: 13, letter: "-" },
    { active: 1, number: 0, row: 8, col: 14, letter: "M" },
    { active: false, number: 0, row: 8, col: 15, letter: "" },
    { active: false, number: 0, row: 8, col: 16, letter: "-" },
    { active: false, number: 0, row: 8, col: 17, letter: "-" },
    { active: false, number: 0, row: 8, col: 18, letter: "-" },
    { active: false, number: 0, row: 8, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 9, col: 0, letter: "-" },
    { active: false, number: 0, row: 9, col: 1, letter: "-" },
    { active: false, number: 0, row: 9, col: 2, letter: "-" },
    { active: 1, number: "10", row: 9, col: 3, letter: "C" },
    { active: 1, number: 0, row: 9, col: 4, letter: "O" },
    { active: 1, number: 0, row: 9, col: 5, letter: "N" },
    { active: 1, number: 0, row: 9, col: 6, letter: "S" },
    { active: 1, number: 0, row: 9, col: 7, letter: "E" },
    { active: 1, number: 0, row: 9, col: 8, letter: "R" },
    { active: 1, number: 0, row: 9, col: 9, letter: "V" },
    { active: 1, number: 0, row: 9, col: 10, letter: "A" },
    { active: 1, number: 0, row: 9, col: 11, letter: "T" },
    { active: 1, number: 0, row: 9, col: 12, letter: "I" },
    { active: 1, number: 0, row: 9, col: 13, letter: "V" },
    { active: 1, number: 0, row: 9, col: 14, letter: "E" },
    { active: 1, number: 0, row: 9, col: 15, letter: "S" },
    { active: false, number: 0, row: 9, col: 16, letter: "-" },
    { active: false, number: 0, row: 9, col: 17, letter: "-" },
    { active: false, number: 0, row: 9, col: 18, letter: "-" },
    { active: false, number: 0, row: 9, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 10, col: 0, letter: "-" },
    { active: false, number: 0, row: 10, col: 1, letter: "-" },
    { active: false, number: 0, row: 10, col: 2, letter: "-" },
    { active: false, number: 0, row: 10, col: 3, letter: "-" },
    { active: false, number: 0, row: 10, col: 4, letter: "-" },
    { active: false, number: 0, row: 10, col: 5, letter: "-" },
    { active: 1, number: 0, row: 10, col: 6, letter: "U" },
    { active: false, number: 0, row: 10, col: 7, letter: "-" },
    { active: 1, number: 0, row: 10, col: 8, letter: "I" },
    { active: false, number: 0, row: 10, col: 9, letter: "-" },
    { active: false, number: 0, row: 10, col: 10, letter: "-" },
    { active: 1, number: 0, row: 10, col: 11, letter: "M" },
    { active: false, number: 0, row: 10, col: 12, letter: "-" },
    { active: false, number: 0, row: 10, col: 13, letter: "-" },
    { active: 1, number: 0, row: 10, col: 14, letter: "R" },
    { active: false, number: 0, row: 10, col: 15, letter: "" },
    { active: false, number: 0, row: 10, col: 16, letter: "-" },
    { active: false, number: 0, row: 10, col: 17, letter: "-" },
    { active: false, number: 0, row: 10, col: 18, letter: "-" },
    { active: false, number: 0, row: 10, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 11, col: 0, letter: "-" },
    { active: false, number: 0, row: 11, col: 1, letter: "-" },
    { active: false, number: 0, row: 11, col: 2, letter: "-" },
    { active: false, number: 0, row: 11, col: 3, letter: "-" },
    { active: false, number: 0, row: 11, col: 4, letter: "-" },
    { active: false, number: 0, row: 11, col: 5, letter: "-" },
    { active: 1, number: 0, row: 11, col: 6, letter: "N" },
    { active: false, number: 0, row: 11, col: 7, letter: "-" },
    { active: 1, number: 0, row: 11, col: 8, letter: "S" },
    { active: false, number: 0, row: 11, col: 9, letter: "-" },
    { active: false, number: 0, row: 11, col: 10, letter: "-" },
    { active: 1, number: 0, row: 11, col: 11, letter: "U" },
    { active: false, number: 0, row: 11, col: 12, letter: "-" },
    { active: false, number: 0, row: 11, col: 13, letter: "-" },
    { active: false, number: 0, row: 11, col: 14, letter: "-" },
    { active: false, number: 0, row: 11, col: 15, letter: "-" },
    { active: false, number: 0, row: 11, col: 16, letter: "-" },
    { active: false, number: 0, row: 11, col: 17, letter: "-" },
    { active: false, number: 0, row: 11, col: 18, letter: "-" },
    { active: false, number: 0, row: 11, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 12, col: 0, letter: "-" },
    { active: false, number: 0, row: 12, col: 1, letter: "-" },
    { active: false, number: 0, row: 12, col: 2, letter: "-" },
    { active: false, number: 0, row: 12, col: 3, letter: "-" },
    { active: false, number: 0, row: 12, col: 4, letter: "-" },
    { active: false, number: 0, row: 12, col: 5, letter: "-" },
    { active: 1, number: 0, row: 12, col: 6, letter: "A" },
    { active: false, number: 0, row: 12, col: 7, letter: "-" },
    { active: 1, number: 0, row: 12, col: 8, letter: "J" },
    { active: false, number: 0, row: 12, col: 9, letter: "-" },
    { active: false, number: 0, row: 12, col: 10, letter: "-" },
    { active: 1, number: "11", row: 12, col: 11, letter: "R" },
    { active: 1, number: 0, row: 12, col: 12, letter: "E" },
    { active: 1, number: "12", row: 12, col: 13, letter: "F" },
    { active: 1, number: 0, row: 12, col: 14, letter: "O" },
    { active: 1, number: 0, row: 12, col: 15, letter: "R" },
    { active: 1, number: 0, row: 12, col: 16, letter: "M" },
    { active: 1, number: 0, row: 12, col: 17, letter: "U" },
    { active: 1, number: 0, row: 12, col: 18, letter: "K" },
    { active: false, number: 0, row: 12, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 13, col: 0, letter: "-" },
    { active: false, number: 0, row: 13, col: 1, letter: "-" },
    { active: false, number: 0, row: 13, col: 2, letter: "-" },
    { active: false, number: 0, row: 13, col: 3, letter: "-" },
    { active: false, number: 0, row: 13, col: 4, letter: "-" },
    { active: false, number: 0, row: 13, col: 5, letter: "-" },
    { active: 1, number: 0, row: 13, col: 6, letter: "K" },
    { active: false, number: 0, row: 13, col: 7, letter: "-" },
    { active: 1, number: 0, row: 13, col: 8, letter: "O" },
    { active: false, number: 0, row: 13, col: 9, letter: "-" },
    { active: false, number: 0, row: 13, col: 10, letter: "-" },
    { active: 1, number: 0, row: 13, col: 11, letter: "D" },
    { active: false, number: 0, row: 13, col: 12, letter: "-" },
    { active: 1, number: 0, row: 13, col: 13, letter: "A" },
    { active: false, number: 0, row: 13, col: 14, letter: "-" },
    { active: false, number: 0, row: 13, col: 15, letter: "-" },
    { active: false, number: 0, row: 13, col: 16, letter: "-" },
    { active: false, number: 0, row: 13, col: 17, letter: "-" },
    { active: false, number: 0, row: 13, col: 18, letter: "-" },
    { active: false, number: 0, row: 13, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 14, col: 0, letter: "-" },
    { active: false, number: 0, row: 14, col: 1, letter: "-" },
    { active: false, number: 0, row: 14, col: 2, letter: "-" },
    { active: false, number: 0, row: 14, col: 3, letter: "-" },
    { active: false, number: 0, row: 14, col: 4, letter: "-" },
    { active: false, number: 0, row: 14, col: 5, letter: "-" },
    { active: false, number: 0, row: 14, col: 6, letter: "-" },
    { active: false, number: 0, row: 14, col: 7, letter: "-" },
    { active: 1, number: 0, row: 14, col: 8, letter: "H" },
    { active: false, number: 0, row: 14, col: 9, letter: "-" },
    { active: false, number: 0, row: 14, col: 10, letter: "-" },
    { active: 1, number: 0, row: 14, col: 11, letter: "O" },
    { active: false, number: 0, row: 14, col: 12, letter: "-" },
    { active: 1, number: 0, row: 14, col: 13, letter: "R" },
    { active: false, number: 0, row: 14, col: 14, letter: "-" },
    { active: false, number: 0, row: 14, col: 15, letter: "-" },
    { active: false, number: 0, row: 14, col: 16, letter: "-" },
    { active: false, number: 0, row: 14, col: 17, letter: "-" },
    { active: false, number: 0, row: 14, col: 18, letter: "-" },
    { active: false, number: 0, row: 14, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 15, col: 0, letter: "-" },
    { active: false, number: 0, row: 15, col: 1, letter: "-" },
    { active: false, number: 0, row: 15, col: 2, letter: "-" },
    { active: false, number: 0, row: 15, col: 3, letter: "-" },
    { active: false, number: 0, row: 15, col: 4, letter: "-" },
    { active: false, number: 0, row: 15, col: 5, letter: "-" },
    { active: false, number: 0, row: 15, col: 6, letter: "-" },
    { active: false, number: 0, row: 15, col: 7, letter: "-" },
    { active: 1, number: 0, row: 15, col: 8, letter: "N" },
    { active: false, number: 0, row: 15, col: 9, letter: "-" },
    { active: false, number: 0, row: 15, col: 10, letter: "-" },
    { active: 1, number: 0, row: 15, col: 11, letter: "C" },
    { active: false, number: 0, row: 15, col: 12, letter: "-" },
    { active: 1, number: 0, row: 15, col: 13, letter: "A" },
    { active: false, number: 0, row: 15, col: 14, letter: "-" },
    { active: false, number: 0, row: 15, col: 15, letter: "-" },
    { active: false, number: 0, row: 15, col: 16, letter: "-" },
    { active: false, number: 0, row: 15, col: 17, letter: "-" },
    { active: false, number: 0, row: 15, col: 18, letter: "-" },
    { active: false, number: 0, row: 15, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 16, col: 0, letter: "-" },
    { active: false, number: 0, row: 16, col: 1, letter: "-" },
    { active: false, number: 0, row: 16, col: 2, letter: "-" },
    { active: false, number: 0, row: 16, col: 3, letter: "-" },
    { active: false, number: 0, row: 16, col: 4, letter: "-" },
    { active: false, number: 0, row: 16, col: 5, letter: "-" },
    { active: false, number: 0, row: 16, col: 6, letter: "-" },
    { active: false, number: 0, row: 16, col: 7, letter: "-" },
    { active: 1, number: 0, row: 16, col: 8, letter: "S" },
    { active: false, number: 0, row: 16, col: 9, letter: "-" },
    { active: false, number: 0, row: 16, col: 10, letter: "-" },
    { active: 1, number: 0, row: 16, col: 11, letter: "H" },
    { active: false, number: 0, row: 16, col: 12, letter: "-" },
    { active: 1, number: 0, row: 16, col: 13, letter: "G" },
    { active: false, number: 0, row: 16, col: 14, letter: "-" },
    { active: false, number: 0, row: 16, col: 15, letter: "-" },
    { active: false, number: 0, row: 16, col: 16, letter: "-" },
    { active: false, number: 0, row: 16, col: 17, letter: "-" },
    { active: false, number: 0, row: 16, col: 18, letter: "-" },
    { active: false, number: 0, row: 16, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 17, col: 0, letter: "-" },
    { active: false, number: 0, row: 17, col: 1, letter: "-" },
    { active: false, number: 0, row: 17, col: 2, letter: "-" },
    { active: false, number: 0, row: 17, col: 3, letter: "-" },
    { active: false, number: 0, row: 17, col: 4, letter: "-" },
    { active: false, number: 0, row: 17, col: 5, letter: "-" },
    { active: false, number: 0, row: 17, col: 6, letter: "-" },
    { active: false, number: 0, row: 17, col: 7, letter: "-" },
    { active: 1, number: 0, row: 17, col: 8, letter: "O" },
    { active: false, number: 0, row: 17, col: 9, letter: "-" },
    { active: false, number: 0, row: 17, col: 10, letter: "-" },
    { active: false, number: 0, row: 17, col: 11, letter: "-" },
    { active: false, number: 0, row: 17, col: 12, letter: "-" },
    { active: 1, number: "13", row: 17, col: 13, letter: "E" },
    { active: true, number: 0, row: 17, col: 14, letter: "U" },
    { active: true, number: 0, row: 17, col: 15, letter: "R" },
    { active: true, number: 0, row: 17, col: 16, letter: "O" },
    { active: false, number: 0, row: 17, col: 17, letter: "" },
    { active: false, number: 0, row: 17, col: 18, letter: "-" },
    { active: false, number: 0, row: 17, col: 19, letter: "-" },
  ],
  [
    { active: false, number: 0, row: 18, col: 0, letter: "-" },
    { active: false, number: 0, row: 18, col: 1, letter: "-" },
    { active: false, number: 0, row: 18, col: 2, letter: "-" },
    { active: false, number: 0, row: 18, col: 3, letter: "-" },
    { active: false, number: 0, row: 18, col: 4, letter: "-" },
    { active: false, number: 0, row: 18, col: 5, letter: "-" },
    { active: false, number: 0, row: 18, col: 6, letter: "-" },
    { active: false, number: 0, row: 18, col: 7, letter: "-" },
    { active: 1, number: 0, row: 18, col: 8, letter: "N" },
    { active: false, number: 0, row: 18, col: 9, letter: "-" },
    { active: false, number: 0, row: 18, col: 10, letter: "-" },
    { active: false, number: 0, row: 18, col: 11, letter: "-" },
    { active: false, number: 0, row: 18, col: 12, letter: "-" },
    { active: false, number: 0, row: 18, col: 13, letter: "-" },
    { active: false, number: 0, row: 18, col: 14, letter: "-" },
    { active: false, number: 0, row: 18, col: 15, letter: "-" },
    { active: false, number: 0, row: 18, col: 16, letter: "-" },
    { active: false, number: 0, row: 18, col: 17, letter: "-" },
    { active: false, number: 0, row: 18, col: 18, letter: "-" },
    { active: false, number: 0, row: 18, col: 19, letter: "-" },
  ],
];


JavaScript: 
let puzzle = document.getElementById("puzzlecontainer");
let activesquare = 0;
function storenum(num) {
  activesquare = num;
}

function ActivateBox() {
  let box = (document.getElementById(
    activesquare.toString()
  ).parentElement.style.border = "0px");
}
function letterpress(letter, r, c) {
  console.log(letter);
  let cdata = crossworddata[r][c];
  if (letter.toUpperCase() == cdata.letter) {
    let num = String(r + "-" + c);
    console.log(num);
    let Box = document.getElementById(num);
    Box.style.backgroundColor = "#4A7729";
  } else {
    let num = String(r + "-" + c);
    console.log(num);
    let Box = document.getElementById(num);
    Box.style.backgroundColor = "#b50938";
  }
}
function CreatePuzzle() {
  let crossword = "";
  for (let i = 0; i < crossworddata.length; i++) {
    let row = "<div>";
    let rowlength = crossworddata[i].length;
    for (let n = 0; n < rowlength; n++) {
      console.log(crossworddata[i][n].active);
      if (crossworddata[i][n].active == false) {
        row = row + "<div class='squareempty'></div>";
      } else {
        let r = crossworddata[i][n].row;
        let c = crossworddata[i][n].col;
        let rc = String(r + "-" + c);
        row =
          row +
          "<div class='square'><input id='" +
          rc +
          "' class='squareinput' onkeyup='letterpress(this.value," +
          r +
          "," +
          c +
          ")' type='text' maxlength='1'></input></div>";
      }
    }

    row = row + "</div>";
    crossword = crossword + row;
  }
  puzzle.innerHTML = crossword;
  /*let row = "";
  let num = 1;
  for (let i = 0; i < 20; i++) {
    row = row + "<tr>";
    for (let i = 0; i < 20; i++) {
      row =
        row +
        "<td class='square'><input id='" +
        num.toString() +
        "'type='text' maxlength='1' onclick='storenum(" +
        num.toString() +
        ")'></td>";
      num = num + 1;
    }

    row = row + "</tr>";
  }
  puzzle.innerHTML = row;*/
}

CreatePuzzle();
//console.log(crossworddata);

JSON: 
[
  [
    { "active": false, "number": 0, "row": 0, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 3, "letter": "5" },
    { "active": false, "number": 0, "row": 0, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 5, "letter": "1" },
    { "active": false, "number": 0, "row": 0, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 7, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 8, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 10, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 11, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 0, "col": 13, "letter": "-" },
    { "active": true, "number": "1", "row": 0, "col": 14, "letter": "K" },
    { "active": false, "number": "1", "row": 0, "col": 15, "letter": "A" },
    { "active": false, "number": 0, "row": 0, "col": 16, "letter": "M" },
    { "active": false, "number": 0, "row": 0, "col": 17, "letter": "A" },
    { "active": false, "number": 0, "row": 0, "col": 18, "letter": "L" },
    { "active": false, "number": 0, "row": 0, "col": 19, "letter": "A" }
  ],
  [
    { "active": false, "number": 0, "row": 1, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 3, "letter": "-" },
    { "active": false, "number": "2", "row": 1, "col": 4, "letter": "" },
    { "active": false, "number": 0, "row": 1, "col": 5, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 7, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 8, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 10, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 11, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 13, "letter": "-" },
    { "active": true, "number": 0, "row": 1, "col": 14, "letter": "E" },
    { "active": false, "number": 0, "row": 1, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 1, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 1, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 2, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 2, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 2, "col": 2, "letter": "-" },
    { "active": false, "number": "3", "row": 2, "col": 3, "letter": "" },
    { "active": 1, "number": "2", "row": 2, "col": 4, "letter": "G" },
    { "active": false, "number": 0, "row": 2, "col": 5, "letter": "" },
    { "active": false, "number": 0, "row": 2, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 2, "col": 7, "letter": "-" },
    { "active": false, "number": 0, "row": 2, "col": 8, "letter": "-" },
    { "active": true, "number": "4", "row": 2, "col": 9, "letter": "P" },
    { "active": 1, "number": "4", "row": 2, "col": 10, "letter": "O" },
    { "active": 1, "number": 0, "row": 2, "col": 11, "letter": "L" },
    { "active": 1, "number": 0, "row": 2, "col": 12, "letter": "I" },
    { "active": 1, "number": 0, "row": 2, "col": 13, "letter": "T" },
    { "active": 1, "number": 0, "row": 2, "col": 14, "letter": "I" },
    { "active": 1, "number": 0, "row": 2, "col": 15, "letter": "C" },
    { "active": 1, "number": 0, "row": 2, "col": 16, "letter": "S" },
    { "active": false, "number": 0, "row": 2, "col": 17, "letter": "" },
    { "active": false, "number": 0, "row": 2, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 2, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 3, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 2, "letter": "-" },
    { "active": true, "number": "3", "row": 3, "col": 3, "letter": "B" },
    { "active": 1, "number": 0, "row": 3, "col": 4, "letter": "B" },
    { "active": true, "number": 0, "row": 3, "col": 5, "letter": "C" },
    { "active": false, "number": "5", "row": 3, "col": 6, "letter": "" },
    { "active": false, "number": 0, "row": 3, "col": 7, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 8, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 10, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 11, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 13, "letter": "-" },
    { "active": true, "number": 0, "row": 3, "col": 14, "letter": "R" },
    { "active": false, "number": 0, "row": 3, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 3, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 3, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 4, "col": 0, "letter": "" },
    { "active": false, "number": 0, "row": 4, "col": 1, "letter": "" },
    { "active": false, "number": 0, "row": 4, "col": 2, "letter": "" },
    { "active": false, "number": 0, "row": 4, "col": 3, "letter": "" },
    { "active": true, "number": 0, "row": 4, "col": 4, "letter": "N" },
    { "active": false, "number": 0, "row": 4, "col": 5, "letter": "" },
    { "active": 1, "number": "5", "row": 4, "col": 6, "letter": "R" },
    { "active": false, "number": 0, "row": 4, "col": 7, "letter": "" },
    { "active": false, "number": 0, "row": 4, "col": 8, "letter": "" },
    { "active": false, "number": 0, "row": 4, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 4, "col": 10, "letter": "-" },
    { "active": 1, "number": "6", "row": 4, "col": 11, "letter": "R" },
    { "active": false, "number": 0, "row": 4, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 4, "col": 13, "letter": "-" },
    { "active": 1, "number": 0, "row": 4, "col": 14, "letter": "S" },
    { "active": false, "number": 0, "row": 4, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 4, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 4, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 4, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 4, "col": 19, "letter": "-" }
  ],
  [
    { "active": true, "number": "7", "row": 5, "col": 0, "letter": "A" },
    { "active": true, "number": 0, "row": 5, "col": 1, "letter": "U" },
    { "active": true, "number": 0, "row": 5, "col": 2, "letter": "S" },
    { "active": true, "number": 0, "row": 5, "col": 3, "letter": "T" },
    { "active": 1, "number": 0, "row": 5, "col": 4, "letter": "E" },
    { "active": true, "number": 0, "row": 5, "col": 5, "letter": "R" },
    { "active": 1, "number": 0, "row": 5, "col": 6, "letter": "I" },
    { "active": 1, "number": 0, "row": 5, "col": 7, "letter": "T" },
    { "active": 1, "number": 0, "row": 5, "col": 8, "letter": "Y" },
    { "active": false, "number": 0, "row": 5, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 5, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 5, "col": 11, "letter": "U" },
    { "active": false, "number": 0, "row": 5, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 5, "col": 13, "letter": "-" },
    { "active": 1, "number": 0, "row": 5, "col": 14, "letter": "T" },
    { "active": false, "number": 0, "row": 5, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 5, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 5, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 5, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 5, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 6, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 3, "letter": "-" },
    { "active": 1, "number": 0, "row": 6, "col": 4, "letter": "W" },
    { "active": false, "number": 0, "row": 6, "col": 5, "letter": "-" },
    { "active": 1, "number": 0, "row": 6, "col": 6, "letter": "S" },
    { "active": false, "number": 0, "row": 6, "col": 7, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 8, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 6, "col": 11, "letter": "P" },
    { "active": false, "number": 0, "row": 6, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 13, "letter": "-" },
    { "active": 1, "number": 0, "row": 6, "col": 14, "letter": "A" },
    { "active": false, "number": 0, "row": 6, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 6, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 6, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 7, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 7, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 7, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 7, "col": 3, "letter": "-" },
    { "active": true, "number": 0, "row": 7, "col": 4, "letter": "S" },
    { "active": false, "number": 0, "row": 7, "col": 5, "letter": "-" },
    { "active": 1, "number": 0, "row": 7, "col": 6, "letter": "H" },
    { "active": false, "number": 0, "row": 7, "col": 7, "letter": "-" },
    { "active": 1, "number": "8", "row": 7, "col": 8, "letter": "B" },
    { "active": false, "number": 0, "row": 7, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 7, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 7, "col": 11, "letter": "E" },
    { "active": false, "number": 0, "row": 7, "col": 12, "letter": "-" },
    { "active": 1, "number": "9", "row": 7, "col": 13, "letter": "B" },
    { "active": 1, "number": 0, "row": 7, "col": 14, "letter": "R" },
    { "active": 1, "number": 0, "row": 7, "col": 15, "letter": "E" },
    { "active": 1, "number": 0, "row": 7, "col": 16, "letter": "X" },
    { "active": 1, "number": 0, "row": 7, "col": 17, "letter": "I" },
    { "active": 1, "number": 0, "row": 7, "col": 18, "letter": "T" },
    { "active": false, "number": 0, "row": 7, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 8, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 3, "letter": "" },
    { "active": false, "number": 0, "row": 8, "col": 4, "letter": "" },
    { "active": false, "number": 0, "row": 8, "col": 5, "letter": "" },
    { "active": 1, "number": 0, "row": 8, "col": 6, "letter": "I" },
    { "active": false, "number": 0, "row": 8, "col": 7, "letter": "" },
    { "active": 1, "number": 0, "row": 8, "col": 8, "letter": "O" },
    { "active": false, "number": 0, "row": 8, "col": 9, "letter": "" },
    { "active": false, "number": 0, "row": 8, "col": 10, "letter": "" },
    { "active": 1, "number": 0, "row": 8, "col": 11, "letter": "R" },
    { "active": false, "number": 0, "row": 8, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 13, "letter": "-" },
    { "active": 1, "number": 0, "row": 8, "col": 14, "letter": "M" },
    { "active": false, "number": 0, "row": 8, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 8, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 8, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 9, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 9, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 9, "col": 2, "letter": "-" },
    { "active": 1, "number": "10", "row": 9, "col": 3, "letter": "C" },
    { "active": 1, "number": 0, "row": 9, "col": 4, "letter": "O" },
    { "active": 1, "number": 0, "row": 9, "col": 5, "letter": "N" },
    { "active": 1, "number": 0, "row": 9, "col": 6, "letter": "S" },
    { "active": 1, "number": 0, "row": 9, "col": 7, "letter": "E" },
    { "active": 1, "number": 0, "row": 9, "col": 8, "letter": "R" },
    { "active": 1, "number": 0, "row": 9, "col": 9, "letter": "V" },
    { "active": 1, "number": 0, "row": 9, "col": 10, "letter": "A" },
    { "active": 1, "number": 0, "row": 9, "col": 11, "letter": "T" },
    { "active": 1, "number": 0, "row": 9, "col": 12, "letter": "I" },
    { "active": 1, "number": 0, "row": 9, "col": 13, "letter": "V" },
    { "active": 1, "number": 0, "row": 9, "col": 14, "letter": "E" },
    { "active": 1, "number": 0, "row": 9, "col": 15, "letter": "S" },
    { "active": false, "number": 0, "row": 9, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 9, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 9, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 9, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 10, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 5, "letter": "-" },
    { "active": 1, "number": 0, "row": 10, "col": 6, "letter": "U" },
    { "active": false, "number": 0, "row": 10, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 10, "col": 8, "letter": "I" },
    { "active": false, "number": 0, "row": 10, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 10, "col": 11, "letter": "M" },
    { "active": false, "number": 0, "row": 10, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 13, "letter": "-" },
    { "active": 1, "number": 0, "row": 10, "col": 14, "letter": "R" },
    { "active": false, "number": 0, "row": 10, "col": 15, "letter": "" },
    { "active": false, "number": 0, "row": 10, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 10, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 11, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 5, "letter": "-" },
    { "active": 1, "number": 0, "row": 11, "col": 6, "letter": "N" },
    { "active": false, "number": 0, "row": 11, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 11, "col": 8, "letter": "S" },
    { "active": false, "number": 0, "row": 11, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 11, "col": 11, "letter": "U" },
    { "active": false, "number": 0, "row": 11, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 13, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 14, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 15, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 11, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 12, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 12, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 12, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 12, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 12, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 12, "col": 5, "letter": "-" },
    { "active": 1, "number": 0, "row": 12, "col": 6, "letter": "A" },
    { "active": false, "number": 0, "row": 12, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 12, "col": 8, "letter": "J" },
    { "active": false, "number": 0, "row": 12, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 12, "col": 10, "letter": "-" },
    { "active": 1, "number": "11", "row": 12, "col": 11, "letter": "R" },
    { "active": 1, "number": 0, "row": 12, "col": 12, "letter": "E" },
    { "active": 1, "number": "12", "row": 12, "col": 13, "letter": "F" },
    { "active": 1, "number": 0, "row": 12, "col": 14, "letter": "O" },
    { "active": 1, "number": 0, "row": 12, "col": 15, "letter": "R" },
    { "active": 1, "number": 0, "row": 12, "col": 16, "letter": "M" },
    { "active": 1, "number": 0, "row": 12, "col": 17, "letter": "U" },
    { "active": 1, "number": 0, "row": 12, "col": 18, "letter": "K" },
    { "active": false, "number": 0, "row": 12, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 13, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 5, "letter": "-" },
    { "active": 1, "number": 0, "row": 13, "col": 6, "letter": "K" },
    { "active": false, "number": 0, "row": 13, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 13, "col": 8, "letter": "O" },
    { "active": false, "number": 0, "row": 13, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 13, "col": 11, "letter": "D" },
    { "active": false, "number": 0, "row": 13, "col": 12, "letter": "-" },
    { "active": 1, "number": 0, "row": 13, "col": 13, "letter": "A" },
    { "active": false, "number": 0, "row": 13, "col": 14, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 15, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 13, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 14, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 5, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 14, "col": 8, "letter": "H" },
    { "active": false, "number": 0, "row": 14, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 14, "col": 11, "letter": "O" },
    { "active": false, "number": 0, "row": 14, "col": 12, "letter": "-" },
    { "active": 1, "number": 0, "row": 14, "col": 13, "letter": "R" },
    { "active": false, "number": 0, "row": 14, "col": 14, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 15, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 14, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 15, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 5, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 15, "col": 8, "letter": "N" },
    { "active": false, "number": 0, "row": 15, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 15, "col": 11, "letter": "C" },
    { "active": false, "number": 0, "row": 15, "col": 12, "letter": "-" },
    { "active": 1, "number": 0, "row": 15, "col": 13, "letter": "A" },
    { "active": false, "number": 0, "row": 15, "col": 14, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 15, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 15, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 16, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 5, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 16, "col": 8, "letter": "S" },
    { "active": false, "number": 0, "row": 16, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 10, "letter": "-" },
    { "active": 1, "number": 0, "row": 16, "col": 11, "letter": "H" },
    { "active": false, "number": 0, "row": 16, "col": 12, "letter": "-" },
    { "active": 1, "number": 0, "row": 16, "col": 13, "letter": "G" },
    { "active": false, "number": 0, "row": 16, "col": 14, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 15, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 16, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 17, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 5, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 17, "col": 8, "letter": "O" },
    { "active": false, "number": 0, "row": 17, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 10, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 11, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 12, "letter": "-" },
    { "active": 1, "number": "13", "row": 17, "col": 13, "letter": "E" },
    { "active": true, "number": 0, "row": 17, "col": 14, "letter": "U" },
    { "active": true, "number": 0, "row": 17, "col": 15, "letter": "R" },
    { "active": true, "number": 0, "row": 17, "col": 16, "letter": "O" },
    { "active": false, "number": 0, "row": 17, "col": 17, "letter": "" },
    { "active": false, "number": 0, "row": 17, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 17, "col": 19, "letter": "-" }
  ],
  [
    { "active": false, "number": 0, "row": 18, "col": 0, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 1, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 2, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 3, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 4, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 5, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 6, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 7, "letter": "-" },
    { "active": 1, "number": 0, "row": 18, "col": 8, "letter": "N" },
    { "active": false, "number": 0, "row": 18, "col": 9, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 10, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 11, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 12, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 13, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 14, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 15, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 16, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 17, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 18, "letter": "-" },
    { "active": false, "number": 0, "row": 18, "col": 19, "letter": "-" }
  ]
]
 
Last edited:
Sort by date Sort by votes
give this a try :-


Code: 
function CreatePuzzle() {
  let crossword = "";
  for (let i = 0; i < crossworddata.length; i++) {
    let row = "<div>";
    let rowlength = crossworddata[i].length;
    for (let n = 0; n < rowlength; n++) {
      let cell = crossworddata[i][n];
      if (cell.active == false) {
        row += "<div class='squareempty'></div>";
      } else {
        let r = cell.row;
        let c = cell.col;
        let rc = `${r}-${c}`;
        let number = cell.number;
        let numberHTML = "";
        if (number != 0 && number != "") {
          numberHTML = `<div class='number'>${number}</div>`;
        }
        row += `
          <div class='square'>
            ${numberHTML}
            <input id='${rc}' class='squareinput' onkeyup='letterpress(this.value, ${r}, ${c})' type='text' maxlength='1'>
          </div>`;
      }
    }
    row += "</div>";
    crossword += row;
  }
  puzzle.innerHTML = crossword;
}

I would also look at looping your code as thats alot of code to write 😀
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
simong1993 said:
give this a try :-


Code: 
function CreatePuzzle() {
  let crossword = "";
  for (let i = 0; i < crossworddata.length; i++) {
    let row = "<div>";
    let rowlength = crossworddata[i].length;
    for (let n = 0; n < rowlength; n++) {
      let cell = crossworddata[i][n];
      if (cell.active == false) {
        row += "<div class='squareempty'></div>";
      } else {
        let r = cell.row;
        let c = cell.col;
        let rc = `${r}-${c}`;
        let number = cell.number;
        let numberHTML = "";
        if (number != 0 && number != "") {
          numberHTML = `<div class='number'>${number}</div>`;
        }
        row += `
          <div class='square'>
            ${numberHTML}
            <input id='${rc}' class='squareinput' onkeyup='letterpress(this.value, ${r}, ${c})' type='text' maxlength='1'>
          </div>`;
      }
    }
    row += "</div>";
    crossword += row;
  }
  puzzle.innerHTML = crossword;
}

I would also look at looping your code as thats alot of code to write 😀
Click to expand...
Hi Simon,

It's still not showing any numbers. Is there css I need to add?
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom