popcodeorg / popcodeorg/popcode
Visually connect tags, selectors, and elements on the page
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 191
- Forks
- 143
- Avg merge
- 4d 11h
- Merged PRs (30d)
- 5
Description
In order to aid students’ understanding of the relationship between different bits of the code, it would be very cool to visually connect selectors to tags, and vice versa. E.g., if I place the cursor within a selector in the CSS code, we could subtly highlight (maybe with an outline) the tag(s) in the HTML that correspond to it. Similar thing with jQuery selectors (this is more of a bonus feature though).
As a corollary, placing the cursor in a tag should (subtly!) highlight the element on the page corresponding to that tag; placing the cursor in a CSS selector should highlight all elements on the page matching that selector.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no files, tests, or entry points. Start by locating the HTML/CSS editor and the page preview integration, then trace how cursor selections and DOM elements are represented. Done means selectors and tags visibly highlight their corresponding preview elements in both directions, with jQuery selectors treated as an optional extension.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript, jquery
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100