search

tattle-made / Uli

Software and Resources for Mitigating Online Gender Based Violence in India
https://uli.tattle.co.in
GNU General Public License v3.0
40 stars 30 forks source link

Inject SVG element into DOM #584

Closed aatmanvaidya closed 2 months ago

aatmanvaidya commented 3 months ago

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 commented 3 months ago

assigning this issue to @hardik-pratap-singh

hardik-pratap-singh commented 3 months ago

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

hardik-pratap-singh commented 3 months ago

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 commented 3 months ago

Week 1 : PR #593

hardik-pratap-singh commented 3 months ago

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