Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added cool libraries for a more user friendly interface #919

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 43 additions & 20 deletions Projects/1-Beginner/Calendar-App.md
Original file line number Diff line number Diff line change
@@ -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! 🎉