Overview:
The web component my group decided to work on was the trading card project. This consists of making multiple trading cards with a name and image, as well as an age, power, and speed stat. Although we are not fully done yet, I am pleased with how the cards are looking. Here is our project so far.
This is just a snippet of the 4 cards we have, formatting is still being worked on. The main library we used was LitElement, as our main source file extends it. We will also be implementing HAX, but we have not complete that yet.
Tutorial:
We started out by creating an array and mapping trading card data into the array. After this, we resized the cards to better resemble a trading card. This included playing around with height, width, margins, and other formatting settings. We used a very cool way of printing out the right trading card by calling a specific one from the html file. Below is how we implemented this.
Biggest Challenge:
One of the requirements o the project was to use an array for the data. We got stuck on how to do this, since all of the data was put onto one card. Eventually we ended up adding code in the html file that allowed us to only print one at a time. This was the biggest challenge we ran into and it instantly made the project look better after we fixed it.
Link to NPM: https://www.npmjs.com/package/@paddyshub/project-3
Link to GitHub: https://github.com/PaddysHub/project-3
Top comments (0)