DEV Community

Cover image for Remembering the button

Posted on • Updated on

Remembering the button

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>
Enter fullscreen mode Exit fullscreen mode

Notice how "--psu-background-color" was a called variable.
This allowed the button color to mutable when a type was applied to the card.
Image description

But because I didn't think ahead... the button reverts to the colors it was when it's hovered over.
Image description

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:

GitHub logo runtimeErrorsMadeEasy / project2

Making a card for IST 402

And always, here's the song of the week:

Top comments (0)