Wednesday night is Survivor night which means us and the population of people who still have cable sit down to watch a show that's older than everyone in the apartment. But this also means it's the convention of the nerds.
Because I've been falling behind in literally all of my classes because I've been applying to internships, I took last Wednesday to sit down, relax, and work on the card we're developing for IST 402. And ask my comp sci friend for help. Thank god, I got an internship offer just yesterday, so maybe I'll be able to get my shit together. All I can say is that I'm a cybersecurity major and will be doing cybersecurity related things. Because I'm falling behind on everything, this blog post is also two days late.
Anyway, buttons. We made one a while ago, published it to npm, and now we're using it in our card project. This process really made me realize how import reusability is.
This is how I slotted the button in:
<div slot="button" class="buttonContainer"><cta-button icon="subject" title="${this.type}" style="--psu-background-color: ${this.bannerColor};"></cta-button></div>
Notice how "--psu-background-color" was a called variable.
This allowed the button color to mutable when a type was applied to the card.
But because I didn't think ahead... the button reverts to the colors it was when it's hovered over.
When I was creating the button, I didn't think about all the different states I should make accessible. Being able to apply the button to the card has not only helped learn about slots but the considerations that should be made with creating a web component.
The current card project can be accessed at:
runtimeErrorsMadeEasy
/
project2
Making a card for IST 402
And always, here's the song of the week:
Top comments (0)