TypeScript Tutorial: Building a Simple Interactive Web-Based Color Palette Generator

Written by

learnmodernjavascript

in

Ever found yourself struggling to find the perfect color scheme for your website or design project? Creating visually appealing and harmonious color palettes can be a surprisingly tricky task. As developers, we often need to work with colors, whether it’s for styling our web applications, creating data visualizations, or designing user interfaces. Wouldn’t it be great to have a tool that helps us generate and experiment with color palettes quickly and easily? This tutorial will guide you through building a simple, interactive web-based color palette generator using TypeScript. This project will not only introduce you to fundamental TypeScript concepts but also provide you with a practical, hands-on experience that you can apply to your projects.

Why TypeScript?

Before we dive into the code, let’s briefly discuss why TypeScript is an excellent choice for this project. TypeScript is a superset of JavaScript that adds static typing. This means you can define the types of variables, function parameters, and return values. This feature offers several advantages:

  • Improved Code Quality: Static typing helps catch errors early in the development process, reducing the likelihood of runtime bugs.
  • Enhanced Readability: Types make your code easier to understand and maintain.
  • Better Tooling: TypeScript provides excellent tooling support, including autocompletion, refactoring, and code navigation in most modern IDEs.
  • Scalability: TypeScript facilitates the development of large, complex applications by providing structure and organization.

For this project, TypeScript will help us write cleaner, more maintainable code and prevent common mistakes related to color manipulations.

Project Overview

Our color palette generator will allow users to:

  • Generate random color palettes.
  • View the generated colors in a visually appealing way.
  • Copy the hex codes of the colors.

We’ll use HTML for the structure, CSS for styling, and TypeScript for the logic. The goal is to keep the project simple enough for beginners while covering essential TypeScript concepts.

Setting Up the Project

First, let’s set up our project directory. Create a new folder named `color-palette-generator` (or any name you prefer). Inside this folder, create the following files and folders:

  • `index.html`: The main HTML file.
  • `style.css`: The CSS file for styling.
  • `src/`: A folder to hold our TypeScript files.
  • `src/index.ts`: The main TypeScript file.
  • `tsconfig.json`: The TypeScript configuration file.

Your directory structure should look like this:

color-palette-generator/
├── index.html
├── style.css
├── src/
│   └── index.ts
└── tsconfig.json

Setting Up TypeScript

Next, we need to initialize our TypeScript project. Open your terminal, navigate to the `color-palette-generator` directory, and run the following command:

npm init -y

This command creates a `package.json` file. Now, install TypeScript and a development server (we’ll use `esbuild` for its speed):

npm install typescript esbuild --save-dev

After the installation is complete, create a `tsconfig.json` file in the root directory. This file tells the TypeScript compiler how to compile your code. Here’s a basic `tsconfig.json` configuration:

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

Let’s break down some of the key options:

  • `target`: Specifies the JavaScript version to compile to. We’re using ES2015 for modern browser support.
  • `module`: Specifies the module system to use. ESNext is a modern choice.
  • `moduleResolution`: Specifies how modules are resolved. “node” is standard for Node.js-style module resolution.
  • `outDir`: The directory where the compiled JavaScript files will be placed.
  • `sourceMap`: Generates source map files, which help with debugging.
  • `strict`: Enables strict type-checking options.
  • `esModuleInterop`: Enables interoperability between CommonJS and ES modules.
  • `skipLibCheck`: Skips type checking of declaration files (*.d.ts).
  • `forceConsistentCasingInFileNames`: Prevents inconsistencies in casing when importing modules.
  • `include`: Specifies which files to include in the compilation.

Writing the HTML

Now, let’s create the basic HTML structure in `index.html`:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Palette Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Color Palette Generator</h1>
        <div class="palette-container" id="palette-container">
            <!-- Color boxes will be added here -->
        </div>
        <button id="generate-button">Generate Palette</button>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up the basic layout: a title, a container for the color palette, and a button to generate new palettes. The `<script>` tag links to our compiled JavaScript file (which we’ll generate later).

Styling with CSS

Let’s add some basic styling to `style.css` to make our color palette generator look good:

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

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

.palette-container {
    display: flex;
    margin-bottom: 20px;
}

.color-box {
    width: 100px;
    height: 100px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

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

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

This CSS provides a basic layout and styling for the page elements, including the color boxes and the generate button. It uses flexbox to arrange the color boxes horizontally.

Writing the TypeScript Code

Now, let’s write the TypeScript code in `src/index.ts`. This is where the core logic of our color palette generator will reside.


// Define a type for a color (hex code)
type Color = string;

// Function to generate a random hex color
function getRandomHexColor(): Color {
    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

// Function to generate a color palette
function generatePalette(numColors: number): Color[] {
    const palette: Color[] = [];
    for (let i = 0; i < numColors; i++) {
        palette.push(getRandomHexColor());
    }
    return palette;
}

// Function to create a color box element
function createColorBox(color: Color): HTMLDivElement {
    const box = document.createElement('div');
    box.classList.add('color-box');
    box.style.backgroundColor = color;
    box.title = color; // Show hex code on hover
    box.addEventListener('click', () => {
        navigator.clipboard.writeText(color)
            .then(() => {
                alert(`Copied ${color} to clipboard!`);
            })
            .catch(err => {
                console.error('Failed to copy: ', err);
                alert('Failed to copy color.');
            });
    });
    return box;
}

// Function to render the palette
function renderPalette(palette: Color[]): void {
    const paletteContainer = document.getElementById('palette-container');
    if (!paletteContainer) return;

    paletteContainer.innerHTML = ''; // Clear existing boxes
    palette.forEach(color => {
        const box = createColorBox(color);
        paletteContainer.appendChild(box);
    });
}

// Main function to handle palette generation
function generateAndRenderPalette(): void {
    const numColors = 5; // You can change this
    const palette = generatePalette(numColors);
    renderPalette(palette);
}

// Event listener for the generate button
document.addEventListener('DOMContentLoaded', () => {
    const generateButton = document.getElementById('generate-button');
    if (generateButton) {
        generateButton.addEventListener('click', generateAndRenderPalette);
    }
    // Initial palette generation on page load
    generateAndRenderPalette();
});

Let’s break down the code:

  • `type Color = string;`: Defines a type alias for a color, which is a string representing a hex code. This improves code readability and maintainability.
  • `getRandomHexColor(): Color`: Generates a random hex color code.
  • `generatePalette(numColors: number): Color[]`: Generates an array of random color codes based on the number of colors specified.
  • `createColorBox(color: Color): HTMLDivElement`: Creates a `div` element for each color in the palette. It sets the background color, adds a title (for displaying the hex code on hover), and adds a click event listener to copy the hex code to the clipboard.
  • `renderPalette(palette: Color[]): void`: Renders the generated color palette by creating color boxes and appending them to the `palette-container`. It also clears any existing color boxes before rendering a new palette.
  • `generateAndRenderPalette(): void`: This function orchestrates the generation and rendering of the color palette. It calls `generatePalette()` to get the color codes and then calls `renderPalette()` to display them.
  • Event Listener: An event listener is added to the generate button to call `generateAndRenderPalette()` when the button is clicked. Also, an initial palette is generated when the page loads.

Compiling and Running the Code

Now that we’ve written the code, let’s compile it. Open your terminal in the `color-palette-generator` directory and run the following command:

npx esbuild src/index.ts --bundle --outfile=dist/index.js

This command uses `esbuild` to bundle your TypeScript code into a single JavaScript file (`dist/index.js`). The `–bundle` flag tells `esbuild` to bundle all the dependencies, and `–outfile` specifies the output file. You can also add a watch flag to automatically recompile on file changes:

npx esbuild src/index.ts --bundle --outfile=dist/index.js --watch

After compiling, open `index.html` in your browser. You should see a color palette generator with a button to generate new palettes. Clicking on a color box should copy its hex code to your clipboard.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Type Errors: TypeScript will highlight type errors during development. Always pay attention to these errors and fix them by ensuring your variables and function parameters have the correct types.
  • Incorrect Element Selection: Make sure your `document.getElementById()` calls are correct and that the elements exist in your HTML. Double-check your element IDs. If you’re working with a more complex application, consider using a framework like React or Vue.js, which offer more sophisticated ways to manage the DOM.
  • Event Listener Issues: Ensure your event listeners are correctly attached to the elements and that the event handling functions are properly defined. Be careful with the context (`this`) inside event handlers.
  • Clipboard API Errors: The Clipboard API might not work in all browsers, and it requires a secure context (HTTPS). Make sure your application is served over HTTPS if you encounter issues.
  • CSS Styling Issues: Double-check your CSS rules to ensure they are correctly applied to the elements. Use your browser’s developer tools to inspect the elements and see if any CSS rules are overriding your styles.

Adding More Features

Once you’ve built the basic color palette generator, you can extend it with additional features:

  • Color Contrast Checker: Add a feature to check the contrast between the colors in the palette.
  • Save/Load Palettes: Implement the ability to save and load color palettes to local storage or a backend.
  • Color Harmonization: Add options to generate palettes based on color harmony rules (e.g., complementary, analogous, triadic).
  • Color Picker: Integrate a color picker to allow users to select specific colors.
  • Accessibility Features: Improve accessibility by adding ARIA attributes and ensuring sufficient color contrast.
  • Responsive Design: Make the generator responsive so that it looks good on different screen sizes.

Key Takeaways

  • TypeScript Basics: You’ve learned about types, functions, and event listeners in TypeScript.
  • DOM Manipulation: You’ve practiced manipulating the Document Object Model (DOM) to create and update elements.
  • Project Structure: You’ve set up a basic project structure for a web application.
  • Error Handling: You’ve learned how to handle potential errors, such as clipboard API failures.
  • Practical Application: You’ve built a functional tool that you can use in your design projects.

FAQ

  1. What is TypeScript? TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static typing, which helps catch errors early and improves code maintainability.
  2. Why use TypeScript for this project? TypeScript allows us to write cleaner and more maintainable code, and it provides better tooling support, such as autocompletion and error checking.
  3. How do I compile TypeScript code? You can compile TypeScript code using the TypeScript compiler (`tsc`) or a bundler like `esbuild`.
  4. How can I add more features to this project? You can extend the project by adding features like color contrast checking, saving/loading palettes, color harmonization, or integrating a color picker.
  5. What are some common mistakes to avoid? Common mistakes include type errors, incorrect element selection, event listener issues, and clipboard API errors.

By following this tutorial, you’ve created a functional color palette generator using TypeScript and learned about various aspects of web development. From setting up the project to handling user interactions, you’ve gained practical experience with TypeScript and its application in building interactive web tools. This project serves as a solid foundation for your web development journey. As you continue to learn and build, remember to experiment, explore new features, and always strive to improve your code. The skills you’ve acquired here will be invaluable as you tackle more complex projects and continue to grow as a developer. Keep practicing, and you’ll be well on your way to becoming proficient in TypeScript and web development.

More posts