Bucket List

Overview

This project is a frontend Typescript exercise focused on DOM manipulation, interactive UI development and project structure. Based on a pre-designed HTML & CSS template, Bucket List allows users to create and organise their personal goals and dreams.

Login:

Dashboard:

Add dream:

Settings:

Technologies Used

• Typescript
  • event handling & DOM manipulation
  • form validation
  • dynamic rendering
• HTML5
• CSS3

How to Run

1. Clone this repository:

git clone https://github.com/jplimmer/bucket-list.git

2. Install packages (typescript) and compile:

npm install
npx tsc

3. Open index.html in your browser.

Project Structure

├── assets/
│   └── icons/
│       └── (icon assets)
├── pages/
│   ├── add-dream.html
│   ├── dashboard.html
│   ├── index.html
│   ├── login.html
│   └── settings.html
├── src/
│   ├── constants/
│   ├── models/
│   ├── pages/
│   ├── services/
│       ├── authService.ts
│       ├── dreamService.ts
│       └── themeService.ts
│   ├── ui/
│   ├── utils/
│   └── validation/
├── styles/
│   └── (css styles)
├── .gitignore
├── tsconfig.json
└── README.md (this file)