Trading Card Project

Introduction

I am currently a student in IST 402 completing my third and final project. This semester we have been learning the ins and out of web components and completing projects. This third project that I am working on, with three other students in class, is creating a trading card. This trading card has a header with the name of the object, an image, and some data like skills and a number to represent the skill level. The idea of this project is to contribute to HaxTheWeb. All of the projects that the class are completing are open issues in the HaxTheWeb issues queue.

This is what we are looking for

The image above is a comp that we were given as an example of what we want to achieve. We have designed our trading card to look like this.

Current State

Below I have a screenshot of one of the trading cards we have created (we have created 4 of them, 1 card per team member). This is definitely not our finished product, but it is where we are at currently.

We have some work to do on this card. A lot of the work revolves around some CSS changes which will make the card look much more professional.

Specific data for each card

We found a good way to render all 4 cards and make sure that the data is specific for the individuals card. The data points we picked were age, power, and speed. Below I have a screenshot of the function we created to do this.

This is just the if statement for my individual card but you can see how if the card data matches up to a specific name, it will then render that card. You can see that it is a pretty simple statement that we are able to change per which card we would like to render. Below I have attached a screenshot from our index.html file where we are calling the four trading cards. By calling the specific name, it will render that card with the specific CSS styles that we put in place as well.

Here is a screenshot of the CSS that I was talking about that will only apply to my card, so the colors will be brown and orange on my trading card.

Next steps

In the remaining couple of days on this project will be spent making sure that we have our hax wiring correct. My team and I will also be putting some time into ensuring that these trading cards are accessible and reusable. Those are two things that we have had some issues with in the past. We want this project to be very reusable. In the coming days I will be sure to update this post with our finished product as well as the new code we implement.

Here is the link to my teams GitHub Repo: https://github.com/PaddysHub/project-3

Here is the link to the project published on NPM: https://www.npmjs.com/package/@paddyshub/project-3