Built a LeetCode Stats Tracker using HTML, CSS & JavaScript! I recently worked on a mini project where I created a LeetMetric Dashboard that allows users to: 🔍 Enter a LeetCode username 📊 Fetch problem-solving stats (Easy / Medium / Hard) 🎯 Display results in a clean circular progress UI 💡 What I learned during this project: Handling API requests (fetch) in JavaScript Dealing with real-world issues like CORS errors & unstable APIs Debugging common mistakes (DOM selection, string handling, etc.) Improving UI using CSS flexbox & conic-gradient ⚠️ Biggest challenge: Public APIs were not reliable, so I had to switch approaches and understand how real APIs and browser restrictions work. ✨ This project helped me move from just writing code → to actually debugging like a developer 🛠️ Tech Stack: HTML | CSS | JavaScript 📌 Next step: Planning to add animations, better UI, and more detailed stats! #JavaScript #WebDevelopment #Frontend #Coding #LearningByDoing #100DaysOfCode
More Relevant Posts
-
Just shipped something I'm genuinely proud of, I call it AlgoTracker I've always struggled to truly understand Big O Notation just by reading about it. So I built a visual tool to help me see it in action. What it does: Linear Search O(N) and Binary Search O(log N) Selection Sort and Insertion Sort O(N²) A time complexity graph that runs each algorithm, measures how long it takes, and compares them visually based on input size A step-by-step visualizer so you can watch exactly how data gets sorted or searched The time complexity graph is my favourite feature, you can literally see which algorithm is faster as you increase the data size. Built it using Recharts for the graph visuals. This project started as a learning tool for myself, but I think it could help any developer who learns better by seeing rather than just reading. Live demo: https://lnkd.in/djuGe-tJ GitHub: https://lnkd.in/dmrribMi Built with React · Tailwind CSS v4 · Recharts · Node.js #webdeveloper #javascript #react #buildinpublic #opensource
To view or add a comment, sign in
-
JavaScript 𝗮𝗿𝗿𝗮𝘆𝘀 come with powerful built-in methods, but I used to just 𝗺𝗲𝗺𝗼𝗿𝗶𝘇𝗲 them. Things changed when I understood one simple idea Each method solves a specific kind of problem. For example, 𝗳𝗼𝗿𝗘𝗮𝗰𝗵() lets you run a function on every element: const numbers = [1, 2, 3, 4]; numbers.𝗳𝗼𝗿𝗘𝗮𝗰𝗵(num => console.log(num * 2)); // Output: 2 4 6 8 Instead of reading more, I built a small project 🎯 𝗔𝗿𝗿𝗮𝘆 𝗠𝗲𝘁𝗵𝗼𝗱𝘀 𝗘𝘅𝗽𝗹𝗼𝗿𝗲𝗿 Click a number Try different methods See what actually happens 🌐 Live Demo: https://lnkd.in/gNyt8cqT 💻 Code: https://lnkd.in/gUV5R5rs 💡 What it covers: • 𝗽𝘂𝘀𝗵() / 𝗽𝗼𝗽() → add/remove (end) • 𝘀𝗵𝗶𝗳𝘁() / 𝘂𝗻𝘀𝗵𝗶𝗳𝘁() → add/remove (start) • 𝗺𝗮𝗽() → transform • 𝗳𝗶𝗹𝘁𝗲𝗿() → select • 𝗿𝗲𝗱𝘂𝗰𝗲() → combine • 𝗳𝗼𝗿𝗘𝗮𝗰𝗵() → iterate ✨ Biggest takeaway: Stop memorizing methods. Start thinking: “𝗪𝗵𝗮𝘁 𝗱𝗼 𝗜 𝘄𝗮𝗻𝘁 𝘁𝗼 𝗱𝗼 𝘄𝗶𝘁𝗵 𝗺𝘆 𝗱𝗮𝘁𝗮?” A big thank you to Sheryians Coding School, Harsh Vandana Sharma, Ankur Prajapati, Sarthak Sharma for the guidance and inspiration 🙌 Built using HTML, CSS & JavaScript 🚀 #JavaScript #WebDevelopment #LearnByBuilding #Frontend #ArraysInJs #Arrays #JavaScriptMastery #LearnByAction
To view or add a comment, sign in
-
🚀 Understanding Factory Functions in JavaScript Ever felt confused using constructors and the new keyword? 🤔 That’s where Factory Functions make life easier! 👉 A Factory Function is simply a function that creates and returns objects. 💡 Why use Factory Functions? ✔️ No need for new keyword ✔️ Easy to understand (perfect for beginners) ✔️ Avoids this confusion ✔️ Helps in writing clean and reusable code ✔️ Supports data hiding using closures 🧠 Example: function createUser(name, age) { return { name, age, greet() { console.log("Hello " + name); } }; } const user = createUser("Sushant", 21); user.greet(); ⚠️ One downside: Methods are not shared (can use more memory) 🎯 Conclusion: Factory Functions are a great way to start writing clean and maintainable JavaScript code without complexity. #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearnToCode #100DaysOfCode
To view or add a comment, sign in
-
-
Built an open-source EPUB reader in just one night. Most tools are clunky and outdated. But with Claude Code, I created something sleek and functional in hours. What's inside: → Real-time feedback for authors → JavaScript, Bootstrap, and epub.js under the hood → An in-browser readability analysis tool #EPUBReader #AIIntegration #OpenSource https://lnkd.in/g8G7KAzd
To view or add a comment, sign in
-
𝗠𝗮𝘀𝘁𝗲𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗠𝗲𝗺𝗼𝗿𝘆: 𝗚𝗮𝗿𝗯𝗮𝗴𝗲 𝗖𝗼𝗹𝗹𝗲𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱! ♻️ Ever wondered how JavaScript keeps your apps running smoothly without eating up all your RAM? The secret is Garbage Collection (GC)! 🚀 Here is a quick breakdown of how it works: Memory Allocation: When you create objects, strings, or functions, JS automatically reserves a spot in the Memory Heap. 💾 The Reachability Concept: The engine looks for "reachable" values—those that are still accessible from the "roots" (like the global window object or active function calls). 🔗 𝗠𝗮𝗿𝗸-𝗮𝗻𝗱-𝗦𝘄𝗲𝗲𝗽 𝗔𝗹𝗴𝗼𝗿𝗶𝘁𝗵𝗺: 1. Mark: The GC "marks" all reachable objects as Alive. ✅ 2. Sweep: It "sweeps" away anything not marked, freeing up that memory for new data. 🧹 𝗣𝗿𝗼-𝗧𝗶𝗽: Avoid memory leaks! If you're done with a large object, set it to null to ensure the GC knows it's ready to be cleared. 💡 Understanding these low-level concepts helps you write more efficient, high-performance code! 💻✨ #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #ProgrammingConcepts #MemoryManagement
To view or add a comment, sign in
-
-
6 days ago I made a post on: 📌 "Something i figured in JavaScript today that A.I code misinterprets." I am about to share that now, pay close attention. As a developer using JavaScript, this is in connecting with the scopes of JavaScript. The Scope of JavaScript refers to the visibility of variable and functions within a program of codes. Which are: 1. Global scope: this variable is visible anywhere in the javascript program. 2. Function scope: this is a variable created when a function is declared and it's variable and functions are only visible withing that function. A sample of it is: Function funName(){ var fs = "..." alert (fs); console.log(fs); } funName(); Now looking at this, A.I codes misinterprets the function scopes and genrate codes that carries just global scopes or even most times Interchange function scopes with global scopes when giving a variable function. 📌 The risk of this common error in our program will not appear at the beginning of the project but during debugging and code maintenance. Wonder why JavaScript bugs gives you sleepless nights? This is one of the main reasons. This is a call for developers and vibe coders to learn the intimate differences between GLOBAL SCOPE VARIABLES and FUNCION SCOPE VARIABLES. You A.I JavaScript code can cause you harm later if you do not learn this earlier. 📌 A.I. frequently misunderstands Hoisting and the Temporal Dead Zone (TDZ) when creating nested functions. It often defaults to legacy var logic within closure loops (because the bulk of the training data still uses it) rather than modern let/const for block scoping. It optimizes for visual syntax, not runtime safety. Automation without technical intuition creates technical debt. Want more daily strategy from the cutting edge of web infrastructure? connect with snow works #WorksTechnology #JavaScriptMastery #CodingArchitecture #AIPerformance #TechnicalIntuition #WebArchitecture #SoftwareDesign #WebDevStrategy
To view or add a comment, sign in
-
-
I built a real User Management System from scratch Most developers start with tutorials… I decided to turn knowledge into a real working project. I just built a fully functional User Management Dashboard using vanilla JavaScript. 🔹 What it does: ✔ Fetches real user data from an API ✔ Lets you add new users dynamically ✔ Search users in real time ✔ Delete users instantly ✔ Stores data using Local Storage 🔹 Tech Stack: HTML • CSS • JavaScript • API Integration What I learned from this project is not just coding… but how real systems handle data, interaction, and user experience. 💡 Still improving, still building… one project at a time. 🔗 GitHub: https://lnkd.in/dJZjgYsp I’d appreciate any feedback or suggestions 🙌 #WebDevelopment #Frontend #JavaScript #CodingJourney #BuildInPublic
To view or add a comment, sign in
-
-
I noticed I was writing the same useEffect fetch logic in five different places. It made my components messy and hard to read. Today, I’m documenting how to build my own tools: Custom React Hooks. Instead of cramming 50 lines of logic into a visual component, I’m learning to extract that logic into its own function. Here is how I’m thinking about it: 1) Logic vs. UI: A component’s main job is rendering the interface. By moving the heavy lifting (like API fetching or form handling) into a custom hook, the UI code stays clean and readable. 2) The "use" Rule: These are just JavaScript functions, but they must start with the word "use" (like useFetch or useAuth). This tells React to follow the official rules of hooks. 3) Building a Toolbox: I practiced with a useWindowSize hook. It tracks the screen width and height using useState and useEffect, then returns those values so I can use them anywhere with just one line of code. Why professionals love this: It makes code reusable across different projects and much easier to test. I am still learning the ropes, but modular thinking is making my projects feel way more advanced. Tomorrow, I’m looking at the "bank of logic": Mastering useReducer! Question for you: What is the one piece of logic you find yourself copy-pasting the most? Is it a fetch call, a form handler, or something else? #CodeWithWajid #ReactJS #WebDevelopment #30DaysOfCode #LearningToCode #BuildingInPublic #CustomHooks #CleanCode
To view or add a comment, sign in
-
🚀 Just finished building my JavaScript Complete Theory Notes / Cheat Sheet 📘⚡ Over the past few days, I compiled a structured roadmap of JavaScript concepts covering everything from fundamentals to advanced topics. Here’s what I included 👇 🔹 Variables & Data Types 🔹 Operators, Type Coercion & Control Flow 🔹 Functions, Scope, Closures & Hoisting 🔹 this keyword and prototypes 🔹 Arrays, Objects, Maps & Sets 🔹 ES6+ features like Destructuring, Spread, Rest, Modules 🔹 Async JavaScript (Callbacks, Promises, Async/Await, Event Loop) 🔹 DOM Manipulation & Event Handling 🔹 Web APIs, Storage, and Modern JS Patterns What started as simple revision notes slowly turned into a complete developer reference guide. The best part? While writing this, I didn’t just memorize syntax, I started understanding how JavaScript actually thinks behind the scenes: ⚡ Call Stack ⚡ Heap Memory ⚡ Event Loop ⚡ Microtasks vs Macrotasks Learning never stops. Next step: applying these concepts in real-world projects and interview-focused problem solving 💻🔥 #JavaScript #WebDevelopment #FrontendDeveloper #ReactJS #FullStackDeveloper #CodingJourney #SoftwareDevelopment #LearningInPublic #TechJourney
To view or add a comment, sign in
-
Life evolves and so do the universe, evolution doesn’t stops in the trajectory of frontend where we as developers generalise new enhancements. A precisely intriguing feature of JavaScript arrived recently Temporal API which is explained below: 🚀 ✨JavaScript’s Temporal API finally deposes the flawed Date object, introducing a robust, immutable engine for time-series data. It eliminates "off-by-one" month errors and complex millisecond math with dedicated types like PlainDate and ZonedDateTime. Developers can now handle Daylight Saving Time transitions and IANA time zones natively without bulky external libraries. Its built-in comparison methods and duration arithmetic bring long-awaited precision to complex scheduling logic. This shift signifies a leap toward human-readable code that respects the nuances of global calendars. Say goodbye to Moment.js—the future of JavaScript time is type-safe, scalable, and standardized. The Magic in Action: The Magic in Action: ✨ // Adding 1 month to Jan 31st no longer "overflows" into March! 🏗️ const jan31 = Temporal.PlainDate.from('2026-01-31'); 🧪 const nextMonth = jan31.add({ months: 1 }); 📟 console.log(nextMonth.toString()); 💡 // Result: "2026-02-28" (Smart & Precise) #JavaScript #WebDev #Coding #TemporalAPI #SoftwareEngineering
To view or add a comment, sign in
Explore related topics
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development