Using Vite, Vanilla JS, and CSS Grid, let's create a card-flipping app!

Vite will handle the architecture and module bundling, we will use Vanilla JS to avoid framework fatigue, and use CSS Grid for responsive design needs. The actual card flipping can be done using plain old CSS transforms.

To run this app out of the box, make sure you have Node and NPM installed locally (see below for links). Fork the 'main' branch, navigate to the app root and, in your command line or terminal, type: npm i to install dependencies. Then, type npm run dev to run the app locally (usually on localhost:3000). Since the app only uses Vite and no other framework, your dependency install is lightweight.

Npm: https://npmjs.com

Node: https://nodejs.org

Vite: About Vite

The Tokyo Olympics 2020 web site (source of the sports event data)

Free CSS Grid Course

Learn how to develop applications using node.js

JavaScript basics video series

Free full course on web development

Build a terrarium with JS/CSS/HTML