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]}      |`)
}

CodePudding user response：

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)}|`)
}

For example number 2 is wider than 1 so this happens:

CodePudding user response：

An alternative that lets you adjust your spacing and width of your 'columns'. Choose a font that has equal width for all characters for this to work.

const arr = ['ab', 'abc', 'abcdef', 'a']
// Figure out the max length of your string array
let max = 0
arr.forEach(s => {
  if (max < s.length) max = s.length
})

// Set your column with -
const spacing = 3
const dashes = '-'.repeat(max   spacing * 2);
const firstLine = ` ${dashes} `

console.log(firstLine)

for (let i = 0; i < arr.length; i  ) {
  const padLeft = Math.floor((max - arr[i].length) / 2)
  const padRight = max - arr[i].length - padLeft
  console.log('|'   ' '.repeat(spacing   padLeft)   arr[i]   ' '.repeat(spacing   padRight)   '|')
}
console.log(firstLine)

CodePudding user response：

The following solution will add 5 or more spaces to each side of each string and add an extra space to even length strings in order to insure evenly spaced vertical borders. As long as the font is a monospace typeface (which is the console default) the content will be displayed perfectly aligned.

Note, in the second image in the OP (Original Post) each string is in it's own "cell" within it's own "row", whilst the first image in the OP shows 2 strings within it's own "cell" on each "row". My answer coincides with the former since the code in OP does as well.

• Determine total number of characters of the longest string in array and divide it by 2.

  // Define >max< outside of loop 
  let max = 0;
  // Compare and redefine >max< within loop
  if (max < (input.length / 2)) max = input.length / 2
  

• Define border outside of loop which should accommodate the longest string in the array plus 5 spaces on both of it's sides.

  const border = ` ${"-".repeat(max   5)} ${"-".repeat(max   5)}  \n`;
  

• Define space within loop so the value changes according to current string to be displayed.

  let space = (max - (arr[i].length / 2))   5;
  

• Define offset for even length strings

  /* If the remainder of the string length divided by 2 is 0, then >offset< is 1 
  else it's 0 */
  let offset = arr[i].length % 2 === 0 ? 1 : 0;
  

• Finally, interpolate each string within the loop.

  `${border}|${" ".repeat(space)}${arr[i]}${" ".repeat(space   offset)}|`
  

Example

let arr = [];
let max = 0;

for (let i = 0; i >= 0; i  ) {
  let input = prompt('Enter any value (enter "end" to complete the operation) ');
  if (input === 'end') break;
  arr[i] = input;
  if (max < input.length / 2) max = input.length / 2;
}

console.log(arr)

const border = ` ${"-".repeat(max   5)} ${"-".repeat(max   5)}  \n`;

for (let i = 0; i < arr.length; i  ) {
  let space = (max - (arr[i].length / 2))   5;
  let offset = arr[i].length % 2 === 0 ? 1 : 0;
  console.log(`${border}|${" ".repeat(space)}${arr[i]}${" ".repeat(space   offset)}|`);
}

console.log(border);