My Mindera Project is a streamlined, responsive web productivity application engineered to enhance daily workflow management. It provides intuitive task tracking, persistence across user sessions, custom visual themes, and contextual motivation via real-time API integration.
Built using native Vanilla JavaScript (ES6+), HTML5, and modern CSS3.
- Task Lifecycle Management: Streamlined workflow to create, complete, and remove tasks with interactive status indicators.
- Input Validation: Form validation layer that prevents empty submissions with visual focus highlights.
- Persistent Data Storage: Full state persistence utilizing browser
localStorageto preserve user data across browser restarts. - Bulk Operations: One-click state reset to clear active task lists and clear cached storage.
- Dynamic Visual Themes: Custom CSS property architecture enabling instant toggle between Light and Dark visual themes.
- Contextual Greetings: Dynamic UI module that customizes greeting headers based on the user's local system time.
- Asynchronous Data Integration: Asynchronous fetch pipeline connected to external REST endpoints to deliver real-time quotes.
- Keyboard Navigation: Native event mapping supporting standard
Enterkey execution for accessibility.
| Technology | Implementation Details |
|---|---|
| HTML5 | Semantic structure, accessible element grouping, and input attribute handling. |
| CSS3 | CSS Custom Properties (Variables), Flexbox layout patterns, state-driven styling, and transition physics. |
| JavaScript (ES6+) | Asynchronous async/await fetch logic, DOM event delegation, dynamic node mutation, and localStorage JSON serialization. |
-
Download or Clone the Project Save the project files to your computer.
-
Navigate to Directory Open the folder containing your project files in your terminal or code editor.
-
Launch Application Open
index.htmldirectly in any web browser, or launch using a local development server (such as VS Code's Live Server extension).
├── index.html # Application markup and semantic DOM structure
├── style.css # Design system, themes, and layout rules
└── script.js # Core application state, event handlers, and API logic
<img width="1078" height="713" alt="image" src="https://github.com/user-attachments/assets/af410822-f886-4415-8f78-3efc384d8038" />