How to Align Text in Browser Console Properly?

November 20, 2022

I have a task to take values from a prompt and put them like in the picture, but I don’t really understand how to make everything on the same level, for example, so that the ‘|’ was always under the plus, not paying attention to the length of the word.

My result:

var arr = []
for (var i = 0; i >= 0; i++) {
    var input = prompt('Enter any value (enter end to complete the operation) ');
    if (input === 'end') break;
    arr[i] = input;
}

console.log(arr)

for (var i = 0; i < arr.length; i++) {
    console.log(`+-----------------+---------------------+ \n|      ${arr[i]}      |`)
}

>Solution :

You can do something like this, but fonts have variable widths so I don’t expect this to work 100%.

var maxLength = 21;
var arr = []
for (var i = 0; i >= 0; i++) {
  var input = prompt('Enter any value (enter end to complete the operation) ');
  if (input === 'end') break;
  arr[i] = input;
}

console.log(arr)

for (var i = 0; i < arr.length; i++) {
  console.log(`+${'-'.repeat(maxLength-1)}+${'-'.repeat(maxLength-1)}+ \n|${' '.repeat((maxLength-arr[i].length)/2)}${arr[i]}${' '.repeat((maxLength-arr[i].length)/2)}|`)
}