From 9cb9cfaceca5bf154375e03d4875921a2e1f0031 Mon Sep 17 00:00:00 2001 From: MishtiGarg250 Date: Thu, 9 Oct 2025 18:21:21 +0530 Subject: [PATCH] added progress-bar project in beginner section --- Projects/1-Beginner/Progress-Bar.md | 36 +++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 Projects/1-Beginner/Progress-Bar.md diff --git a/Projects/1-Beginner/Progress-Bar.md b/Projects/1-Beginner/Progress-Bar.md new file mode 100644 index 00000000..7c07c7a6 --- /dev/null +++ b/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/)