From 8d0f65f7753158811d95f2559b6db35bbeb6cb12 Mon Sep 17 00:00:00 2001 From: TheCoderX2 Date: Fri, 8 Nov 2024 15:58:22 -0500 Subject: [PATCH] Added cool libraries for a more user friendly interface --- Projects/1-Beginner/Calendar-App.md | 63 ++++++++++++++++++++--------- 1 file changed, 43 insertions(+), 20 deletions(-) diff --git a/Projects/1-Beginner/Calendar-App.md b/Projects/1-Beginner/Calendar-App.md index f75e6f70f..504a145db 100644 --- a/Projects/1-Beginner/Calendar-App.md +++ b/Projects/1-Beginner/Calendar-App.md @@ -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! 🎉