Trading-Card Web Component

NPM and GitHub

Tutorial
To create the trading card element I started with a very basic border outline to create the “edge” for the card. I used the CSS border property to create the outline by styling the div element that contains the entire card. After the outline I started to work on the alignment of the elements within the card, and the background colors. We chose to include the name at the top, then the image, and additional details below the image. In addition to alignment and coloring, I started to work on the card content and filling in the details to the proper areas on the card face.

We started working as a group on the visual design of the card and the color contrasting features. We chose a holiday theme for the trading card project and made 4 cards to display Santa, Mrs. Claus, The Grinch and Buddy the Elf. Our team then worked on the optional icon support by including the simple-icons library in our project. We then took a short break from code development to get a head start on the storybook features, but encountered some challenges in the initial setup with the page continuously loading. Next steps in development included mapping the key values for each card, and separating each card into its own unique element in the demo.

updated(changedProperties) { }

The updated changed properties function was essential for the implementation of multiple card components in our project. Using the need property, we were able to update the display of each card for multiple variations. There are some styling and accessibility concerns to address, but we are making progress on those as our final web component gets close to completion.

A time consuming challenge we faced while developing the trading card was the wiring of the demo. We had issues because we were unsure of how to implement each key from the map into a separate HTML element on the frontend. We also struggled when working with HAX as this was the first experience any of us had with trying to implement and contribute a feature to a large project.

We failed to allow editing via HAXTheWeb wiring because of the way the attributes are set by the map. We wanted to include this capability but were unsure of how to dynamically set the current attributes and allow for customization at the same time. Our final project is complete but it is an understatement to say we are disappointed with the lack of variability and accessibility.