Mini Project 3 - Front End E-Commerce

Website e-commerce static menggunakan HTML, CSS, dan JavaScript untuk TPM BNCC.

📋 Deskripsi Project

Project ini merupakan implementasi dari Mini Project 3 yang membuat website e-commerce static dengan fitur CRUD (Create, Read, Update, Delete) untuk manajemen produk. Website ini menggunakan Fetch API untuk mengambil data dari FakeStore API (https://fakestoreapi.com/).

✨ Fitur

1. Menampilkan Data Produk - Fetch GET request untuk mengambil semua produk dari API
2. Menambahkan Produk - Fetch POST request untuk menambah produk baru
3. Memperbarui Produk - Fetch PUT request untuk update data produk
4. Menghapus Produk - Fetch DELETE request untuk hapus produk
5. Error Handling - Menampilkan pesan error jika API request gagal
6. Loading State - Menampilkan loading indicator saat fetch data

🎨 Design System

Fonts

• Inter: Google Fonts
• Spline Sans: Google Fonts

Font Sizes

• 36px (title)
• 32px (sub title)
• 16px (navbar, add product button, product title, paragraph)
• 20px (second title, input title)

Color Palette

• #DBF0FD - Primary
• #7ACCFF - Secondary
• #8FCEF5 - Title
• #4986DB - Title
• #616161 - Title
• #000000 - Sub Title
• #4B5563 - Text

🔗 Link Referensi

• Figma Design: TPM Mini Case 2
• FakeStore API: https://fakestoreapi.com/
• Video Panduan GitHub: YouTube

🚀 Cara Menjalankan

1. Clone repository ini
2. Buka file index.html di browser
3. Pastikan koneksi internet aktif untuk mengakses FakeStore API

📝 API Endpoints yang Digunakan

• GET /products - Mengambil semua produk
• GET /products/:id - Mengambil satu produk berdasarkan ID
• POST /products - Menambah produk baru
• PUT /products/:id - Update produk
• DELETE /products/:id - Hapus produk