TypeScript Tutorial: Building a Simple Interactive Flashcard App

Written by

learnmodernjavascript

in

Are you a developer looking to sharpen your TypeScript skills while creating something fun and practical? Learning a new language can be challenging, but building a real-world application is a fantastic way to solidify your understanding. In this tutorial, we’ll dive into TypeScript by constructing a simple, interactive flashcard application. This project will not only teach you the fundamentals of TypeScript but also introduce you to concepts like DOM manipulation, event handling, and basic data management. By the end, you’ll have a fully functional flashcard app and a solid foundation for more complex TypeScript projects.

Why Build a Flashcard App?

Flashcards are a proven learning tool. They’re simple, effective, and easily adaptable to various subjects. Building a flashcard app offers several advantages for learning TypeScript:

  • Practical Application: You’ll learn how to use TypeScript to create a user interface, handle user input, and manage data.
  • Focused Learning: The project is small enough to be manageable, allowing you to focus on core TypeScript concepts without getting overwhelmed.
  • Immediate Feedback: You’ll see the results of your code instantly, making it easier to understand how TypeScript works.
  • Reusable Skills: The skills you learn will be applicable to a wide range of web development projects.

Setting Up Your Development Environment

Before we start, let’s make sure you have everything you need:

  • Node.js and npm: TypeScript requires Node.js and npm (Node Package Manager) for installation and project management. You can download them from the official Node.js website.
  • Code Editor: Any code editor will work, but VS Code is highly recommended due to its excellent TypeScript support.
  • Basic HTML, CSS, and JavaScript Knowledge: While this tutorial focuses on TypeScript, some familiarity with HTML, CSS, and JavaScript will be helpful.

Installing TypeScript

Open your terminal or command prompt and run the following command to install TypeScript globally:

npm install -g typescript

This command installs the TypeScript compiler (tsc) on your system, allowing you to compile your TypeScript code into JavaScript.

Creating the Project Folder

Create a new folder for your project. Navigate to this folder in your terminal and initialize a new npm project:

mkdir flashcard-app
cd flashcard-app
npm init -y

This creates a package.json file, which manages your project’s dependencies.

Setting Up TypeScript Configuration

Next, create a tsconfig.json file. This file tells the TypeScript compiler how to compile your code. Run the following command:

tsc --init

This command generates a tsconfig.json file with many options. We’ll customize it for our project. Open tsconfig.json and make the following changes:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s what each option means:

  • target: "es5": Specifies the JavaScript version to compile to.
  • module: "commonjs": Specifies the module system to use.
  • outDir: "./dist": Specifies the output directory for compiled JavaScript files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Tells the compiler to include all TypeScript files in the src directory.

Project Structure

Let’s create the following project structure:

flashcard-app/
├── src/
│   ├── index.ts
│   ├── styles.css
│   └── flashcard.ts
├── dist/
├── index.html
├── package.json
├── tsconfig.json
└── README.md
  • src/index.ts: The main entry point for our application.
  • src/flashcard.ts: Contains the flashcard class.
  • src/styles.css: Our CSS styles.
  • index.html: The HTML file for our application.
  • dist/: The directory where compiled JavaScript files will be stored.

Building the HTML Structure (index.html)

Create an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flashcard App</title>
  <link rel="stylesheet" href="./src/styles.css">
</head>
<body>
  <div class="container">
    <div class="flashcard" id="flashcard">
      <div class="flashcard-inner">
        <div class="flashcard-front">
          <p id="question">Question</p>
        </div>
        <div class="flashcard-back">
          <p id="answer">Answer</p>
        </div>
      </div>
    </div>
    <button id="flip-button">Flip</button>
    <button id="next-button">Next</button>
  </div>
  <script src="./dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for our flashcard app:

  • A container div for the entire app.
  • A flashcard div with front and back sides.
  • Elements to display the question and answer.
  • Flip and Next buttons.
  • A link to our stylesheet.
  • A script tag to include our compiled JavaScript.

Styling with CSS (styles.css)

Create a styles.css file with the following content. This adds basic styling to make the app visually appealing. Feel free to customize the styles!

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

.flashcard {
  width: 300px;
  height: 200px;
  perspective: 1000px;
  margin-bottom: 20px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flashcard-back {
  transform: rotateY(180deg);
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #3e8e41;
}

Creating the Flashcard Class (flashcard.ts)

In src/flashcard.ts, we’ll create a Flashcard class to represent each flashcard:

export class Flashcard {
  question: string;
  answer: string;

  constructor(question: string, answer: string) {
    this.question = question;
    this.answer = answer;
  }
}

This class has two properties: question and answer, both of which are strings. The constructor takes the question and answer as arguments and initializes the object.

Implementing the Main Logic (index.ts)

Now, let’s write the core logic in src/index.ts:

import { Flashcard } from './flashcard';

// Flashcard data
const flashcards: Flashcard[] = [
  new Flashcard('What is TypeScript?', 'A superset of JavaScript that adds static typing.'),
  new Flashcard('What is a class in TypeScript?', 'A blueprint for creating objects.'),
  new Flashcard('What is an interface in TypeScript?', 'A way to define the structure of an object.'),
];

// DOM elements
const flashcardElement = document.getElementById('flashcard') as HTMLDivElement;
const questionElement = document.getElementById('question') as HTMLParagraphElement;
const answerElement = document.getElementById('answer') as HTMLParagraphElement;
const flipButton = document.getElementById('flip-button') as HTMLButtonElement;
const nextButton = document.getElementById('next-button') as HTMLButtonElement;

// State variables
let currentCardIndex = 0;
let isFlipped = false;

// Function to display the current flashcard
function displayFlashcard() {
  const currentCard = flashcards[currentCardIndex];
  questionElement.textContent = currentCard.question;
  answerElement.textContent = currentCard.answer;
  // Initially hide the answer
  answerElement.style.display = 'none';
}

// Function to flip the card
function flipCard() {
  isFlipped = !isFlipped;
  flashcardElement.classList.toggle('flipped', isFlipped);
  if (isFlipped) {
    answerElement.style.display = 'block'; // Show answer
  } else {
    answerElement.style.display = 'none'; // Hide answer
  }
}

// Function to go to the next card
function nextCard() {
  currentCardIndex = (currentCardIndex + 1) % flashcards.length;
  isFlipped = false;
  flashcardElement.classList.remove('flipped');
  displayFlashcard();
}

// Event listeners
flipButton.addEventListener('click', flipCard);
nextButton.addEventListener('click', nextCard);

// Initial display
displayFlashcard();

Let’s break down this code:

  1. Import Flashcard Class: We import the Flashcard class from ./flashcard.
  2. Flashcard Data: We create an array of Flashcard objects containing our flashcard data.
  3. DOM Element Selection: We select the necessary HTML elements using document.getElementById and type-assert them using as HTMLDivElement, as HTMLParagraphElement, and as HTMLButtonElement. This helps TypeScript understand the types of these elements.
  4. State Variables: We declare currentCardIndex to keep track of the current flashcard and isFlipped to know if the card is flipped.
  5. displayFlashcard Function: This function updates the question and answer elements with the current flashcard’s content. It also initially hides the answer.
  6. flipCard Function: This function toggles the flipped class on the flashcard element, which triggers the flip animation. It also shows/hides the answer based on the isFlipped state.
  7. nextCard Function: This function advances to the next flashcard in the array, resets the isFlipped state, and calls displayFlashcard to show the new card.
  8. Event Listeners: We add event listeners to the flip and next buttons, calling the appropriate functions when clicked.
  9. Initial Display: We call displayFlashcard() to display the first flashcard when the page loads.

Compiling and Running the Application

Now, it’s time to compile your TypeScript code into JavaScript. In your terminal, navigate to your project directory and run:

tsc

This command will compile all TypeScript files in the src directory and create corresponding JavaScript files in the dist directory. If you encounter any errors, review the error messages and fix them before proceeding.

To run the application, open index.html in your web browser. You should see the flashcard app with the first question. Click the “Flip” button to see the answer, and use the “Next” button to cycle through the flashcards.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make and how to avoid them:

  • Incorrect File Paths: Double-check the file paths in your index.html and when importing modules. Typos can easily break your application.
  • Type Errors: TypeScript is strict about types. If you see type errors in your terminal, carefully read the error messages and make sure your variables and function parameters have the correct types. Use type annotations to specify the expected types.
  • DOM Element Selection Errors: Ensure that the IDs you’re using in your JavaScript code match the IDs in your HTML. Also, make sure the elements are loaded before your script runs.
  • Incorrect Event Listener Usage: Make sure you’re adding event listeners to the correct elements. Also, be careful about the order of operations in your event listener functions.
  • Forgetting to Compile: Always remember to run tsc after making changes to your TypeScript files.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned how to create classes, use types, and work with DOM elements.
  • Project Structure: You’ve seen how to organize a simple TypeScript project.
  • Event Handling: You’ve learned how to handle user interactions using event listeners.
  • Debugging: You’ve seen how to identify and fix common errors.

FAQ

Here are some frequently asked questions:

  1. What is the difference between TypeScript and JavaScript? TypeScript is a superset of JavaScript that adds static typing. This means TypeScript code must be compiled into JavaScript before it can be run in a browser. TypeScript helps catch errors early and improves code maintainability.
  2. Why should I use TypeScript? TypeScript offers several benefits, including improved code quality, better tooling (like autocompletion and error checking), easier refactoring, and increased developer productivity.
  3. How do I add more flashcards? Simply add more Flashcard objects to the flashcards array in index.ts.
  4. Can I customize the styling? Yes! Modify the CSS in styles.css to change the appearance of the flashcard app.
  5. How do I handle more complex data? For more complex flashcard data (e.g., images, audio), you can extend the Flashcard class to include additional properties and modify the HTML to display them.

You’ve now successfully built a simple, interactive flashcard application using TypeScript! This project provides a solid foundation for understanding the basics of TypeScript, including how to define classes, work with DOM elements, and handle user interactions. Remember that practice is key, so don’t be afraid to experiment and build more complex features. You can expand this app by adding features like:

  • Adding a way to edit and save flashcards.
  • Implementing a scoring system.
  • Adding support for different categories of flashcards.
  • Implementing a progress tracker.

As you continue to work with TypeScript, you’ll find that it makes your code more robust and easier to maintain. Enjoy the journey of learning and building! The skills you’ve acquired in building this flashcard app will be invaluable as you tackle more ambitious projects. Keep exploring, keep coding, and keep learning, and you’ll find yourself proficient in TypeScript in no time. The world of web development is constantly evolving, so embrace the challenge and the satisfaction of building something from scratch.

More posts