Adding numbers and letters to chessboard

Question

I have a simple chessboard created with JavaScript and I want to add letters and numbers to the sides of my board so it will look like real chessboard. I've tried using for loop to add elements with letters and numbers but conditions seem to be false, because it didn't work. Here is my HTML code:

        let table = document.createElement("table");
    for (let i = 8; i > 0; i--) {
      let tr = document.createElement('tr');
      let number = document.createElement('td');
      number.className = 'number';
      number.innerHTML = i;
      tr.appendChild(number);
      for (let j = 0; j < 8; j++) {
        let td = document.createElement('td');
        if (i % 2 == j % 2) {
          td.className = "white";
        } else {
          td.className = "black";
        }
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    document.body.appendChild(table);

* {
      margin: 0;
      padding: 0;
    }
    table {
      border-spacing: 0;
      margin: 20px 20px;
    }
    .black {
      width: 38px;
      height: 38px;
      background: black;
      border: 1px solid transparent;
    }
    .white {
      width: 38px;
      height: 38px;
      background: white;
      border: 1px solid black;
    }
    .number {
      padding-right: 10px;
      font-size: 18px;
      font-weight: bold;
    }

The problem seems to be that you don't have code to write down letters and numbers... — Federico klez Culloca, Jun 24 '19 at 09:15
The numbers and letters would exist outside your 8x8 table. You'll either need to add extra columns and rows to your table and put the numbers and letters in there, or you'd need to write CSS that would place them outside the table put relative to existing cells. (I guess that's possible but my CSS is rusty) — Rup, Jun 24 '19 at 09:16
try if (i % 2 == j % 2) { td.className = "white"; td.innerHTML = 'A'; } — Hien Nguyen, Jun 24 '19 at 09:20
@HienNguyen that would'n put letters and numbers outside the chessboard, as asked. That would put them in squares where both the row and column are even numbers. And always write `'A'`. — Federico klez Culloca, Jun 24 '19 at 09:28

connexo · Accepted Answer · 2019-06-24T09:47:50.580

Here's what I would do (still needs some tweaking with the styles):

let table = document.createElement("table");
let letters = "ABCDEFGH";
for (let i = 0; i < 9; i++) {
  let tr = document.createElement('tr');
  for (let j = 0; j < 9; j++) {
    let td = document.createElement('td');
    if (j === 0) {
      td.textContent = 8-i || '';
      tr.appendChild(td);
      continue;
    }
    if (i === 8) {
      td.textContent = letters.charAt(j-1);
      td.classList.add('letter');
      tr.appendChild(td);
      continue;
    }
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border: 0;
  margin: 20px 20px;
}

tr:not(:last-child) td:not(:first-child) {
  border: 1px solid black;
}

.black {
  width: 40px;
  height: 40px;
  background: black;
}

.white {
  width: 40px;
  height: 40px;
  background: white;
}

.letter {
  text-align: center;
}

score 2 · Answer 2 · answered Jun 24 '19 at 09:48

Using CSS :before pseudo-element and String.fromCharCode()

let table = document.createElement("table");
for (let i = 0; i < 8; i++) {
  let tr = document.createElement('tr');
  tr.setAttribute('data-row', 8 - i);
  for (let j = 0; j < 8; j++) {
    let td = document.createElement('td');
    if (i == 7) {
      td.setAttribute('data-col', String.fromCharCode(65 + j));
    }
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
  }
  table.appendChild(tr);
}

document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border: 1px solid black;
  margin: 20px 20px;
}

.black {
  width: 40px;
  height: 40px;
  background: black;
}

.white {
  width: 40px;
  height: 40px;
  background: white;
}

[data-row]:before {
  content: attr(data-row);
  position: absolute;
  margin: 12px -15px;
}

[data-col]:before {
  content: attr(data-col);
  position: absolute;
  margin: 25px 14px;
}

Adding numbers and letters to chessboard

2 Answers2