Membina Apl Penukar Unit dalam Sudut dengan CSS Tailwind

Penukar unit ialah alat berguna untuk menukar ukuran antara unit yang berbeza, menjadikannya lebih mudah untuk bekerja dengan pelbagai sistem pengukuran. Dalam tutorial ini, kami akan membina apl penukar unit dalam Sudut yang membolehkan pengguna menukar nilai antara unit panjang yang berbeza, seperti meter, kilometer, sentimeter dan milimeter. Kami akan melaksanakan logik penukaran dan menggunakan CSS Tailwind untuk penggayaan bagi mencipta antara muka yang menarik secara visual dan mesra pengguna.

Jadual Kandungan

• Pengenalan
• Menyediakan Projek
• Melaksanakan Logik Penukaran
• Menggayakan dengan Tailwind CSS
• Menjalankan Aplikasi
• Kesimpulan
• Meneroka Kod

---

Pengenalan

Apl penukar unit menyediakan alat yang berguna untuk menukar ukuran antara unit yang berbeza, menjadikannya lebih mudah untuk bekerja dengan pelbagai sistem pengukuran. Dalam projek ini, kami akan menumpukan pada unit panjang, yang membolehkan pengguna menukar nilai antara meter, kilometer, sentimeter dan milimeter. Apl ini akan menampilkan antara muka yang ringkas dan intuitif yang membolehkan pengguna memasukkan nilai, memilih unit untuk ditukar daripada dan kepada serta melihat hasil yang ditukar serta-merta.

Menyediakan Projek

Mulakan dengan mencipta projek Angular baharu. Jika anda belum lagi menyediakan Angular CLI, pasangkannya menggunakan arahan:

npm install -g @angular/cli

Seterusnya, buat projek Angular baharu:

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

Selepas projek disediakan, pasang Tailwind CSS:

npm install -D tailwindcss
npx tailwindcss init

Konfigurasikan CSS Tailwind dengan mengemas kini fail tailwind.config.js:

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

Sertakan pangkalan Tailwind, komponen dan utiliti dalam src/styles.css anda:

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

Melaksanakan Logik Penukaran

Dalam app.component.ts, tentukan logik penukaran antara unit:

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

Kod ini menyediakan logik penukaran asas, mengendalikan input pengguna untuk menukar unit panjang.

Menggayakan dengan Tailwind CSS

Sekarang, mari kita reka bentuk antara muka menggunakan Tailwind CSS dalam 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>

Reka bentuk menggunakan kelas CSS Tailwind untuk mencipta UI yang ringkas dan responsif yang melaraskan dengan lancar merentas peranti yang berbeza.

Menjalankan Aplikasi

Jalankan aplikasi anda dengan:

ng serve

Navigasi ke http://localhost:4200/ untuk melihat Apl Penukar Unit anda sedang beraksi. Anda boleh memasukkan nilai, pilih unit daripada menu lungsur turun dan klik "Tukar" untuk melihat hasilnya serta-merta.

Kesimpulan

Tahniah! Anda telah berjaya membina apl penukar unit dalam Angular menggunakan CSS Tailwind untuk penggayaan. Projek ini menunjukkan cara mencipta aplikasi web yang berfungsi dan menarik secara visual yang menyediakan alat berharga untuk menukar unit panjang. Anda boleh meningkatkan lagi apl dengan menambahkan lebih banyak pilihan unit, menambah baik reka bentuk atau melaksanakan ciri tambahan.

Selamat mengekod!

---

Jangan ragu untuk menyesuaikan kandungan mengikut keperluan. Beritahu saya jika anda mempunyai sebarang soalan atau memerlukan bantuan lanjut. Semoga berjaya dengan projek anda! ?

Meneroka Kod

Lawati repositori GitHub untuk meneroka kod secara terperinci.

---

Atas ialah kandungan terperinci Membina Apl Penukar Unit dalam Sudut dengan CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!