Web Editor by 101Computing.net

HTML

<div id=board>
  <table><tr><td id="cell0_0">W</td><td id="cell0_1">E</td><td id="cell0_2">L</td><td id="cell0_3">C</td><td id="cell0_4">O</td><td id="cell0_5">M</td><td id="cell0_6">E</td><td id="cell0_7"></td><td id="cell0_8">T</td><td id="cell0_9">O</td><td id="cell0_10"></td><td id="cell0_11">T</td><td id="cell0_12">H</td><td id="cell0_13">I</td><td id="cell0_14">S</td><td id="cell0_15"></td><td id="cell0_16"></td><td id="cell0_17"></td><td id="cell0_18"></td><td id="cell0_19"></td></tr>
    <tr><td id="cell1_0">I</td><td id="cell1_1">N</td><td id="cell1_2">F</td><td id="cell1_3">O</td><td id="cell1_4">R</td><td id="cell1_5">M</td><td id="cell1_6">A</td><td id="cell1_7">T</td><td id="cell1_8">I</td><td id="cell1_9">O</td><td id="cell1_10">N</td><td id="cell1_11"></td><td id="cell1_12">B</td><td id="cell1_13">O</td><td id="cell1_14">A</td><td id="cell1_15">R</td><td id="cell1_16">D</td><td id="cell1_17">!</td><td id="cell1_18"></td><td id="cell1_19"></td></tr>
    <tr><td id="cell2_0"></td><td id="cell2_1"></td><td id="cell2_2"></td><td id="cell2_3"></td><td id="cell2_4"></td><td id="cell2_5"></td><td id="cell2_6"></td><td id="cell2_7"></td><td id="cell2_8"></td><td id="cell2_9"></td><td id="cell2_10"></td><td id="cell2_11"></td><td id="cell2_12"></td><td id="cell2_13"></td><td id="cell2_14"></td><td id="cell2_15"></td><td id="cell2_16"></td><td id="cell2_17"></td><td id="cell2_18"></td><td id="cell2_19"></td></tr>
    <tr><td id="cell3_0"></td><td id="cell3_1"></td><td id="cell3_2"></td><td id="cell3_3"></td><td id="cell3_4"></td><td id="cell3_5"></td><td id="cell3_6"></td><td id="cell3_7"></td><td id="cell3_8"></td><td id="cell3_9"></td><td id="cell3_10"></td><td id="cell3_11"></td><td id="cell3_12"></td><td id="cell3_13"></td><td id="cell3_14"></td><td id="cell3_15"></td><td id="cell3_16"></td><td id="cell3_17"></td><td id="cell3_18"></td><td id="cell3_19"></td></tr>
    </table>
    <center>Information Board</center>
</div>
    <center>
      <button onclick="clearBoard();">Clear Board</button> - <button onclick="inputMessage();">Input Message</button>   
</center>

CSS

JavaScript

//Copyright 101Computing.net - www.101computing.net/information-board-javascript-challenge
const rows = 4;
const cols = 20;
//Declare a new 2D array with 4 rows, 20 columns
let board = new Array(rows); 
for (var i = 0; i < rows; i++) {
  board[i] = new Array(cols); 
}

//A Function to display the board on the screen
function displayBoard(board) {
  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      if (board[i][j]==null) {
        document.getElementById("cell"+i+"_"+j).innerText = " ";
      } else{
        document.getElementById("cell"+i+"_"+j).innerText = board[i][j];
      }
    }  
  }
}

//A function to reset the board
function clearBoard() {
  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      board[i][j]=" ";
    }
   }
   displayBoard(board);
}

//A function to retrieve a message from the end user and store the message on the board 2D array before displaying it on screen
function inputMessage() {
  var message = prompt("Enter a message to display on the board");
  //Add some code here to fill in the board 2D array with all the letters from the input message!
  //The rule is: Add full words only on each row. If a word does not fit at the end of a row, start this new word on the next row. (No hyphenation of words when wrapping text!)
  
  displayBoard(board); 
}

Preview live webpage

Console logs, warnings and errors