JavaScript default constructor| array | loops

Question

I need to make a script but I have no idea how to complete it. This is what I have to do:

(1) Write a class Boxes. this class has a default constructor and an empty array named boxes.

further has this class 3 methods:

1) insert add method to put Box into the boxes-array. 2) insert method size to get the actual size of the array. 3) insert toString method which give color and volume back in one string.

(2) continue in the init function:

2.3 turn a loop around every object from the array objects to add it to the array boxes

2.4 make a toString method to give back every object from your array in one HTML P-tag.

I hope this makes sense to you guys and it would be a big help if somebody could help me!

A big thanks in advance!

Update: I have edited the code to what I have now.

window.addEventListener("load", init, false);

function init() {
    // (2.1)
    let object1 = new Box(20, 8, 3, "white");
    let object2 = new Box(30, 20, 10, "Brown");
    let object3 = new Box(50, 40, 20);
    // (2.2)
    let boxes = new Boxes();
    // (2.3)
    boxes.push(object1);
    boxes.push(object2);
    boxes.push(object3);
    // 2.4
    var str=""
    for (let i = 0 ; i < boxes.size() ; i++){
        str += "<p>"+boxes.toString(i)+"<p>"
    }

}

class Box {
    constructor(length, width, height, color = "blue") {
        this.length = length;
        this.width = width;
        this.heigt = height;
        this.color = color;
    }

    volume() {
        return this.length * this.width * this.height;
    }

    toString() {   // String templates
        return `Volume: ${this.volume()} --- Kleur: ${this.color}`;
    }
}

// (1) class Boxes
class Boxes {
    constructor(){
        this.boxes = [];
    }

    add(Box){
        this.boxes.push(Box);
    }

    size(){
        return this.boxes.length;
    }

    toString(i){
        this.boxes[i].toString();
    }
}

Answer 1

I don't quite get what's 3) means so I would assume that you want to get the box color and volume given the index (correct me if I'm wrong)

class Boxes{
  //init property called boxes to an empty array when creating Boxes object
  constructor(){
    this.boxes = [];
  }
  //return the length of the boxes
  size(){
    return this.boxes.length;
  }
  //add a box by pushing it to the array
  add(box){
   this.boxes.push(box);
  }
  //print the volume and color of a box given the index
  toString(i){
   this.boxes[i].toString();
  }
}

for number 2:

//2.3
//do you have to push the objects to object?
//use this if you don't have to
boxes.push(object1);
boxes.push(object2);
boxes.push(object3);
//use this if you pushed your objects into an array called object
objects.forEach(function(singleObject){
  boxes.push(singleObject);
});

//2.4
//Iterate every object in boxes and print out their volume and color
//Do you have to create a P tag or just wrapped the string with <p></p>?
//This answer assumes that you just wrap it with <p></p>. Correct me if I'm wrong
var str = "";
//option 1 Using foreach loop
boxes.boxes.forEach((singleBox){
  str += "<p>"+singleBox.toString()+"</p>";
});
//option 2 Using for loop
for(var i = 0; i < boxes.size(); i++){
   str += "<p>"+boxes.toString(i)+"</p>";
}
//now str contains every object's color and volume wrapped in P tag 

I would recommend you to go through this course https://www.codecademy.com/learn/javascript