Assignment - Cat Website

Ok, I’ll try my best.
Might take a few days.

Great let me know if you get stack.

What I was trying to do but failed

For couple of days, I was trying to implement React to the website.
Rather than copying & pasting cat code every time, I thought it would be smarter to create one cat container. The container would create a cat based on the DNA input. Even if an owner has multiple cats, I could use the map method to loop through owned cats array.

However, I totally got stuck creating the container. First, how do I create dynamic CSS? Yes, I can use inline CSS or styled components but I have to define styling for every div (every part of the cat) because React cannot use className selector, unlike jQuery. Second, even if I manage to accomplish the first issue after hard work, the cat won’t update in the cat factory. The reason is that I need to implement state (useState). However, my cat have many changing part, including shapes and sizes. How to keep track all of them? Third, animation doesn’t work.

I spent couple of days learning React and trying to implement it, but it did not work out as I expected too. Maybe React wasn’t a great choice for NFT?

Other than using containers like in React, I have no idea how to list all cats that owners have. Because in normal HTML, you have to copy & paste code every time, right?


1 Like

Hey @REGO350, yes using react in this project is a bit too much because you are learning too much new things. Better to do it simple. I show how:

So we have a function to render a simple cat like in the cat factory. We have that HTML in the website like usual. What we can do in this case, is to place this HTML code into a JS function using the special quotes to be able to use break lines. Then we pass the arguments we need in order to apply style to the cat.
Code example:

function renderCat(catInfoArray){

let id = catInfoArray.catId;
let dna = catInfoArray.dna

//notice that Im using  this speacial quotes to write html code inside with line breaks
let catBox = `<div id="`+ id +`">
                <div id="catHead`+ id +`">
                <div id="catBody`+ id +`">
                <div id="catTail`+ id +`">
                <div id="catPaws`+ id +`">

document.getElementById("catBoxes").innerHTML += catBox;
//Optionally you can use jquery with method $("#catBoxes").append(catBox)
//OR document.getElementById("catBoxes").appendChild(catBox);

So to place this content you will only have a simple < div > with id of catBoxes in your html, like this :

<div id="catBoxes">
Then you just call the function from your js file like catBox(catInfoArray)

If you notice because this is a JS function, now we can loop into it. When you have an array of cats or calling each cat.

function renderMultipleCats(catsArray){

if(catsArray.length > 0){

  for(var i = 0; i < catsArray.length; i++){
       //Calling our renderCat function for each cat in the array.
       let catInfoArray = catsArray[i];

With the function renderCat we create a boxes for each part of the cat like catEyes, we can use the functions from the factory to seclect this box that we just render and apply the correct style for example :

function eyesShape(catId){

$("#catEyes"+ catId).css(your style code here)


Hopes this little guide helps. Let me know if this works for you.


Thank you very much for the detailed advice!
I didn’t know that you can put html code in vanilla JS variable! (Kind of like JSX)
Later today, I will try it out.

Thanks again!

1 Like

Took me a few days but I finally did it!

What I did different from Filip's code

  1. Instead of putting id in every div, I put id in the very first parent div of catBox. In this case, the selector looks in the following way (example):
    $(`#${id} .cat__mouth`)
  1. I reused catSettings.js instead of making another styling file (buildCat.js). I renamed catSettings.js to renderCat.js in the full code. I wanted to avoid code duplication.

  2. Hover card to see information about Doraemon. How to do hover to flip:

  3. Start button works as a Metamask login button. In every (document).ready function, it checks that the user is logged in or not.

  4. In the contract, I created owner to token ID array mapping. I didn’t want to loop through allTokens array to query owned tokens.

Full code:


Mind if I ask you a question. How did you know Filip’s version used (buildCat.js) - I mean, I really think these videos which I do think this lesson existed, originally, were omitted, to make us reach harder of course but if we are all basically using the same functions and so forth, why not just have the complete course on line?

There is no video.
I studied the source code from IvanOnTech GitHub:


I see - well, thank you listing your code and inspiring the rest of us!


@kenn.eth @REGO350 @AdamFortuna
Hello Devs;
So I have spent about a week trying to follow Filip’s code to render the NFTs. My cat NFTs are not showing up properly. I do not know if the way I structured the factory HTML or the Index.js file is at fault or something else. The build.js and the catalogue_ShowCat.js files seem good to me but I just don’t know at this point.
It looks like they have different DNAs but they all render mostly white, same color and the shape of the cat is totally off.

Here is a link to my project.

This is what the cat is meant to look like

Similar thing happened to me when I put my cat to Filip’s code.
I basically had to rebuild the css so that every part will be relative to CATBOX.


yes, when I build my html file and the css file, they were different than Filip’s - I was not sure if that was the case - thanks Rego

hey @bjamRez in this case you will have to ajust your CSS for fixing into each box. This CSS properties you will use, should be different from a single cat. My advice is to render 1 into a 3 rows div and make sure its work. The issue here is that the first cat CSS is made for single cat. Also the functions that apply styles to each box, should select and apply each box you want separetly selecting it by Id.

1 Like

Firstly, I would like to give a BIG thanks to @REGO350 and @kenn.eth as without your inspiration I couldn’t get so far. Thanks a lot guys. :grinning:
So, here’s a clip for the catalogue. Ahh…one more thing, metamask popup is not visible in the clip on the click of new Gen0 button. Apart from this, it’s going well.
Catalogue Video



Hey @kenn.eth,
I’m having an issue while loading cats in the modal box for breeding purposes.
The problem is, whenever I open a new modal, it seems to keep the content of the previous calls made. It keeps replicating cats until the screen is refreshed.
on the first call -

on the second call
You see… these last 3 cats are my default ones without any styling and they aren’t supposed to be here as I have created only the first 3 cats.

on the third call
and so on.

Edit : that’s my repo link

1 Like

very nice! - great idea of making a video !

1 Like

just waiting to see what results the devs give you

So I finally after two weeks (all was working fine until I got to the Catalogue), I got to load some NFTs into a catalogue page.
My problem was that the CSS and my HTML rigging (borrowing language from 3D) was totally different than Filip’s but I did not know that at first, which affected the “Factory.js” page, “Settings”, etc.
So I went back to another project I had from Filip, Game NFTs, which was much simpler and reconstructed a robotic-looking cat there. Once I got the hang of it, I came back to the Crypto-Kitties project, which I ended up copying Filip’s styling just so I would not get lost again and copied my new settings for my robotic cat.
I still have to work on the breeding and the rest of the lesson and I am planning on further changing the styling but this was a huge hurdle for me. Thank you devs’ for your support!


1 Like

Thanks, @bjamRez. Although, I need to work a little more on its UI to make it look better. :innocent:

1 Like

Thats cool good looking robotic-cats! Very smart to go for other project that helps you to get it.
As programmers we have to look for many solutions and sometimes go for learning before keep going.
Well done!

1 Like