TypeScript Tutorial: Creating a Simple Interactive Recipe App

Written by

learnmodernjavascript

in

Are you a food enthusiast who loves to cook or a developer looking to expand your TypeScript skills? This tutorial is designed for you! We’ll embark on a journey to create a simple, yet engaging, interactive recipe application using TypeScript. This project will not only introduce you to fundamental TypeScript concepts but also provide a practical understanding of how to build interactive web applications that are both functional and user-friendly. In today’s digital age, the ability to create applications that manage and display information effectively is a valuable skill, and this tutorial will help you acquire that skill.

Why Build a Recipe App with TypeScript?

TypeScript brings a layer of structure and predictability to your JavaScript code. By using TypeScript, you catch errors early, improve code readability, and make your projects easier to maintain. Building a recipe app is an excellent project for beginners because it involves several common programming concepts, such as data structures, user input, and dynamic content rendering. It’s also a fun and relatable project, making the learning process enjoyable.

What We’ll Cover

In this tutorial, we will cover the following key areas:

  • Setting up a TypeScript development environment.
  • Defining data structures for recipes.
  • Creating interactive elements for user input.
  • Rendering recipes dynamically in the browser.
  • Handling user interactions (e.g., adding ingredients, viewing instructions).
  • Implementing basic error handling.

Prerequisites

Before we begin, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor (e.g., Visual Studio Code, Sublime Text).

Setting Up Your Development Environment

Let’s start by setting up our development environment. Open your terminal or command prompt and create a new project directory:

mkdir recipe-app
cd recipe-app

Next, initialize a new npm project:

npm init -y

This command creates a package.json file, which will manage our project dependencies. Now, install TypeScript globally or locally:

npm install --save-dev typescript

After the installation is complete, create a tsconfig.json file in your project directory. This file configures TypeScript’s compiler options. You can generate a basic tsconfig.json file using the following command:

npx tsc --init

This command creates a tsconfig.json file with many default settings. We’ll adjust some of these settings to fit our project. Open tsconfig.json in your code editor and modify the following settings:

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

Here’s what these settings mean:

  • 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.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • strict: true: Enables strict type checking.
  • skipLibCheck: true: Skips type checking of declaration files.
  • include: ["src/**/*"]: Specifies the source files to include in the compilation.

Now, create a src directory and a file named app.ts inside it. This is where we’ll write our TypeScript code. You can also create an index.html file in the root directory to serve as the entry point for your application.

Defining Recipe Data Structures

The first step in building our recipe app is to define the data structures for a recipe. We’ll use TypeScript interfaces to define the shape of our recipe data. Open src/app.ts and add the following code:

// src/app.ts

interface Ingredient {
  name: string;
  quantity: number;
  unit: string;
}

interface Recipe {
  name: string;
  description: string;
  ingredients: Ingredient[];
  instructions: string[];
}

In this code:

  • We define an Ingredient interface with properties for the ingredient’s name, quantity, and unit.
  • We define a Recipe interface with properties for the recipe’s name, description, ingredients (an array of Ingredient objects), and instructions (an array of strings).

Creating Interactive Elements

Let’s create some interactive elements in our HTML to allow users to input recipe information. Open index.html and add the following HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recipe App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Recipe App</h1>
    <div id="recipe-form">
      <h2>Add Recipe</h2>
      <label for="recipe-name">Recipe Name:</label>
      <input type="text" id="recipe-name" name="recipe-name"><br>

      <label for="recipe-description">Description:</label>
      <textarea id="recipe-description" name="recipe-description" rows="4"></textarea><br>

      <div id="ingredients-container">
        <h3>Ingredients:</h3>
        <div class="ingredient-input">
          <label for="ingredient-name-1">Ingredient Name:</label>
          <input type="text" class="ingredient-name" id="ingredient-name-1" name="ingredient-name-1">
          <label for="ingredient-quantity-1">Quantity:</label>
          <input type="number" class="ingredient-quantity" id="ingredient-quantity-1" name="ingredient-quantity-1">
          <label for="ingredient-unit-1">Unit:</label>
          <input type="text" class="ingredient-unit" id="ingredient-unit-1" name="ingredient-unit-1">
        </div>
      </div>
      <button id="add-ingredient-button">Add Ingredient</button><br>

      <label for="recipe-instructions">Instructions:</label>
      <textarea id="recipe-instructions" name="recipe-instructions" rows="6"></textarea><br>

      <button id="submit-recipe">Submit Recipe</button>
    </div>

    <div id="recipe-display">
      <h2>Recipes:</h2>
      <div id="recipes-list">
        <!-- Recipes will be displayed here -->
      </div>
    </div>
  </div>
  <script src="./dist/app.js"></script>
</body>
</html>

This HTML structure includes:

  • A form (recipe-form) for adding new recipes, with input fields for the recipe name, description, ingredients, and instructions.
  • An ingredients container (ingredients-container) to hold ingredient input fields, with an “Add Ingredient” button.
  • A display area (recipe-display) to show the added recipes.
  • A submit button (submit-recipe) to save the recipe.

Create a simple CSS file (style.css) and add some basic styling to enhance the appearance of the application:

/* style.css */

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

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 800px;
}

h1, h2, h3 {
  color: #333;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"], input[type="number"], textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

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

button:hover {
  background-color: #45a049;
}

#ingredients-container {
  margin-bottom: 15px;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}

.ingredient-input {
  margin-bottom: 10px;
}

#recipes-list {
  margin-top: 20px;
}

.recipe-card {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

Adding Functionality with TypeScript

Now, let’s add the functionality to handle user input, add ingredients, and display recipes. Open src/app.ts and add the following code:

// src/app.ts

interface Ingredient {
  name: string;
  quantity: number;
  unit: string;
}

interface Recipe {
  name: string;
  description: string;
  ingredients: Ingredient[];
  instructions: string[];
}

// Get references to HTML elements
const recipeForm = document.getElementById('recipe-form') as HTMLDivElement;
const recipeNameInput = document.getElementById('recipe-name') as HTMLInputElement;
const recipeDescriptionInput = document.getElementById('recipe-description') as HTMLTextAreaElement;
const ingredientsContainer = document.getElementById('ingredients-container') as HTMLDivElement;
const addIngredientButton = document.getElementById('add-ingredient-button') as HTMLButtonElement;
const recipeInstructionsInput = document.getElementById('recipe-instructions') as HTMLTextAreaElement;
const submitRecipeButton = document.getElementById('submit-recipe') as HTMLButtonElement;
const recipesList = document.getElementById('recipes-list') as HTMLDivElement;

let ingredientCount = 1;

// Function to add a new ingredient input field
function addIngredientInput() {
  ingredientCount++;
  const ingredientInputDiv = document.createElement('div');
  ingredientInputDiv.classList.add('ingredient-input');
  ingredientInputDiv.innerHTML = `
    <label for="ingredient-name-${ingredientCount}">Ingredient Name:</label>
    <input type="text" class="ingredient-name" id="ingredient-name-${ingredientCount}" name="ingredient-name-${ingredientCount}"><br>
    <label for="ingredient-quantity-${ingredientCount}">Quantity:</label>
    <input type="number" class="ingredient-quantity" id="ingredient-quantity-${ingredientCount}" name="ingredient-quantity-${ingredientCount}"><br>
    <label for="ingredient-unit-${ingredientCount}">Unit:</label>
    <input type="text" class="ingredient-unit" id="ingredient-unit-${ingredientCount}" name="ingredient-unit-${ingredientCount}"><br>
  `;
  ingredientsContainer.appendChild(ingredientInputDiv);
}

// Event listener for adding ingredient inputs
addIngredientButton?.addEventListener('click', addIngredientInput);

// Function to get ingredient data
function getIngredients(): Ingredient[] {
  const ingredients: Ingredient[] = [];
  const ingredientNameInputs = document.querySelectorAll('.ingredient-name') as NodeListOf<HTMLInputElement>;
  const ingredientQuantityInputs = document.querySelectorAll('.ingredient-quantity') as NodeListOf<HTMLInputElement>;
  const ingredientUnitInputs = document.querySelectorAll('.ingredient-unit') as NodeListOf<HTMLInputElement>;

  for (let i = 0; i < ingredientNameInputs.length; i++) {
    const name = ingredientNameInputs[i].value;
    const quantity = parseFloat(ingredientQuantityInputs[i].value);
    const unit = ingredientUnitInputs[i].value;

    if (name && !isNaN(quantity) && unit) {
      ingredients.push({
        name,
        quantity,
        unit,
      });
    }
  }
  return ingredients;
}

// Function to handle recipe submission
function handleSubmit(event: Event) {
  event.preventDefault();

  const name = recipeNameInput.value;
  const description = recipeDescriptionInput.value;
  const ingredients = getIngredients();
  const instructions = recipeInstructionsInput.value.split('n');

  if (!name || !description || ingredients.length === 0 || !instructions) {
    alert('Please fill in all the fields.');
    return;
  }

  const newRecipe: Recipe = {
    name,
    description,
    ingredients,
    instructions,
  };

  // Store the recipe (you can replace this with local storage or a database)
  displayRecipe(newRecipe);

  // Clear the form
  recipeNameInput.value = '';
  recipeDescriptionInput.value = '';
  recipeInstructionsInput.value = '';
  // Clear ingredient inputs
  const ingredientInputs = document.querySelectorAll('.ingredient-input');
  ingredientInputs.forEach(input => input.remove());
  ingredientCount = 1; // Reset ingredient count
  addIngredientInput(); // Add one default ingredient input
}

// Function to display the recipe
function displayRecipe(recipe: Recipe) {
  const recipeCard = document.createElement('div');
  recipeCard.classList.add('recipe-card');
  recipeCard.innerHTML = `
    <h3>${recipe.name}</h3>
    <p>${recipe.description}</p>
    <h4>Ingredients:</h4>
    <ul>
      ${recipe.ingredients.map(ingredient => `<li>${ingredient.name} - ${ingredient.quantity} ${ingredient.unit}</li>`).join('')}
    </ul>
    <h4>Instructions:</h4>
    <ol>
      ${recipe.instructions.map(instruction => `<li>${instruction}</li>`).join('')}
    </ol>
  `;
  recipesList.appendChild(recipeCard);
}

// Event listener for recipe submission
submitRecipeButton?.addEventListener('click', handleSubmit);

// Initial ingredient input
addIngredientInput();

Let’s break down this code:

  • We get references to the HTML elements using their IDs. Using the ‘as’ keyword, we’re explicitly telling TypeScript what type of HTML element each variable should be (e.g., HTMLInputElement, HTMLTextAreaElement). This enables type checking and improves code safety.
  • addIngredientInput(): This function dynamically adds new ingredient input fields to the form when the “Add Ingredient” button is clicked.
  • getIngredients(): This function retrieves the ingredient data from the input fields and returns an array of Ingredient objects. It iterates through all ingredient input fields, retrieves their values, and creates Ingredient objects. It also includes basic validation to ensure that all fields are filled.
  • handleSubmit(event: Event): This function is called when the submit button is clicked. It retrieves the recipe name, description, ingredients, and instructions from the form, validates the input, creates a new Recipe object, and calls the displayRecipe function to show the recipe. It also clears the form fields after submission.
  • displayRecipe(recipe: Recipe): This function creates a new HTML element to display the recipe details, including the name, description, ingredients, and instructions, and appends it to the recipes list.
  • Event listeners: We add event listeners to the “Add Ingredient” and “Submit Recipe” buttons to trigger the corresponding functions when clicked.
  • Initial ingredient input: The addIngredientInput() function is called once when the script loads to add the first set of ingredient input fields.

Compiling and Running the Application

Now, let’s compile our TypeScript code into JavaScript and run the application. In your terminal, run the following command:

tsc

This command will compile your app.ts file and generate a dist/app.js file. Finally, open index.html in your web browser. You should see the recipe app interface with the form to add recipes and the area to display them. You can start adding recipes and see them displayed dynamically on the page.

Common Mistakes and How to Fix Them

When working with TypeScript and building interactive web applications, you may encounter some common mistakes:

  • Incorrect Type Annotations: Forgetting to specify the correct types for variables, function parameters, and return values can lead to unexpected behavior and runtime errors. Always ensure your types are accurate and match the data you’re working with. Use the ‘as’ keyword to specify the correct type for HTML elements.
  • Incorrect HTML Element References: Incorrectly referencing HTML elements (e.g., using the wrong ID or class) can cause your JavaScript code to fail. Double-check your element IDs and classes in your HTML and ensure your JavaScript code correctly targets them.
  • Event Handling Issues: Not properly handling events (e.g., not preventing the default form submission behavior) can lead to unexpected page reloads or other issues. Make sure you understand how events work and use event.preventDefault() when necessary.
  • Incorrect DOM Manipulation: Manipulating the DOM (Document Object Model) incorrectly can lead to performance issues or errors. Be mindful of how you add, remove, and update elements in the DOM. Use efficient methods like createElement() and appendChild().
  • Missing or Incorrect Imports: Forgetting to import necessary modules or importing them incorrectly can cause errors. If you’re using external libraries, make sure to import them correctly.
  • Not Handling Null/Undefined Values: Failing to account for null or undefined values can lead to runtime errors. Use optional chaining (?.) and nullish coalescing (??) to handle these cases gracefully.

Key Takeaways

Here’s a summary of what we’ve learned:

  • We set up a TypeScript development environment and configured the tsconfig.json file.
  • We defined interfaces to represent the data structures for our recipe app.
  • We created HTML elements for user input and displaying recipes.
  • We used TypeScript to handle user input, dynamically add ingredient input fields, and display recipes.
  • We learned about common mistakes and how to fix them.

FAQ

Here are some frequently asked questions:

  1. Can I use a different module system? Yes, you can. In the tsconfig.json file, you can change the module option to "amd", "system", or "esnext" depending on your needs.
  2. How can I store the recipes permanently? Currently, the recipes are only stored in the browser’s memory. To store them permanently, you can use local storage, session storage, or a database.
  3. How can I add more advanced features? You can add features like image uploads, search functionality, recipe filtering, user authentication, and more.
  4. How can I deploy this application? You can deploy the application using platforms like Netlify, Vercel, or GitHub Pages.

This tutorial provides a solid foundation for building interactive web applications with TypeScript. You can further expand on this project by adding more features, refining the user interface, and exploring advanced TypeScript concepts. Remember to practice and experiment to solidify your understanding. The more you work with TypeScript, the more comfortable you’ll become, and the more powerful your applications will be.

As you continue your journey in web development, remember that the key to success is consistent learning and practice. Don’t be afraid to experiment, make mistakes, and learn from them. The world of web development is vast and ever-evolving, offering endless opportunities to create and innovate. Embrace the challenges, and enjoy the process of building something amazing, one line of code at a time. Your ability to create applications that manage and display information effectively will serve you well in various projects. Keep building, keep learning, and keep creating!

More posts