More Frontend Practice
As I recently put up a portfolio website, I believed it was time to start publishing more apps. When I thought of things I would want to show off, I thought of my poetry site. Then remembered that would be a bit embarrassing. Instead I decided to work on a project I started that have not finished. A project I couldn’t be embarrassed about.
As the picture suggests I am making this app to make that if I ever considering bringing one of those little creatures with me on my journey, that it is a well thought-out decision. My intention isn’t to make it so I don’t want pets(or children), but rather to remind myself that the inclusion of these creatures will require adjustment.
I wanted to show something informative about all the animals, these facts were taken from an api. I usually create my own backend, I wanted to try out using an api to get the facts this time around. Dog lovers forgive me but it has been a lot easier to find the things I need for the cat page of my app. As I’m making sure to make as many reusable components as possible, the dog component will only benefit from this.
With this code displayAnimalFacts, I knew I’d pass in an array of objects, because I like to store data that way and passed data that way down as props. I wanted to make a helper function to put the sentences in the text one line after another. That is how my splitAndDisplayText function on line 4 came to be. I ended up passing down a prop called name which was basically just the name of the array I was passing into the stories component. I did this because before I was using props.cats when invoking DisplayAnimalFacts, and I didn’t think the other components would appreciate that. props[name] made it reusable, but there are probably better ways.
On the topic of better ways, I still need to work on my CSS. My split function works well enough, but that was not how I wanted it to be displayed. While I may not be happy about how it came out. I am glad that it is coming along nicely. I still remember that abomination that had to be reluctantly called CSS. As long as I am further away from that everything is going well.