added progress-bar project in beginner section

Projects/1-Beginner/Progress-Bar.md

@@ -0,0 +1,36 @@
+# My Progress Bar
+
+**Tier:** 1-Beginner
+
+Build a simple progress bar to visualize the completion status of a task or process. The progress bar should update dynamically as the user interacts with it.
+
+- Learn how to manipulate DOM elements using JavaScript
+- Understand CSS transitions and dynamic styling
+- Great beginner project to practice event handling and UI updates
+
+## User Stories
+
+- [ ] User can see a horizontal progress bar on the screen
+- [ ] User can click a button to increase progress (e.g., +10%)
+- [ ] User can click a button to decrease progress (e.g., -10%)
+- [ ] Progress bar should not exceed 100% or go below 0%
+- [ ] Display the current percentage value above or inside the progress bar
+
+## Bonus features
+
+- [ ] Smooth animation for progress changes (use CSS transitions)
+- [ ] Different color for completed (100%) progress bar (e.g., green when full)
+- [ ] Add a reset button to restart progress from 0%
+- [ ] Add a loading simulation (progress automatically increases every second until 100%)
+- [ ] Change theme (light/dark mode) using a toggle button
+
+## Useful links and resources
+
+- [MDN - Manipulating the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
+- [CSS Transitions Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+- [JavaScript Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventListener)
+
+## Example projects
+
+- [Progress Bar Animation (CodePen)](https://codepen.io/designcouch/pen/Atyop)
+- [Animated Progress Bar (FreeCodeCamp)](https://www.freecodecamp.org/news/how-to-build-an-animated-progress-bar-with-html-css-and-javascript/)