As shown in the picture above, I created a web component for anyone who wants to just post in a picture with a border along with a description, caption, and credits. As simple as this may seem, this took me three weeks to complete. I had to figure out the code behind it. Once I actually started to understand the code, I was able to figure out what actually needed to be done. I started by combining two different web components together. One of them was from a custom element, and one of them was just a bunch of different classes used. So if you ever want to play around with this component or even use it, that would be sick. Here's the repo:
To complete this project, I used open-wc and npm through my command prompt. This was confusing at first, but was thankfully able to figure it out. I then used visual studio to actually code all the small details of the component! Let's take a look of what I actually did.
This is the index.html area of the component. This is what one would see if they right clicked on the page to inspect the web component. This is where I am importing the image into the border. This is the HTML of the custom web component. This is just a small portion of what was put into creating .
Now we're getting into the details. The two pictures above were written inside the src portion of the component. This includes all the CSS classes that formats the picture, border, text, and background colors. These classes are then called inside of the render method. The constructer initializes the starting value for the certain this."". Then inside of the index.html, they gain certain values that can be changed to whatever the person using the web component desires.
Overall, this was not a simple project for me. On the other hand, someone who has been working on these topics could probably complete this in under 30 minutes. Although it was challenging, I really enjoyed working on it. If for whatever reason you want to use my repo, go for it. I code for the people.