{"id":27972671,"url":"https://github.com/code-mike-code/handling-dom-elements","last_synced_at":"2025-05-07T23:13:30.062Z","repository":{"id":291928568,"uuid":"979236394","full_name":"code-mike-code/handling-dom-elements","owner":"code-mike-code","description":"DOM Manipulation - Tooltip \u0026 Table of Contents Generator. It demonstrates the practical use of JavaScript to dynamically manipulate the DOM without modifying the original HTML or CSS files.","archived":false,"fork":false,"pushed_at":"2025-05-07T08:28:13.000Z","size":400,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T23:13:26.379Z","etag":null,"topics":["dataset","dom-manipulation","dynamic-manipulation","javascript"],"latest_commit_sha":null,"homepage":"https://code-mike-code.github.io/handling-dom-elements/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-mike-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-07T07:50:44.000Z","updated_at":"2025-05-07T08:28:33.000Z","dependencies_parsed_at":"2025-05-07T09:36:16.203Z","dependency_job_id":null,"html_url":"https://github.com/code-mike-code/handling-dom-elements","commit_stats":null,"previous_names":["code-mike-code/handling-dom-elements"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fhandling-dom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fhandling-dom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fhandling-dom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fhandling-dom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-mike-code","download_url":"https://codeload.github.com/code-mike-code/handling-dom-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252968121,"owners_count":21833252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dataset","dom-manipulation","dynamic-manipulation","javascript"],"created_at":"2025-05-07T23:13:29.426Z","updated_at":"2025-05-07T23:13:30.056Z","avatar_url":"https://github.com/code-mike-code.png","language":"HTML","readme":"\n\n## DOM Manipulation - Tooltip \u0026 Table of Contents Generator\n\nSee the live version of this project ([deployed](https://code-mike-code.github.io/handling-dom-elements/)).\n\nThis project was created during my learning journey with the mentor program at devmentor.pl. It demonstrates the practical use of JavaScript to dynamically manipulate the DOM without modifying the original HTML or CSS files.\n\n## Key Functionalities\n\nEnhances elements with the .tooltip class by dynamically generating a proper tooltip structure using dataset attributes. It supports two types of tooltips:\n\nText-based tooltips – display a simple text box.\n\nImage-based tooltips – display an image inside the tooltip box.\n\nAll elements are created dynamically using JavaScript, preserving the original content while enriching the interaction experience.\n\nExample transformation:\n```\n\u003cspan class=\"tooltip\"\n      data-url=\"https://example.com\"\n      data-tooltip-type=\"text\"\n      data-tooltip-content=\"Extra info here\"\u003e\n  tooltip text\n\u003c/span\u003e\n```\n\nBecomes:\n```\n\u003cspan class=\"tooltip\"\u003e\n  \u003ca href=\"https://example.com\"\u003etooltip text\u003c/a\u003e\n  \u003cspan class=\"tooltip__box tooltip__box--text\"\u003eExtra info here\u003c/span\u003e\n\u003c/span\u003e\n```\n\n## Table of Contents Generator\n\nGenerates a structured table of contents (\u003cul\u003e) based on a dynamic JavaScript array of objects, which includes parent-child relationships between topics.\n\nTop-level items are detected by parentId: null.\n\nNested items are inserted under their respective parent elements.\n\nThe system builds a nested list structure which is appended to the .article__list element in the DOM.\n\nHandles changing input data without needing to manually update the HTML.\n\n\n\u0026nbsp;\n \n## 💡 Technologies\n\u003cimg src=\"https://skillicons.dev/icons?i=html,css,javascript\" /\u003e\u003cbr/\u003e\n\n\n\u0026nbsp;\n \n## 💿 Installation\nNo installation required. Just open the index.html file in your browser, and make sure the scripts inside /assets/js/introduction.js and /assets/js/list.js are correctly loaded.\n\n\n\u0026nbsp;\n\n## 💭 Conclusions from project\n\n      • Dynamic DOM handling – Proper use of querySelectorAll, dataset, and event delegation is crucial for manipulating existing elements.\n      • Flexible structure generation – Building nested trees from flat data arrays teaches the fundamentals of tree traversal and recursion.\n      • Component-based thinking – Keeping functionality modular (e.g., separating tooltip logic from list generation) improves scalability.\n      • Data-driven UI – The UI responds purely to data, not hardcoded markup.\n\nThis project highlights strong fundamentals in DOM manipulation, dataset handling, and dynamic HTML structure generation — essential skills for any aspiring frontend developer.\n\n\u0026nbsp;\n\n## 🙋‍♂️ Feel free to Reach Out!\nIf you have questions, ideas, or just want to chat about code (or the meaning of life), don’t hesitate to contact me. Open an issue, drop me a pull request, or send a message—carrier pigeon works too, but GitHub might be faster. Let’s build something awesome together! 🚀\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-mike-code%2Fhandling-dom-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-mike-code%2Fhandling-dom-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-mike-code%2Fhandling-dom-elements/lists"}