Créer une application de conversion d'unités en Angular avec Tailwind CSS

Les convertisseurs d'unités sont des outils pratiques pour convertir des mesures entre différentes unités, ce qui facilite le travail avec différents systèmes de mesure. Dans ce didacticiel, nous allons créer une application de conversion d'unités dans Angular qui permet aux utilisateurs de convertir des valeurs entre différentes unités de longueur, telles que les mètres, les kilomètres, les centimètres et les millimètres. Nous implémenterons la logique de conversion et utiliserons Tailwind CSS pour le style afin de créer une interface visuellement attrayante et conviviale.

Table des matières

• Présentation
• Mise en place du projet
• Mise en œuvre de la logique de conversion
• Style avec Tailwind CSS
• Exécuter l'application
• Conclusion
• Explorer le code

---

Présentation

Une application de conversion d'unités fournit un outil utile pour convertir des mesures entre différentes unités, facilitant ainsi le travail avec différents systèmes de mesure. Dans ce projet, nous nous concentrerons sur les unités de longueur, permettant aux utilisateurs de convertir des valeurs entre mètres, kilomètres, centimètres et millimètres. L'application comportera une interface simple et intuitive qui permettra aux utilisateurs de saisir une valeur, de sélectionner les unités à convertir et de visualiser instantanément le résultat converti.

Mise en place du projet

Commencez par créer un nouveau projet Angular. Si vous n'avez pas encore configuré Angular CLI, installez-le à l'aide de la commande :

npm install -g @angular/cli

Ensuite, créez un nouveau projet Angular :

ng new unit-converter-app
cd unit-converter-app

Une fois le projet configuré, installez Tailwind CSS :

npm install -D tailwindcss
npx tailwindcss init

Configurez Tailwind CSS en mettant à jour le fichier tailwind.config.js :

module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Incluez la base, les composants et les utilitaires de Tailwind dans votre src/styles.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

Mise en œuvre de la logique de conversion

Dans app.component.ts, définissez la logique de conversion entre les unités :

import { Component, inject, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  units = signal(['Meter', 'Kilometer', 'Centimeter', 'Millimeter']);
  inputValue = signal(0);
  fromUnit = signal('Meter');
  toUnit = signal('Meter');
  result = signal<number | null>(null);
  errorMessage = signal<string | null>(null);

  meta = inject(Meta);

  constructor() {
    this.meta.addTag({
      name: 'viewport',
      content: 'width=device-width, initial-scale=1',
    });
    this.meta.addTag({
      rel: 'icon',
      type: 'image/x-icon',
      href: 'favicon.ico',
    });
    this.meta.addTag({
      rel: 'canonical',
      href: 'https://unit-converter-app-manthanank.vercel.app/',
    });
    this.meta.addTag({ property: 'og:title', content: 'Unit Converter App' });
    this.meta.addTag({ name: 'author', content: 'Manthan Ankolekar' });
    this.meta.addTag({ name: 'keywords', content: 'angular' });
    this.meta.addTag({ name: 'robots', content: 'index, follow' });
    this.meta.addTag({
      property: 'og:description',
      content:
        'A simple unit converter app built using Angular that converts units like meter, kilometer, and more.',
    });
    this.meta.addTag({
      property: 'og:image',
      content: 'https://unit-converter-app-manthanank.vercel.app/image.jpg',
    });
    this.meta.addTag({
      property: 'og:url',
      content: 'https://unit-converter-app-manthanank.vercel.app/',
    });
  }

  convert() {
    if (!this.validateInput()) {
      return;
    }

    const conversionRates: { [key: string]: number } = {
      Meter: 1,
      Kilometer: 0.001,
      Centimeter: 100,
      Millimeter: 1000,
    };

    const fromRate = conversionRates[this.fromUnit()];
    const toRate = conversionRates[this.toUnit()];

    this.result.set((this.inputValue() * fromRate) / toRate);
  }

  reset() {
    this.inputValue.set(0);
    this.fromUnit.set('Meter');
    this.toUnit.set('Meter');
    this.result.set(null);
    this.errorMessage.set(null);
  }

  swapUnits() {
    const temp = this.fromUnit();
    this.fromUnit.set(this.toUnit());
    this.toUnit.set(temp);
  }

  validateInput(): boolean {
    if (this.inputValue() < 0) {
      this.errorMessage.set('Input value cannot be negative.');
      return false;
    }
    this.errorMessage.set(null);
    return true;
  }
}

Ce code configure la logique de conversion de base, gérant les entrées utilisateur pour convertir les unités de longueur.

Style avec Tailwind CSS

Maintenant, concevons l'interface en utilisant Tailwind CSS dans app.component.html :

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="p-6 max-w-3xl mx-auto bg-white rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-center">Unit Converter</h2>

    <div class="space-y-2">
      <label for="inputValue" class="block text-sm font-medium text-gray-700">Input Value:</label>
      <input type="number" id="inputValue" [(ngModel)]="inputValue"
        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
    </div>

    <div class="space-y-2">
      <label for="fromUnit" class="block text-sm font-medium text-gray-700">From:</label>
      <select id="fromUnit" [(ngModel)]="fromUnit"
        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        @for (unit of units(); track $index) {
        <option [value]="unit">{{ unit }}</option>
        }
      </select>
    </div>

    <div class="space-y-2">
      <label for="toUnit" class="block text-sm font-medium text-gray-700">To:</label>
      <select id="toUnit" [(ngModel)]="toUnit"
        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        @for (unit of units(); track $index) {
        @if (unit !== fromUnit()) {
        <option [value]="unit">{{ unit }}</option>
        }
        }
      </select>
    </div>

    <div class="flex space-x-2">
      <button (click)="convert()"
        class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Convert</button>
      <button (click)="reset()"
        class="w-full bg-gray-600 text-white py-2 px-4 rounded-md shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Reset</button>
      <button (click)="swapUnits()"
        class="w-full bg-yellow-600 text-white py-2 px-4 rounded-md shadow-sm hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">Swap</button>
    </div>

    @if (errorMessage()){
    <div class="text-red-500 text-center mt-4">{{ errorMessage() }}</div>
    }

    @if (result() !== null) {
    <h3 class="text-xl font-semibold text-center mt-4">Result: {{result()}}</h3>
    }
  </div>
</div>

La conception utilise les classes CSS Tailwind pour créer une interface utilisateur simple et réactive qui s'adapte parfaitement à différents appareils.

Exécuter l'application

Exécutez votre application avec :

ng serve

Accédez à http://localhost:4200/ pour voir votre application Unit Converter en action. Vous pouvez saisir une valeur, sélectionner des unités dans les menus déroulants et cliquer sur « Convertir » pour voir le résultat instantanément.

Conclusion

Félicitations ! Vous avez créé avec succès une application de conversion d'unités dans Angular en utilisant Tailwind CSS pour le style. Ce projet montre comment créer une application Web fonctionnelle et visuellement attrayante qui fournit un outil précieux pour convertir des unités de longueur. Vous pouvez améliorer davantage l'application en ajoutant plus d'options d'unité, en améliorant la conception ou en implémentant des fonctionnalités supplémentaires.

Bon codage !

---

N'hésitez pas à personnaliser le contenu selon vos besoins. Faites-moi savoir si vous avez des questions ou si vous avez besoin d'aide supplémentaire. Bonne chance avec votre projet! ?

Explorer le code

Visitez le référentiel GitHub pour explorer le code en détail.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!