Assignment - Breeding Frontend

Create a website where users will be able to see cats they own and breed them.

1 Like

I am quite stuck on how to print all cats owned, I can get the data from the contract, no problem, but how to print them to the HTML?? Why is making the catalogue page not included in the course? @AdamFortuna

@filip says in the video “You already built the catalogue” but we did not build a site to show all cats in the course at all. I try, but I am kinda stuck. The problem is, how can I create the whole div structure to display a cat from a loop using JS and then, how to render all the cats? This is all I manage to do:
CataloguePage

Hey @Bhujanga I got a very easy solition in order to render multiple cats like a catalogue.

We will make a function createCatBox() to make a individual box for each Cat.
Then copy the HTML cat Box content and assign it to a variable inside the function, using special quotes like in this example:
THIS SPECIAL QUOTES `` wich allow break lines into JS variables .


function createCatBox(id,catDetails){

var catBox = `<div id="box`+id+`">
                         <div id="head` + id + `">
                          </div>
                         <div id="body` + id + `">
                          </div>
                         <div id="paws` + id + `">
                          </div>
                      </div>`;

document.getElementById("catBoxes").append(catBox);

}

Notice that I also include the catDetails in the arguments. So this mean that I can use them to build also the DNA number, generation etc. Including something in the Box like

<div id="dna">` + catDetails.dna + `</div>

Then you just append each box to a div with catBoxes id.
A loop example using this function

var catDetails = " ";
var id = 0;
for(var i = 0; i < allCats.length; i++){
catDetails = allCats[i];
id = i;
createCatBox(id, catDetails)
}

Let me know if you got it working correctly. :slight_smile:

1 Like

Thank you @kenn.eth ! Your reply pushed into the right direction. I am right now working on it and seeing first results! Yieeehaa!! I am impressed on how powerful JavaScript is! The advice with the SPECIAL QUOTES did the trick! :rocket:

So I managed to render them little cryptobears! But how do I actually render the right animation as well? Seems like a tricky task. :thinking: Did you manage to implement this? As you can see, only one does have animations in the catalog (Bear Cave), and that is the one i still have in there from catsettings.js render, as reference.

BearsAnimQuestions

Congratulations! Yeah special quotes is very usefull. Now these bears are looking cool!
Ok so for animation. You will have to modify the set-Animatons functions adding an id to arguments.
First:

 function animationsPlayer(anim,BearId)

Then pass it to each animationTypes functions:

function animationType1(BearId) {
    resetAnimation(BearId);
    $(BearId).addClass("movingHead");
}

In this way we make sure that each Bear have their own animation. Remember also, to call this animation function after you Render all the boxes, making sure the ID’s exist.