kunal-kushwaha · jaykumar52v · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026
diff --git a/SYLLABUS.md → DSA_learning_tracker.html b/SYLLABUS.md → DSA_learning_tracker.html
@@ -1,3 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<meta charset="UTF-8">
+<title>DSA Roadmap Tracker</title>
+
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+<style>
+
+:root{
+--bg:#0b0b0c;
+--card:rgba(255,255,255,.05);
+--text:#f5f5f7;
+--accent:#2997ff;
+--done:#30d158;
+}
+
+body{
+margin:0;
+padding:40px;
+background:var(--bg);
+color:var(--text);
+font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
+}
+
+.container{
+max-width:1000px;
+margin:auto;
+}
+
+.card{
+background:var(--card);
+border-radius:16px;
+padding:30px;
+border:1px solid rgba(255,255,255,.08);
+backdrop-filter:blur(20px);
+}
+
+h1{
+text-align:center;
+margin-bottom:25px;
+}
+
+.search{
+width:100%;
+padding:14px;
+border-radius:12px;
+border:1px solid rgba(255,255,255,.15);
+background:rgba(255,255,255,.08);
+color:white;
+margin-bottom:25px;
+}
+
+/* markdown styling */
+
+#content ul{
+padding-left:20px;
+}
+
+#content li{
+margin:6px 0;
+}
+
+#content a{
+color:#6cb6ff;
+text-decoration:none;
+}
+
+#content a:hover{
+text-decoration:underline;
+}
+
+/* checkbox */
+
+input[type=checkbox]{
+margin-right:8px;
+transform:scale(1.2);
+cursor:pointer;
+}
+
+/* collapsible */
+
+ul ul{
+margin-left:15px;
+border-left:1px solid rgba(255,255,255,.1);
+padding-left:15px;
+}
+
+/* progress circle */
+
+.progressWrapper{
+position:fixed;
+right:40px;
+top:120px;
+}
+
+.progressCircle{
+width:140px;
+height:140px;
+border-radius:50%;
+display:flex;
+align-items:center;
+justify-content:center;
+background:conic-gradient(#30d158 0deg,#2c2c2e 0deg);
+position:relative;
+}
+
+.progressCircle::before{
+content:"";
+position:absolute;
+width:100px;
+height:100px;
+background:#0b0b0c;
+border-radius:50%;
+}
+
+.progressText{
+position:absolute;
+font-size:22px;
+font-weight:600;
+}
+
+.next{
+background:rgba(41,151,255,.2);
+padding:2px 6px;
+border-radius:6px;
+}
+
+</style>
+</head>
+
+<body>
+
+<div class="progressWrapper">
+<div class="progressCircle" id="circle">
+<div class="progressText" id="percent">0%</div>
+</div>
+</div>
+
+<div class="container">
+
+<h1>DSA Roadmap Tracker</h1>
+
+<div class="card">
+
+<input class="search" id="search" placeholder="Search topics...">
+
+<div id="content"></div>
+
+</div>
+</div>
+
+
+
+<script id="markdown-source" type="text/markdown">
+
 - [Complete Git & GitHub Course](https://youtu.be/apGV9Kg7ics)
 - [Introduction to Programming](https://youtu.be/wn49bJOYAZM)
     - [Types of languages](https://youtu.be/wn49bJOYAZM?t=171)
@@ -203,3 +361,156 @@
 - NP-Completeness
 - Multithreading
 - Square Root Decomposition
+
+
+</script>
+
+
+<script>
+
+/* render markdown */
+
+const md=document.getElementById("markdown-source").textContent
+document.getElementById("content").innerHTML=marked.parse(md)
+
+/* adds checkboxes automatically */
+
+document.querySelectorAll("#content li").forEach(li=>{
+
+let checkbox=document.createElement("input")
+checkbox.type="checkbox"
+
+li.prepend(checkbox)
+
+})
+
+/* ---------- LOAD SAVED STATE ---------- */
+
+function loadProgress(){
+
+let boxes = document.querySelectorAll("#content input[type=checkbox]");
+let saved = JSON.parse(localStorage.getItem("dsa-progress")) || {};
+
+boxes.forEach((box,i)=>{
+if(saved[i]){
+box.checked = true;
+}
+});
+
+}
+
+/* ---------- SAVE STATE ---------- */
+
+function saveProgress(){
+
+let boxes = document.querySelectorAll("#content input[type=checkbox]");
+let data = {};
+
+boxes.forEach((box,i)=>{
+data[i] = box.checked;
+});
+
+localStorage.setItem("dsa-progress", JSON.stringify(data));
+
+}
+
+/* ---------- UPDATE PROGRESS ---------- */
+
+const circle = document.getElementById("circle");
+const percentText = document.getElementById("percent");
+
+function updateProgress(){
+
+let boxes = document.querySelectorAll("#content input[type=checkbox]");
+
+let total = boxes.length;
+let done = 0;
+
+boxes.forEach(b=>{
+if(b.checked) done++;
+});
+
+let percent = total ? (done/total)*100 : 0;
+let deg = percent*3.6;
+
+circle.style.background =
+`conic-gradient(#30d158 ${deg}deg,#2c2c2e ${deg}deg)`;
+
+percentText.innerText = Math.round(percent)+"%";
+
+}
+
+/* ---------- EVENT LISTENER ---------- */
+
+document.addEventListener("change",function(e){
+
+if(e.target.type==="checkbox"){
+
+saveProgress();
+updateProgress();
+
+}
+
+});
+
+/* ---------- INITIAL LOAD ---------- */
+
+window.addEventListener("DOMContentLoaded",function(){
+
+loadProgress();
+updateProgress();
+
+});
+
+function highlightNext(){
+
+document.querySelectorAll("#content li").forEach(li=>{
+li.classList.remove("next")
+})
+
+let boxes=document.querySelectorAll("input[type=checkbox]")
+
+for(let b of boxes){
+
+if(!b.checked){
+b.parentElement.classList.add("next")
+break
+}
+
+}
+
+}
+
+/* listeners */
+
+document.addEventListener("change",e=>{
+
+if(e.target.type==="checkbox"){
+updateProgress()
+highlightNext()
+}
+
+})
+
+/* search */
+
+document.getElementById("search").addEventListener("input",function(){
+
+let term=this.value.toLowerCase()
+
+document.querySelectorAll("#content li").forEach(li=>{
+
+li.style.display=
+li.innerText.toLowerCase().includes(term)?"":"none"
+
+})
+
+})
+
+updateProgress()
+highlightNext()
+
+</script>
+
+</body>
+</html>