alguien puede con estos ejercicios que resolverlos y que tenga una buena logica de programador?

  1. Considerar los TDA’s definidos por el lenguaje y construya sus TDA propios, tales como:

a) Un paquete que contenga como librería una clase, dicha clase incluya como TDA los siguientes métodos:
b) Un método de cuenta vocales.
c) Un método de cuenta consonantes
d) Un método cambia vocales por números (a = 1, e = 2, i = 3, o = 4, u = 5), tanto mayúsculas como minúsculas.
e) Un método que busque palabras y las cambie por otra
f) Un método que cambie cierta palabra por un carácter especial (por ejemplo, una palabra que lo rellene de asterisco)
2) Una clase que invoque el paquete y utilice la librería y pruebe cada uno de los métodos (TDA),

javascript – ¿Como mostrar un contenido las veces que un dato (length) tenga registrado?

Estoy desarrollando una pagina web que tiene unas tarjetas con información de un producto.
La informacion la obtengo de Firebase realtime Database.
La función es la siguiente:

function GetInfoProduct(){

  let PathTitleProduct1;

  PathTitleProduct1 = "/Productos/";

  firebase.database().ref(PathTitleProduct1).on('value', (snapshot) => {
    let DatagettedTitleProduct1 = '';
    if(snapshot.val()){
      DatagettedTitleProduct1 = snapshot.val();
      console.log(DatagettedTitleProduct1);
      let TitleProduct1 = document.getElementById('title_product_1');
      TitleProduct1.innerHTML = DatagettedTitleProduct1;
    }
  })

}

La funcion anterior me muestra en consola un resultado de tipo Objeto y me muestra la longitud que tiene este, me muestra que tiene una longitud de 3 valores y dentro de esos 3 valores tiene mas datos.
Lo que quiero saber es como puedo hacer que dependiendo a la longitud del objeto me muestre tantas tarjetas es decir si tengo 3 de logitud que se muestren 3 tarjetas aunque en el html solo tenga registrada una tarjeta y que en cada tarjeta la informacion sea dependiendo a la que se obtiene. el codigo html de una tarjeta es la siguiente.

                    <div class="product_card">

                        <img loading="lazy" src="https://www...exemplo.png" alt="ejemplo">

                        <p id="title_product_1"></p>

                        <p id="subtitle_product_1"></p>

                        <div class="variaciones">

                            <p id="variations_title">Variaciones</p>

                            <p id="v1"></p>

                            <p id="v1"></p>

                            <br>

                        </div>

                        <div class="SizeAndPrice">

                            <p id="SaPtitle">Tamaños y Precios</p>

                            <div class="size">

                                <p id="sizep">Individual</p>
                                <p id="sizep">Pareja</p>
                                <p id="sizep">Familiar</p>

                            </div>

                            <div class="price">

                                <p id="pricep"></p>
                                <p id="pricep"></p>
                                <p id="pricep"></p>

                            </div>                        

                        </div>

                        <div class="btn_buy">

                            <p>Agregar al Carrito</p>                                

                        </div>

                    </div>                    
                    
                </div>