- 📖 Table of Contents
- 📍 Overview
- 📦 Features
- 📂 Repository Structure
- ⚙️ Modules
- 🚀 Getting Started
- 🛣 Project Roadmap
- 🤝 Contributing
- 📄 License
The Daily Planner App offered in this repository is a user-friendly application designed to help users effectively plan and manage their daily tasks. It features a date-picker, task time-blocks, and the capability to store and retrieve set tasks. The app intelligently styles tasks based upon their time status (past, present, or future), ensuring users can easily distinguish between them. It also provides the options to clear tasks either by selected date or across all dates, promoting user control over data.
| Feature | Description | |
|---|---|---|
| ⚙️ | Architecture | Primarily uses front-end technologies (HTML, CSS, JavaScript) with a minimal layout. Data is stored locally using local storage. |
| 🔗 | Dependencies | Relies on vanilla JavaScript, JQuery for calendar UI and DOM manipulation, Bootstrap for styling, and Day.js for date operations. |
| 🧩 | Modularity | The system isn't modular, as it mainly uses one JavaScript file. However, CSS is separated into different files for clarity. |
| 🧪 | Testing | No testing framework or tools in use. Testing was conducted manually. |
| ⚡️ | Performance | The application should be fast and efficient given its simplicity and reliance on local storage for data management. |
| 🔐 | Security | No explicit security measures. Data vulnerabilities may exist due to usage of local storage without any protection. |
| 🔀 | Version Control | Git/GitHub used for version control. |
| 🔌 | Integrations | Integrations include Bootstrap for responsive design, Day.JS for date management, and JQuery for interactivity. |
| 📶 | Scalability | Scaling potential is limited due to lack of back-end and the front-end code doesn't have modularity or scalability considerations. |
└── daily-planner-app/
├── css/
│ ├── jquery-ui.css
│ └── style.css
├── images/
├── index.html
└── scripts/
└── script.js
Root
| File | Summary |
|---|---|
| index.html | The code establishes the Work Day Scheduler, a simple daily planner app. It includes Google Fonts, JQuery, Bootstrap, and Day.js library to aid functionality and styling. It features a day-picker, instructions, a container for time-block tasks, and options to clear tasks by all storage or selected date. There are links to style sheets for additional CSS and JQuery UI styling. The file structure includes directories for storing CSS, images and scripts. |
| jquery-ui.css | The code defines a variety of user interface (UI) styles using CSS for a daily planner application. It includes styles for functional elements like icons, interaction cues, input fields, buttons, and UI states like hover, active, focus. It specifically styles jQuery-UI components like date-picker and provides customized icon sprites. It defines UI styles for layout helpers, overlays, error states, primary and secondary actions which control responsiveness of UI. The code also handles visual aspects like border-radius and box-shadow. |
| style.css | The code defines the CSS for the daily planner app, including color variables, font styles, layout specifications, and button designs. It handles various interactivity states (focus, hover) and conditions (past, present, future), ensuring a consistent, attractive appearance across different elements of the app. The design is responsive, with specific media queries for screen widths less than 768px. |
| script.js | The JavaScript code for the daily planner application. It initializes a jQuery UI calendar, generates time blocks for hourly tasks within business hours (9AM-5PM), and saves or fetches these tasks from local storage. The selected date's tasks are dynamically updated and styled based on their time status (past, present, or future). Click events handle task saving, clear tasks for the selected date, and clear all tasks, with associated confirmation messages. |
- Clone the daily-planner-app repository:
git clone https://github.com/pmAdriaan/daily-planner-app- Change to the project directory:
cd daily-planner-app- Install the dependencies:
► N/A► Open index.html with Live Server plugin in VS Code
ℹ️ Comming Soon
Contributions are welcome! Here are several ways you can contribute:
- Submit Pull Requests: Review open PRs, and submit your own PRs.
- Join the Discussions: Share your insights, provide feedback, or ask questions.
- Report Issues: Submit bugs found or log feature requests for PMADRIAAN.
Click to expand
- Fork the Repository: Start by forking the project repository to your GitHub account.
- Clone Locally: Clone the forked repository to your local machine using a Git client.
git clone <your-forked-repo-url>
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear and concise message describing your updates.
git commit -m 'Implemented new feature x.' - Push to GitHub: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Once your PR is reviewed and approved, it will be merged into the main branch.
Copyright © 2023 Mihai Pirvu.
This project is licensed under the ℹ️ MIT-License. See the MIT License file for additional info.