NFT CARD WEB COMPONENT GALLERY

This project is a mini-gallery of fake NFT collections where you can show and hide the NFTs with a toggle switch. I created the cards and the toggle switch as reusable Web Components for putting into practice what I've learned.

---

PREVIEW AND DEPLOYMENT

Go to Live Site!

---

BUILT WITH

• HTML
• CSS
• Vanilla JavaScript
• Web Component APIs
• Vite

---

WORK FLOW

I started with a mobile-first approach, completing the HTML structure and styles for both of the components. Then I used the Web Components APIs to create my custom elements (tags) and set their attributes and CSS custom properties to make them highly customizable. After that, I added the show/hide functionality and finally started to optimize the page for deployment.

---

FEATURES

• Responsive Design

Highly optimized

toggle-button

You could add a new toggle switch by adding the custom tag <toggle-button>.

<toggle-button></toggle-button>

The default view is this, then you could tweak it with specific CSS custom properties and HTML attributes.

For having something like this, the code would be

<toggle-button class="toggle-btn" left-word="Show" right-word="Hide"></toggle-button>

.toggle-btn {
--bar-width: 70px;
--bar-height: 32px;
--circle-dimensions: 20px;
--circle-left-margin-adjustment: 10px;
--translate-x-adjustment: 32px;
--bar-bg: #14263d;
--bar-bg-checked: white;
--circle-bg: white;
--circle-bg-checked: black;
}

Also, it has a custom-checked attribute with its respective getter and setter methods. That way, it can actually be useful and used for interactivity. Here is what happens in the browser when the toggle switch is clicked "On" and "Off".

nft-card

The nft-card component is not as customizable as the toggle switch component, but you can modify its content with the following HTML attributes

  <nft-card img="" nft-title="" description="" price="" time="" user-name="" user-img=""></nft-card>

For having something like this, you'll just need the following code

  <nft-card
    img="/images/astronaut.webp"
    nft-title="Mars Landing"
    description="Travel and discover new worlds. Be the first to leave your mark."
    price="0.498"
    time="34"
    user-name="Daniel Triana"
    user-img="/images/foto-perfil.png"
  ></nft-card>