Plan-It! is a web-based activity logger created using HTML5/CSS3/JavaScript (ES6+), and refactored into SASS/SCSS & TypeScript, and modularized to better exhibit industry practices. This is a Webpack project that offers a convenient user experience, allowing users to organize daily tasks and responsibilities with ease.The user can make different lists that store their own set of tasks, each with ample CRUD functionality and persistent data management using localStorage API.
The website is hosted on GitHub Pages, and can be accessed below:
Otherwise, the project's functionality can be tested through the following steps:
- Download the repository.
- Extract the repository.
- Open the folder in VSCode, and run
npm install. - Then, run
npx webpack serve. - Locate the
http://localhost:8080/output in the terminal. - Hold Ctrl and click on
http://localhost:8080/, and the hosted deployment version will open.
✅ Create, delete, and edit tasks 🔄 Mark tasks as completed or incomplete 💾 Data is automatically saved using localStorage ♻️ Fully modular codebase with TypeScript and SCSS 🎯 Responsive layout for mobile and desktop
- 🛠️ HTML5 / CSS3 / JavaScript (ES6+) - Languages used for initial website architecture.
- ⚙️ TypeScript - Refactored JavaScript to adhere to industry-standard code quality via static typing.
- 🎨 SCSS - Refactored CSS with greater emphasis on modularity.
- 🧱 Webpack - For module bundling and asset management.
- 💾 localStorage API - Used to handle persistent client-side data.
- ✨ GSAP - Background animation with MorphSVG.
- 🚩 Jest - Unit testing of modular components.