This device is not compatible.
PROJECT
Build Web Components in Lit
In this project, we’ll learn about Google’s Lit web component framework and develop a memory game project using Lit. Lit is a basic JavaScript library for quickly generating lightweight web components that can be used with or without a framework. Lit enables us to create custom components, applications, design systems, and more.
You will learn to:
Explore Lit and its features.
Build web components using Lit.
Build a memory game application using Lit.
Perform state management with Lit.
Skills
HTML Elements
CSS
JavaScript
Prerequisites
Basic knowledge of HTML and CSS
Basic knowledge of next generation JavaScript (ES6) and Node.js
Fundamental understanding of the use of the Node.js package managers like npm, pnpm, and Yarn
Basic knowledge of Typescript
Technologies
CSS
Lit
HTML
Javascript
TypeScript
Project Description
Lit is a JavaScript framework that offers a rapid alternative to the most popular JavaScript frameworks, such as React, Vue, and Angular. It is developed on top of native web components and has minimal boilerplate.
In this project, we will build a popular one-player memory card game in Lit, inspired by a card game known by many names such as Memory, Concentration, and Shinkei Suijaku.
Initially, the cards are placed upside down in a grid. The player has to click a card to turn it over. Once a card has been turned over, the player has to click another card. If both cards form a matching pair, they’re removed from the grid; otherwise, both cards are turned back. To do well in this game, the player has to remember the cards after each failed attempt to match them. The gif below shows the final layout of the project:
Project Tasks
1
Introduction
Task 0: Get Started
2
Setting Up the Lit Application (A Simple Memory Game)
Task 1: Start a Lit Application
3
Game Initialization
Task 2: Create Memory Game Cards and Choices Variables
Task 3: Set Shuffle Card Values
Task 4: Create Reactive Properties (States) for Cards
4
Create the Card Playground
Task 5: Create the Memory Card Playground
Task 6: Display the Cards on the Playground
5
Memory Game Logic
Task 7: Logic for Card Choices
Task 8: Comparison Logic for Card Choices
Task 9: Create the Logic for Card Matches
Task 10: Design the Logic for the Flipping of Cards
Task 11: Add Animation of Cards when Flipped
Task 12: Disable Cards Momentarily after Card Choices
6
Final Touches
Task 13: Display Number of Turns
Task 14: Make the Game Initialization Automatic
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.