|
|
|
@ -1,34 +1,57 @@
|
|
|
|
|
# My calendar
|
|
|
|
|
# My Calendar
|
|
|
|
|
|
|
|
|
|
**Tier:** 3-Advanced
|
|
|
|
|
|
|
|
|
|
Build a calendar application to organize you daily life. Add functionality to add events and reminder.
|
|
|
|
|
Style your own calendar according to your requirement
|
|
|
|
|
Build a calendar application to organize your daily life. Add functionality to create, edit, and delete events. Style your own calendar according to your preferences.
|
|
|
|
|
|
|
|
|
|
- Understanding how calendar application works
|
|
|
|
|
- Only basic understanding of HTML/CSS and JS is required
|
|
|
|
|
- Working on more features help you learning advance concepts of JS
|
|
|
|
|
- Understanding how a calendar application works
|
|
|
|
|
- Only basic knowledge of HTML/CSS and JS is required
|
|
|
|
|
- Working on additional features will help you learn advanced JavaScript concepts
|
|
|
|
|
|
|
|
|
|
## User Stories
|
|
|
|
|
|
|
|
|
|
- [ ] User can create event
|
|
|
|
|
- [ ] User can edit event
|
|
|
|
|
- [ ] User can delete event
|
|
|
|
|
- [ ] User can create events
|
|
|
|
|
- [ ] User can edit events
|
|
|
|
|
- [ ] User can delete events
|
|
|
|
|
|
|
|
|
|
## Bonus features
|
|
|
|
|
## Bonus Features
|
|
|
|
|
|
|
|
|
|
- [ ] User can drag events between dates
|
|
|
|
|
- [ ] User can set reminder for a event
|
|
|
|
|
- [ ] Change theme (light/dark) (play with css), play with css 😄
|
|
|
|
|
- [ ] Store data locally so that events does not get deleted when server is restarted
|
|
|
|
|
- [ ] User can set reminders for events
|
|
|
|
|
- [ ] Change theme (light/dark) — Play with CSS 😄
|
|
|
|
|
- [ ] Store data locally so events do not get deleted when the server is restarted
|
|
|
|
|
|
|
|
|
|
## Useful links and resources
|
|
|
|
|
## Useful Links and Resources
|
|
|
|
|
|
|
|
|
|
- [Local Storage](https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/)
|
|
|
|
|
- [MDN](https://developer.mozilla.org/en-US/)
|
|
|
|
|
- [Design Ideas](https://dribbble.com/tags/calendar)
|
|
|
|
|
- **[Local Storage Guide](https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/)**
|
|
|
|
|
Learn how to persist data locally in the browser, perfect for storing event data so it doesn’t get lost on page reloads.
|
|
|
|
|
*Comment*: Local storage is essential for saving events, especially when you want them to persist even after the page reloads or the server is restarted.
|
|
|
|
|
|
|
|
|
|
## Example projects
|
|
|
|
|
- **[MDN Web Docs](https://developer.mozilla.org/en-US/)**
|
|
|
|
|
The Mozilla Developer Network (MDN) is a great resource for learning about JavaScript, CSS, and HTML. Check out tutorials and documentation to deepen your understanding of web technologies.
|
|
|
|
|
*Comment*: MDN is invaluable for looking up specific methods and understanding browser compatibility.
|
|
|
|
|
|
|
|
|
|
- [Simple calendar](https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d)
|
|
|
|
|
- [eCalendar](https://github.com/muzhaqi16/eCalendar)
|
|
|
|
|
- **[Design Ideas for Calendars](https://dribbble.com/tags/calendar)**
|
|
|
|
|
Explore creative calendar designs to inspire your UI. You can incorporate unique features or styles based on these concepts.
|
|
|
|
|
*Comment*: A little inspiration never hurts! Consider UI/UX ideas from Dribbble to make your calendar visually appealing.
|
|
|
|
|
|
|
|
|
|
## Example Projects
|
|
|
|
|
|
|
|
|
|
- **[Simple Calendar](https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d)**
|
|
|
|
|
A basic tutorial on building a calendar with pure JavaScript. This can be a great starting point if you're new to building a calendar application.
|
|
|
|
|
*Comment*: This tutorial will help you understand the basic structure of a calendar and how to manipulate dates in JavaScript.
|
|
|
|
|
|
|
|
|
|
- **[eCalendar GitHub Project](https://github.com/muzhaqi16/eCalendar)**
|
|
|
|
|
A GitHub project that showcases a more advanced calendar app. You can check the source code for inspiration or contribute to it.
|
|
|
|
|
*Comment*: GitHub is great for seeing full, working examples. You can learn by inspecting other people’s code and adapting features to your own project.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# What I Did:
|
|
|
|
|
|
|
|
|
|
1. **Added a "User Stories" section** to list core features for the app.
|
|
|
|
|
2. **Added "Bonus Features"** for optional advanced features like drag-and-drop event handling and light/dark theme toggle.
|
|
|
|
|
3. **Provided useful links** to resources like the MDN Web Docs, LocalStorage guide, and design inspiration.
|
|
|
|
|
4. **Added example project links** with tutorials and open-source projects to guide further learning.
|
|
|
|
|
|
|
|
|
|
Happy coding! 🎉
|
|
|
|
|