LeetMetric 📊

A responsive LeetCode Metrics Dashboard built using HTML, CSS, and JavaScript. This project provides a clean interface to visualize LeetCode problem-solving statistics with animated progress circles and summary cards.

Note: This version uses sample (mock) data to demonstrate the frontend UI and JavaScript functionality. Live LeetCode API integration can be added in a future update.

---

🚀 Features

• 🔍 Username search interface
• 📈 Circular progress indicators for Easy, Medium, and Hard problems
• 📋 Statistics cards for submission details
• 🎨 Responsive and modern UI
• ⚡ Dynamic DOM manipulation using JavaScript
• 🔄 CSS custom properties and Conic Gradient based progress circles

---

🛠️ Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)

---

📸 Preview

(Add a screenshot of your project here)

---

📂 Project Structure

LeetMetric/
│── index.html
│── style.css
│── script.js
└── README.md

---

💡 What I Learned

• DOM Manipulation
• Event Listeners
• Fetch API
• Async/Await
• Template Literals
• CSS Flexbox
• CSS Variables
• Conic Gradient
• Dynamic UI Rendering

---

🔮 Future Improvements

• Connect with live LeetCode API
• Build a backend using Node.js & Express
• Add user profile information
• Improve animations and responsiveness
• Dark/Light mode

---

👨‍💻 Author

Yash Verma

GitHub: https://github.com/Yash897542

Live Demo

🌐 https://yash897542.github.io/Leetcode_Metrics/