In Javascript, how do I print 2 diagrams side by side?

Question

I am doing a JavaScript practice problem on Practice.it, and there's a question to print 2 rocket ships side by side.

I have printed one out but I can't figure out how to print the other rocket ship right next to the first one.

Also, is there way to do this using for loops?

function rocket(){
  triangle();
  line();
  sides();
  line();
  console.log("|Rocket |");
  console.log("|  #1   |");
  line();
  sides();
  line();
  triangle(); 
}

function triangle(){
  console.log("   / \\");
  console.log("  /   \\");
  console.log(" /     \\");
}

function line(){
  console.log("+-------+");
}

function sides(){
  console.log("|       |");
}

rocket();

Output:

   / \
  /   \
 /     \
+-------+
|       |
+-------+
|Rocket |
|  #2   |
+-------+
|       |
+-------+
   / \
  /   \
 /     \

I’m assuming you are working in the console only and not in the browser? — zipzit, Nov 22 '17 at 22:06
it won't be possible to print two side by side using the code you have written here. that's not how `console.log` works. — Claies, Nov 22 '17 at 22:07
How about setting up you rocket draw such that it only draws one “layer” of the rocket at a time? One layer = one line of text. — zipzit, Nov 22 '17 at 22:08
Think about how you would do this if it was a word document. Clearly would need parts of each on the same line — charlietfl, Nov 22 '17 at 22:35

inafalcao · Answer 1 · 2017-11-23T00:49:30.990

Instead of logging right way in your functions, you should put your diagram strings in a array.

Ex:

function triangle(){
  return 
  ["   / \\", 
  "  /   \\",
  " /     \\"]
}

That way, if you want to print two side by side, you just make a function that receives the diagrams, and an amount of spaces used to separate them horizontally. That function will print the diagrams line by line (index by index of the arrays).

Ex:

function printDiagrams(diagramList /* This is an array of arrays */, spacing) {
  // Get the size of the biggest array in diagramList
  var size= biggestDiagramSize(diagramList )
  // Here, you iterate in the diagrams array line by line and print
  for(i = 0, i < size, i++ ) {
    // Iterate over diagramList and print its lines
    // Careful not to exceed arrays bound.
    // Ex: console.log(diagram1[i] + spacing + diagram2[i] + spacing + diagramN[i])
  }

}

You're also going to need a function to compose the diagrams. It just receives arrays and returns the concatenation of them.

Note: That will work even if you print different diagrams side by side.

score 1 · Accepted Answer · answered Nov 22 '17 at 22:43

1

A quick and dirty way would just be to concatenate each string with itself. So for every instance of console.log("+--------+") use:

console.log("+--------+".repeat(2));

And just do this for each string.

answered Nov 22 '17 at 22:43

david25272

976
6
12

score 0 · Answer 3 · answered Jan 10 '18 at 03:50

You can define a parameter for rocket function, use String.prototype.repeat() and String.prototype.replace() within the function for the ability to draw N diagrams side by side.

function rocket(n = 1) {
  let props = ["|Rocket |", "|  #N   |"];
  let j = 0;
  let s = props[1].match(/\s+(?=\|)/)[0].length;
  triangle(n);
  line(n);
  sides(n);
  line(n);
  for (var i = 0; i < props.length; i++) {
console.log(
  props[i]
  .repeat(n)
  .replace(/(N)(\s+(?=\|))/g
  , (_, a, b) => ++j + (j >=10 ? " ".repeat(s-1) : b)));
  }
  line(n);
  sides(n);
  line(n);
  triangle(n); 
}

function triangle(n){
  var props = ["   / \\   ", "  /   \\  ", " /     \\ "];
  draw(props, n);
}

function line(n){
  var props = ["+-------+"];
  draw(props, n);
}

function sides(n){
  var props = ["|       |"];
  draw(props, n);
}

function draw(props, n) {
  for (var prop of props) console.log(prop.repeat(n));
}

rocket(15);

In Javascript, how do I print 2 diagrams side by side?

3 Answers3