TypeScript Tutorial: Building a Simple Interactive Web-Based Flashcard App

Written by

learnmodernjavascript

in

Are you a student, a lifelong learner, or someone who just loves to absorb new information? Do you find yourself constantly battling the forgetting curve, struggling to retain facts, definitions, or concepts? Flashcards are a proven method for effective learning, but creating and managing them can sometimes feel like a chore. In this tutorial, we’ll dive into TypeScript and build a simple, interactive web-based flashcard application. This project will not only teach you the fundamentals of TypeScript but also provide you with a practical tool you can use daily.

Why TypeScript?

Before we jump into the code, let’s briefly discuss why TypeScript is an excellent choice for this project. TypeScript is a superset of JavaScript, meaning all valid JavaScript code is also valid TypeScript. However, TypeScript adds static typing, which allows you to catch errors during development rather than at runtime. This leads to more robust and maintainable code. Here are some key benefits:

  • Early Error Detection: TypeScript helps you identify and fix errors before you even run your code.
  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Enhanced Developer Experience: TypeScript provides better autocompletion and refactoring support in your IDE.
  • Scalability: TypeScript makes it easier to manage large codebases.

By using TypeScript, we’ll build a flashcard application that’s not only functional but also well-structured and easier to debug and extend.

Setting Up the Project

Let’s get started! First, make sure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official Node.js website. Once installed, create a new project directory and navigate into it using your terminal. Then, initialize a new npm project:

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

This command creates a package.json file, which will manage our project’s dependencies. Next, install TypeScript globally or locally. For this tutorial, let’s install it locally as a development dependency:

npm install --save-dev typescript

Now, we need to initialize a TypeScript configuration file, tsconfig.json. This file tells the TypeScript compiler how to compile your code. Run the following command:

npx tsc --init

This creates a tsconfig.json file in your project directory. Open this file in your code editor. You’ll find many configuration options. Here are a few key ones that we’ll modify:

  • target: Sets the JavaScript language version for the emitted JavaScript code. We can set this to “ES2015” or later.
  • module: Specifies the module system to use. We’ll use “ESNext”.
  • outDir: Defines the output directory for the compiled JavaScript files. We’ll set this to “dist”.
  • rootDir: Specifies the root directory of your input files. The default value is the current directory.
  • strict: Enables strict type checking options. It’s good practice to set this to true.

Here’s an example of how your tsconfig.json file might look after making these changes:

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

Next, create a src directory in your project root, where we’ll put our TypeScript source files. Inside the src directory, create an index.ts file. This will be the main entry point for our application.

Building the Flashcard Application Logic

Now, let’s start writing some code! Open src/index.ts in your code editor. We’ll start by defining the structure of our flashcards. A flashcard will have two main components: a question and an answer.


// Define a Flashcard interface
interface Flashcard {
  question: string;
  answer: string;
}

In this code, we’ve defined an interface called Flashcard. Interfaces in TypeScript are used to define the shape of an object. Our Flashcard interface specifies that each flashcard must have a question property and an answer property, both of which are strings.

Next, let’s create an array of flashcards. This array will hold our flashcard data.


// Sample flashcards
const flashcards: Flashcard[] = [
  {
    question: "What is the capital of France?",
    answer: "Paris",
  },
  {
    question: "What is 2 + 2?",
    answer: "4",
  },
  {
    question: "What is the highest mountain in the world?",
    answer: "Mount Everest",
  },
];

Here, we’ve created a constant variable flashcards and assigned it an array of Flashcard objects. Each object represents a flashcard with a question and an answer. The Flashcard[] syntax specifies that this variable is an array of Flashcard objects.

Now, let’s add some functionality to display and navigate through the flashcards. We’ll create a few functions for this purpose:

  • displayFlashcard: Displays the current flashcard on the screen.
  • showAnswer: Shows the answer to the current flashcard.
  • nextFlashcard: Moves to the next flashcard in the array.
  • previousFlashcard: Moves to the previous flashcard in the array.

// Keep track of the current flashcard index
let currentCardIndex: number = 0;

// Get the HTML elements
const questionElement = document.getElementById("question") as HTMLElement;
const answerElement = document.getElementById("answer") as HTMLElement;
const showAnswerButton = document.getElementById("showAnswer") as HTMLButtonElement;
const nextButton = document.getElementById("next") as HTMLButtonElement;
const previousButton = document.getElementById("previous") as HTMLButtonElement;

// Function to display the current flashcard
function displayFlashcard() {
  if (questionElement && answerElement) {
    questionElement.textContent = flashcards[currentCardIndex].question;
    answerElement.textContent = ""; // Clear the answer initially
  }
}

// Function to show the answer
function showAnswer() {
  if (answerElement) {
    answerElement.textContent = flashcards[currentCardIndex].answer;
  }
}

// Function to go to the next flashcard
function nextFlashcard() {
  currentCardIndex = (currentCardIndex + 1) % flashcards.length;
  displayFlashcard();
}

// Function to go to the previous flashcard
function previousFlashcard() {
  currentCardIndex = (currentCardIndex - 1 + flashcards.length) % flashcards.length;
  displayFlashcard();
}

// Add event listeners to the buttons
showAnswerButton?.addEventListener("click", showAnswer);
nextButton?.addEventListener("click", nextFlashcard);
previousButton?.addEventListener("click", previousFlashcard);

// Initialize the display
displayFlashcard();

Let’s break down this code:

  • currentCardIndex: This variable keeps track of the index of the flashcard currently being displayed.
  • We get references to the HTML elements using document.getElementById(). The as HTMLElement and as HTMLButtonElement assertions are used to tell TypeScript what type of HTML element each variable represents, allowing for type checking and autocompletion.
  • displayFlashcard(): This function updates the questionElement with the current flashcard’s question and clears the answer.
  • showAnswer(): This function displays the answer to the current flashcard.
  • nextFlashcard() and previousFlashcard(): These functions increment or decrement the currentCardIndex and then call displayFlashcard() to update the display. The modulo operator (%) ensures that the index wraps around to the beginning or end of the array.
  • We add event listeners to the buttons to trigger the corresponding functions when they are clicked.
  • Finally, we call displayFlashcard() to initialize the display with the first flashcard.

Creating the HTML Structure

Now, let’s create the HTML structure for our flashcard application. Create an index.html file in your project root. Here’s a basic structure:


<!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="style.css">
</head>
<body>
    <div class="container">
        <div id="flashcard">
            <div id="question"></div>
            <div id="answer"></div>
            <button id="showAnswer">Show Answer</button>
            <div class="navigation">
                <button id="previous">Previous</button>
                <button id="next">Next</button>
            </div>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

In this HTML:

  • We have a container div to hold everything.
  • Inside the container, we have a flashcard div.
  • The question and answer divs will display the question and answer, respectively.
  • The showAnswer button will reveal the answer.
  • The previous and next buttons will navigate through the flashcards.
  • We link a CSS file named style.css (we’ll create this later) for styling.
  • We include the compiled JavaScript file (dist/index.js) at the end of the body.

Adding Styles with CSS

To make our flashcard app look good, let’s add some CSS. Create a style.css file in your project root. Here’s some basic styling:


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

.container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 400px;
    text-align: center;
}

#question {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#answer {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #333;
}

#showAnswer, #previous, #next {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
}

#showAnswer:hover, #previous:hover, #next:hover {
    background-color: #0056b3;
}

.navigation {
    display: flex;
    justify-content: space-between;
}

This CSS provides a basic layout and styling for our flashcard app. Feel free to customize it to your liking.

Compiling and Running the Application

Now that we have our TypeScript code, HTML structure, and CSS styles, let’s compile the TypeScript code into JavaScript. Open your terminal and run the following command in your project root:

npx tsc

This command will compile your src/index.ts file and create a dist/index.js file. Now, open your index.html file in your web browser. You should see the first flashcard question. Click the “Show Answer” button to reveal the answer, and use the “Previous” and “Next” buttons to navigate through the flashcards.

Common Mistakes and How to Fix Them

As you build your flashcard application, you might encounter some common issues. Here are a few and how to resolve them:

  • Type Errors: TypeScript’s type system can be strict. If you see type errors in your code, carefully review the error messages. They usually provide helpful information about the problem. Make sure your variables and function parameters have the correct types.
  • Incorrect Element Selection: If your application isn’t displaying the question or answer correctly, double-check that you’ve correctly selected the HTML elements using document.getElementById(). Ensure that the IDs in your TypeScript code match the IDs in your HTML.
  • Button Event Listeners Not Working: If your buttons aren’t responding to clicks, check that you’ve correctly added the event listeners and that the functions they call are defined correctly. Also, make sure that the HTML elements are loaded before the JavaScript code runs. You can do this by placing the <script> tag at the end of the <body>.
  • Index Out of Bounds Errors: If you get an error related to array index out of bounds, carefully check your nextFlashcard() and previousFlashcard() functions to ensure that you’re correctly handling the wrapping of the index.

Enhancements and Next Steps

Our simple flashcard app is functional, but there’s always room for improvement. Here are some ideas for enhancing the application:

  • Add More Flashcards: Expand the flashcards array with more questions and answers.
  • Import Flashcards from a File: Allow users to import flashcards from a CSV or JSON file.
  • Create Flashcards: Add a feature that allows users to create new flashcards directly within the app.
  • Randomize the Order: Shuffle the flashcards to make the learning process more engaging.
  • Add Styling: Enhance the CSS to make the app more visually appealing.
  • Use Local Storage: Save the flashcards to the browser’s local storage so that users can access them even if they close the browser.
  • Implement Categories: Allow users to organize flashcards into different categories.
  • Add a Progress Tracker: Display the user’s progress through the flashcards.

Summary/Key Takeaways

In this tutorial, we built a simple, interactive web-based flashcard application using TypeScript. We learned how to set up a TypeScript project, define interfaces, work with arrays, handle events, and manipulate the DOM. We also covered common mistakes and provided suggestions for enhancements. This project demonstrates the power of TypeScript for building robust and maintainable web applications. By following this tutorial, you’ve gained practical experience with TypeScript and created a useful tool for learning. This project provides a solid foundation for further exploration of TypeScript and web development. Now you can easily create and manage your own flashcards, making learning a more efficient and enjoyable process.

FAQ

Q: How do I install TypeScript?

A: You can install TypeScript globally using npm install -g typescript or locally within your project using npm install --save-dev typescript.

Q: What is the purpose of the tsconfig.json file?

A: The tsconfig.json file configures the TypeScript compiler. It specifies how your TypeScript code should be compiled, including the target JavaScript version, module system, and output directory.

Q: How can I debug my TypeScript code?

A: You can debug your TypeScript code using your browser’s developer tools. Compile your TypeScript code into JavaScript, and then set breakpoints in your JavaScript files within the “Sources” tab of your browser’s developer tools. You can also use a debugger within your code editor, such as VS Code, to step through your TypeScript code.

Q: How can I add more flashcards to the application?

A: Simply add more objects to the flashcards array in your src/index.ts file. Each object should have a question and an answer property.

Conclusion

Building this flashcard application has shown how TypeScript can improve code quality and developer productivity. The use of types, interfaces, and a structured approach leads to more maintainable and scalable code. This project serves as a starting point for exploring more complex web applications. By understanding the fundamentals of TypeScript and applying them in a practical project, you are well on your way to building robust, user-friendly applications.

More posts