Expanding cards example

This small projects is a quick reference to show a expanding cards example. Css courtesy of Brad Traversy.

Getting Started

First of all, make sure you've installed Node.

Then install dependencies:

$ yarn

Workflow

Start a local development server:

$ yarn start

Access invoicing under http://localhost:3000/

Format code:

$ yarn format

Lint code:

$ yarn lint

Commit changes:

$ yarn commmit

Notes

1.- When a CSS rule with two selectors chained together:

.panel.active {
  flex: 5;
}

It means that Apply this style to any element that has both the class "panel" and "active".

Such as:

<div class="panel active">

2.- When using css-modules we need to find the classes in DOM as follow:

document.querySelectorAll<HTMLElement>(`.${classes.panel}`);

Without css-modules:

document.querySelectorAll<HTMLElement>(`.panel`);