Erstellen einer Einheitenumrechner-App in Angular mit Tailwind CSS

Einheitenumrechner sind praktische Werkzeuge zum Umrechnen von Maßeinheiten zwischen verschiedenen Einheiten und erleichtern die Arbeit mit verschiedenen Maßsystemen. In diesem Tutorial erstellen wir eine Einheitenumrechner-App in Angular, mit der Benutzer Werte zwischen verschiedenen Längeneinheiten wie Metern, Kilometern, Zentimetern und Millimetern umrechnen können. Wir implementieren die Konvertierungslogik und verwenden Tailwind CSS für das Styling, um eine optisch ansprechende und benutzerfreundliche Oberfläche zu erstellen.

Inhaltsverzeichnis

• Einführung
• Einrichten des Projekts
• Implementierung der Konvertierungslogik
• Styling mit Tailwind CSS
• Ausführen der Anwendung
• Fazit
• Den Code erkunden

---

Einführung

Eine Einheitenumrechner-App bietet ein nützliches Tool zum Umrechnen von Maßeinheiten zwischen verschiedenen Einheiten und erleichtert so die Arbeit mit verschiedenen Maßsystemen. In diesem Projekt konzentrieren wir uns auf Längeneinheiten, die es Benutzern ermöglichen, Werte zwischen Metern, Kilometern, Zentimetern und Millimetern umzurechnen. Die App wird über eine einfache und intuitive Benutzeroberfläche verfügen, die es Benutzern ermöglicht, einen Wert einzugeben, die Einheiten auszuwählen, von denen bzw. in die umgerechnet werden soll, und das umgerechnete Ergebnis sofort anzuzeigen.

Einrichten des Projekts

Erstellen Sie zunächst ein neues Angular-Projekt. Wenn Sie Angular CLI noch nicht eingerichtet haben, installieren Sie es mit dem Befehl:

npm install -g @angular/cli

Als nächstes erstellen Sie ein neues Angular-Projekt:

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

Nachdem das Projekt eingerichtet ist, installieren Sie Tailwind CSS:

npm install -D tailwindcss
npx tailwindcss init

Konfigurieren Sie Tailwind CSS, indem Sie die Datei tailwind.config.js aktualisieren:

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

Fügen Sie die Basis, Komponenten und Dienstprogramme von Tailwind in Ihre src/styles.css ein:

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

Implementierung der Konvertierungslogik

Definieren Sie in app.component.ts die Konvertierungslogik zwischen Einheiten:

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

Dieser Code richtet die grundlegende Konvertierungslogik ein und verarbeitet Benutzereingaben zum Konvertieren von Längeneinheiten.

Styling mit Tailwind CSS

Jetzt entwerfen wir die Schnittstelle mit Tailwind CSS in 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>

Das Design nutzt CSS-Klassen von Tailwind, um eine einfache, reaktionsfähige Benutzeroberfläche zu erstellen, die sich nahtlos an verschiedene Geräte anpasst.

Ausführen der Anwendung

Führen Sie Ihre Anwendung aus mit:

ng serve

Navigieren Sie zu http://localhost:4200/, um Ihre Einheitenumrechner-App in Aktion zu sehen. Sie können einen Wert eingeben, Einheiten aus den Dropdown-Menüs auswählen und auf „Umrechnen“ klicken, um das Ergebnis sofort anzuzeigen.

Fazit

Herzlichen Glückwunsch! Sie haben erfolgreich eine Einheitenumrechner-App in Angular erstellt und dabei Tailwind CSS für die Gestaltung verwendet. Dieses Projekt zeigt, wie man eine funktionale und optisch ansprechende Webanwendung erstellt, die ein wertvolles Werkzeug zum Umrechnen von Längeneinheiten bietet. Sie können die App weiter verbessern, indem Sie weitere Einheitenoptionen hinzufügen, das Design verbessern oder zusätzliche Funktionen implementieren.

Viel Spaß beim Codieren!

---

Sie können den Inhalt jederzeit nach Bedarf anpassen. Lassen Sie mich wissen, wenn Sie Fragen haben oder weitere Hilfe benötigen. Viel Glück mit Ihrem Projekt! ?

Den Code erkunden

Besuchen Sie das GitHub-Repository, um den Code im Detail zu erkunden.

---

Das obige ist der detaillierte Inhalt vonErstellen einer Einheitenumrechner-App in Angular mit Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!