🚀 Progress Counter

Progress Counter is an interactive, animated web application built to visually track the 10-day training progression of an Artificial Intelligence model.

Created during an exciting challenge in the Web Development Course at iSchool, this project highlights how complex timeline transitions, state changes, and celestial day/night cycles can be built entirely using pure HTML, CSS, and Vanilla JavaScript—without heavy external frameworks.

📢 Challenge Spotlight

"🚀 I just completed an exciting challenge during a session of the Web Development course at iSchool! 🎉"

"🎯 The task was to create a 10-day progress tracker for an AI model using only HTML, CSS, and JavaScript. I aimed for a unique and innovative approach. 💻"

"✅ This experience truly deepened my skills in animating with CSS keyframes. ✨"

"🧪 It enriched my understanding of animations, timelines, and interactive design in the browser. 📈"

— Adel Noufal • Check it out on LinkedIn 🔗

• 🌓 Dynamic Celestial Sky Box: 360° orbital rotation system with realistic sun & moon movement that smoothly transitions the entire application between Day and Night modes as you advance.
• 🎨 10 Handcrafted SVG Character Animations: Each day features a distinct vector character performing a custom CSS keyframe animation reflecting that phase of AI development.
• ⚡ Pure Vanilla Architecture: 100% framework-free HTML5, CSS3, and ES6+ JavaScript for 60 FPS performance and zero bundle bloat.
• 🎉 Celebratory Confetti Explosion: Integrates Canvas Confetti API to deliver a celebratory reward animation when the AI model reaches 100% completion (Day 10).
• 📱 Modern Glassmorphism Design System: Built with CSS custom variables, smooth easing functions, responsive card layouts, and sleek typography.

┌─────────────────────────────────────────────────────────┐
│                    PROGRESS COUNTER                     │
├─────────────────┬───────────────────┬───────────────────┤
│    Frontend     │    Animations     │   State Engine    │
├─────────────────┼───────────────────┼───────────────────┤
│ • HTML5         │ • CSS Keyframes   │ • ES6 JavaScript  │
│ • CSS3 Variables│ • Orbital Math    │ • DOM API         │
│ • Google Fonts  │ • SVG Vector Props│ • Confetti API    │
└─────────────────┴───────────────────┴───────────────────┘

Each SVG character state leverages precise transform-origin positioning and smooth @keyframes curves. For example, the Day 10 celebration animation uses dual arm rotation keyframes with alternating direction loops:

.person.day10 .arm-left {
  animation: celebrate 0.7s infinite alternate ease-in-out;
  transform-origin: 40px 90px;
}
.person.day10 .arm-right {
  animation: celebrate 0.7s infinite alternate-reverse ease-in-out;
  transform-origin: 80px 90px;
}
@keyframes celebrate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-55deg); }
}

Rather than abrupt background changes, the celestial engine calculates sun and moon positions along a circular orbit path via JavaScript requestAnimationFrame:

function setOrbitPositions(sunDeg, moonDeg) {
  sunOrbit.style.transform = `rotate(${sunDeg}deg)`;
  moonOrbit.style.transform = `rotate(${moonDeg}deg)`;
  
  const isNight = (sunDeg % 360) >= 180;
  sky.classList.toggle("night", isNight);
  document.body.classList.toggle("night-mode", isNight);
}

Progress-Counter/
├── .github/
│   └── ISSUE_TEMPLATE/
│       ├── bug_report.md       # Standardized bug reporting format
│       └── feature_request.md  # Template for suggesting features
├── .gitignore                  # Clean git ignore configuration
├── CONTRIBUTING.md             # Community contribution guidelines
├── LICENSE                     # MIT License
├── README.md                   # Project documentation & overview
├── Style.css                   # Modular stylesheet, themes & keyframes
├── index.html                  # Semantic markup & SVG character states
└── script.js                   # Orbital physics, DOM controller & state engine

No build tools or installation dependencies required! Simply open the project in any web browser.

1. Clone this repository:

   git clone https://github.com/adel-noufal/Progress-Counter.git

2. Open index.html in your favorite web browser.

If using VS Code, launch using the Live Server Extension or run:

npx serve .

• CSS Timeline Control: Gained deep hands-on mastery over @keyframes, transform-origin, bezier easing curves, and CSS variables.
• SVG Animation Dynamics: Learned how to manipulate individual SVG child nodes (<rect>, <ellipse>, <path>) dynamically via CSS classes.
• Interactive UI Architecture: Implemented smooth state transitions, audio-visual feedback loops, and dynamic day/night theme synchronizations.

Distributed under the MIT License. See LICENSE for more details.