DEV Community

msanyal7
msanyal7

Posted on

The beginning to project 2

What are we building now??
In project 2, we are going to be making badges. These are technically just cards and here's what we're going to do to build them. We will be using APIs.

The first part will include making a json array of objects. See below for images of how.

Here is an image of putting the json elements into the array "buddies". This takes place in the constructor.

Image description

Each version of the card can be changed when putting it into the array. In the example above, everything is the same however.

So another part of the project that is important is creating a custom element of the json.

We can do this by using this line of code

customElements.define(pusheenBuddies.tag, pusheenBuddies)

Pusheen Buddies is a javascript file. It extends a lit element and also imports our character card file.

The pusheen buddies javascript file also contains a get tag, styles. and properties method. As well as a constructor and a render method.The render method uses a map. This is utilized for having each card be printed aaccordingly.

Here is an image of the render method and it's use of map.

Image description

Some properties that I think we'll need for the badges are title, description and image. Here are the properties being used currently for our project one cards. I think one thing to pull these off as badges will include changing image alignment, background, and other visuals.

Image description

We learned about some backend functions in IST220. Some of the backend functions that I think would be used for this are certificates of authentication, symmetric key encryption ( for private badges), client/server communication.

I think a big part of what we will need for this badges in project two is to be able to call different elements and store them in an array.The screen shots above show the same element put manually into the array. I think that for project 2,we'll to create elements and store different ones into the array.

Here is an image of a singular json package from the homework. I think creating multiple json packages for the badges and re initializing the information to be different for each card might be a possible way to have multiple different badges.

Image description

Top comments (0)