Summary

This is the final project in the semester long class about learning web components and web development. This was a issue queue and project to wire to HAX for other people to use. The goal is a robust event badge that anyone can easily edit for their own event.

Beginning Stages

We were asked to build ff the image above and to make it changeable like it is on the website. There are many different elements to consider when trying to make this so my group and I decided on the following:

• Event-Badge

• Event-Header

• Event-Photo

• Event-Name

• Event-Logo

Current State

This is what our project looks like now. We decided to take some creative liberties and change the theme to Hockey. This will still be able to be changed if the user has their own images.

We know that there is some progress to be made, but we have discussed what has to be done to make sure the team is on the same page. To finish it, we have to edit the slots to have the bottom header and image fit on the same line, add another slot for information, that element would be Event-Name.

This project requires a lot of slot and div classes to be used to properly format and make the card look like a usable event pass. For example, or render function for the header is shown below:

 render() {
    return html` <div class="container">
      <img src="${this.icon}" alt="" />
      <div class="centered">
        <h2><slot id="main-header" name="main-header">main header</slot></h2>
      </div>
    </div>`;
  }

Our other render functions also look similar to this.

Hax and NPM

Touched upon earlier, this project was a part of a issue that was on Hax GitHub account. WE decided to tackle this issue and make it our own. With just limited experience on the team and just 4 months experience myself, it has been a good learning experience attempting the projects. This will also be published to NPM for an easy download for anyone that would want to use this event badge.

Links

NPM: Added when project is complete
GitHub Repo:https://github.com/runtimeErrorsMadeEasy/Project3