Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inject SVG element into DOM #584

Closed
Tracked by #582
aatmanvaidya opened this issue Jun 14, 2024 · 5 comments
Closed
Tracked by #582

Inject SVG element into DOM #584

aatmanvaidya opened this issue Jun 14, 2024 · 5 comments
Assignees
@hardik-pratap-singh
Labels
level:feature An issue that describes a feature (initiative>feature>ticket) plugin priority:medium role:frontend

Comments

@aatmanvaidya
Copy link
Collaborator

aatmanvaidya commented Jun 14, 2024 •
edited
Loading

Attached here is a dummy webpage consisting some example slurs - crazy, stupid

Try to write vanilla js that can inject an SVG icon next to them. The SVG icon should be hover able and upon hovering, should show a popup with some content in it.

Below is the HTML code for that file

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>some text - crazy - stupid</h2>
    <a href="">some text - this is a link - crazy</a>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus badchalan ultricies quam nec mollis.
        Integer malesuada
        orci id porttitor lacinia. In badchalan eleifend lacus sed pharetra imperdiet. Interdum et malesuada fames ac
        ante ipsum
        primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam rutrum lorem molestie
        odio pretium convallis. Fusce a purus vel turpis badchalan dictum eleifend sed vitae eros. presstitutes
        Phasellus vulputate, libero nec
        presstitutes efficitur imperdiet, dolor nibh pharetra quam, ut malesuada magna ligula eget libero. Pellentesque
        eget suscipit
        tortor, in finibus badchalan lorem. Proin vel massa வக்காலவோலி finibus, tincidunt nisl id, வக்காலவோலி sagittis
        purus
    </p>
    <br>
    <p>
        presstitutes Donec quis lorem libero. Integer mi risus, eleifend sed sodales ut, tincidunt in felis. வக்காலவோலி
        Curabitur sagittis metus
        et enim iaculis, et aliquam est cursus. Vivamus molestie, risus vitae ultrices suscipit, metus urna sodales
        mauris, a sodales dolor turpis non nisi. badchalan Sed blandit tincidunt congue. Cras urna nunc, viverra eu
        vestibulum at,
        auctor at nunc. Vivamus dictum vel metus quis feugiat. Aliquam வக்காலவோலி quis lorem lobortis, dapibus augue
        faucibus,
        iaculis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada presstitutes fames ac turpis
        egestas.
        Proin commodo imperdiet libero, ac malesuada
    </p>
</body>

</html>
@aatmanvaidya aatmanvaidya mentioned this issue Jun 14, 2024
Open
5 tasks
@aatmanvaidya
Copy link
Collaborator Author

assigning this issue to @hardik-pratap-singh

@hardik-pratap-singh
Copy link
Contributor

I want to work on this issue.
Please assign this to me !

@hardik-pratap-singh
Copy link
Contributor

Checkpoints :

  1. Size of Uli icon should be constant for all of the tags
  2. Make sure to separate js files with html file

@hardik-pratap-singh
Copy link
Contributor

Week 1 : PR #593

@aatmanvaidya aatmanvaidya added plugin priority:medium role:frontend level:feature An issue that describes a feature (initiative>feature>ticket) labels Jul 2, 2024
@hardik-pratap-singh
Copy link
Contributor

Week 3 : PR #596
Till Now, we have vanilla JS for SVG injection, but hover feature is pending

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hardik-pratap-singh hardik-pratap-singh

Labels
level:feature An issue that describes a feature (initiative>feature>ticket) plugin priority:medium role:frontend
Projects
2024 Q2 - Q3 Planner
Status: Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@aatmanvaidya @hardik-pratap-singh