NotesApp — Web Component & RESTful API

A modern, responsive, dark-themed note-taking web application built using Vanilla JavaScript (ES6+ Web Components), bundled with Webpack, and integrated with the Dicoding Notes RESTful API v2.

---

🚀 Live Features

• Full RESTful API Integration:
  • Fetch & display active notes (GET /notes)
  • Fetch & display archived notes (GET /notes/archived)
  • Create new notes (POST /notes)
  • Archive active notes (POST /notes/{id}/archive)
  • Restore / unarchive notes (POST /notes/{id}/unarchive)
  • Delete notes (DELETE /notes/{id})
• Native Web Components: Modular UI built with Custom Elements and Shadow DOM (<app-bar>, <note-input>, <note-item>, <note-list>, <loading-indicator>, and <footer-bar>).
• Real-time Form Validation: Live character counter (50 chars left), minimum character constraint, and instant visual error feedback.
• CSS Grid Layout: Responsive auto-fitting multi-column card grid across mobile, tablet, and desktop screens.
• Custom Attributes & Observers: Reactive custom elements utilizing observedAttributes and attributeChangedCallback.
• Loading State: Custom <loading-indicator> component during asynchronous HTTP requests.
• Interactive Feedback: Modal alerts and confirmation dialogs powered by SweetAlert2.
• Code Formatter: Consistent code style enforced with Prettier.

---

🛠️ Tech Stack

• Core: HTML5, CSS3 (CSS Grid & Flexbox), Vanilla JavaScript (ES6+)
• Architecture: Web Components (Custom Elements & Shadow DOM)
• Module Bundler: Webpack (v5), Webpack Dev Server, HtmlWebpackPlugin
• Asynchronous Requests: Fetch API (async/await)
• Libraries & Tooling: SweetAlert2, Prettier

---

📁 Project Structure

notes-app/
├── src/
│   ├── styles/
│   │   └── style.css
│   ├── scripts/
│   │   ├── data/
│   │   │   └── api.js                # Fetch API calls to Notes RESTful API
│   │   ├── components/
│   │   │   ├── app-bar.js            # Header navigation custom element
│   │   │   ├── note-input.js         # Form input & validation custom element
│   │   │   ├── note-item.js          # Note card custom element
│   │   │   ├── note-list.js          # CSS Grid container custom element
│   │   │   ├── loading-indicator.js  # Loading spinner custom element
│   │   │   └── footer-bar.js         # Footer custom element
│   │   ├── utils/
│   │   │   └── alert.js              # SweetAlert2 helper functions
│   │   ├── index.js                  # Entry point for active notes
│   │   └── archived.js               # Entry point for archived notes
├── index.html                        # Active notes page
├── archived.html                     # Archived notes page
├── .prettierrc                       # Code formatting rules
├── .gitignore
├── package.json
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js