Créer une application de conversion d'unités en Angular avec Tailwind CSS-js tutoriel-php.cn

Building a Unit Converter App in Angular with 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

Copier après la connexion

Ensuite, créez un nouveau projet Angular :

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

Copier après la connexion

Une fois le projet configuré, installez Tailwind CSS :

npm install -D tailwindcss
npx tailwindcss init

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

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;
  }
}

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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! ?