💻 Coder-Style Counter Program

An elegant, developer-themed counter web application built with pure vanilla JavaScript, semantic HTML5, and advanced modern CSS3. Styled with an Ayu-Dark IDE/terminal aesthetic, this project demonstrates clean separation of concerns, solid mental models for JavaScript memory references, and zero-dependency DOM manipulation.

---

📸 Project Showcase

---

✨ Features & Design Highlights

• Terminal / IDE Aesthetics (100% CSS):
  • Custom macOS-style traffic light window controls created purely via CSS gradients.
  • Tab title header (counter.js) and live terminal prompt (> ready_) with a blinking cursor animation.
  • Code syntax presentation using JetBrains Mono & IBM Plex Mono fonts:
    • Heading rendered as a comment: // Welcome to the counter game
    • Counter value styled as a live variable declaration: let count = 0;
    • Interactive buttons styled as CLI commands (> Increase, > Reset, > Decrease).
• Clean Architecture & Decoupled State:
  • State in Memory: JavaScript memory (let count = 0) is the single source of truth.
  • DOM as Output Projection: The DOM is updated unidirectionally via .textContent property mutation.
  • Reference Immutability: Uses const pointers for fixed DOM element references.
• Micro-Interactions:
  • Color-coded action buttons with subtle lift transitions on hover and active click compression.
  • Full support for prefers-reduced-motion accessibility.

---

📊 Engineering Mentorship & Performance Metrics

This project was built following a rigorous 10-phase engineering mentorship curriculum.

Summary Scorecard

Metric Category	Score	Result
Phases Completed	10 / 10	100% Curriculum Completion
Average Metric Score	5.0 / 5.0	Flawless Execution across all competencies
Misconceptions Resolved	6 / 6	Fully mastered core browser & JS fundamentals

Key Competencies Evaluated

Competency	Score	Description
Requirements Precision	5.0 / 5.0	Clean translation of functional requirements into deterministic execution logic.
Scope Discipline	5.0 / 5.0	Zero architectural inflation; strictly adhering to vanilla web constraints.
Architectural Separation	5.0 / 5.0	Complete decoupling of in-memory application state from view layer presentation.
Technical Vocabulary	5.0 / 5.0	Precise distinction between primitives vs. objects and pointer references vs. mutations.
Variable Scope & Keywords	5.0 / 5.0	Accurate usage of const for DOM nodes and let for reassigned state values.
Event Model Understanding	5.0 / 5.0	Comprehensive mastery of the single-threaded event loop and event listeners.
Pseudocode Logic Fidelity	5.0 / 5.0	Implementation-agnostic behavioral pseudocode seamlessly mapped to code.
Debugging & Verification	5.0 / 5.0	Exhaustive edge case validation, test matrices, and deterministic state testing.

---

🧠 Architecture & Mental Model

Unidirectional Data Flow

[User Click Event] ──► [Event Listener Callback] ──► [Mutate State: count++] ──► [Project to DOM: countDisplay.textContent = count]

DOM Reference vs. State Mutation

[JS Memory Heap]
  ├── countDisplay (const reference address) ──► Points to <h1> DOM Node Object in Browser Memory
  └── count (let primitive number)           ──► Holds current state integer (e.g., 0, 1, -1)

1. Page Load: The browser parses HTML, constructs the DOM tree, paints initial HTML elements, and attaches event listeners.
2. User Interaction: Clicking a button triggers an event listener callback.
3. State Transition: The primitive variable count is updated in JavaScript memory.
4. View Synchronization: countDisplay.textContent is assigned the updated count value, prompting the browser to re-render the text.

---

📁 Project Structure

P---Counter-Program/
├── assets/
│   ├── counter-app-ui.png        # UI screenshot of the application
│   └── performance-metrics.png   # Performance evaluation chart
├── index.html                    # Semantic HTML5 markup
├── style.css                     # Ayu-Dark terminal styling & animations
├── index.js                      # Core counter logic & event handlers
├── LEARNING_LOG.md               # Detailed engineering mentorship log
└── README.md                     # Project documentation

---

🚀 Getting Started

Prerequisites

No package managers or external build tools required! Works directly in any modern web browser.

Running the Project

1. Clone or download this repository:

   git clone https://github.com/Muazislam/Minor-Project-JS----Counter-Program.git

2. Navigate to the project directory:

   cd Minor-Project-JS----Counter-Program

3. Open index.html in your favorite browser:

   # On Linux:
   xdg-open index.html
   
   # On macOS:
   open index.html
   
   # Or serve using VS Code Live Server / any local HTTP server

---

🛠️ Built With

• HTML5 — Semantic, clean markup structure.
• CSS3 — Custom properties, CSS Grid / Flexbox, pseudo-elements (::before, ::after), keyframe animations.
• Vanilla JavaScript (ES6+) — Event handling, DOM manipulation, arrow functions, template literals.

---

👤 Author

• Muaz Islam Babar — GitHub Profile
• Project Log: LEARNING_LOG.md