Skip to main content
Code Review

Return to Question

edited tags
Link
Sᴀᴍ Onᴇᴌᴀ ♦
Sᴀᴍ Onᴇᴌᴀ ♦
  • 29.6k
  • 16
  • 46
  • 203
make title describe what code does instead of goals - refer to help center section "Titling your question" on https://codereview.stackexchange.com/help/how-to-ask; add line after last fence so the fence doesn't appear within code; update formatting
Source Link
Sᴀᴍ Onᴇᴌᴀ ♦
Sᴀᴍ Onᴇᴌᴀ ♦
  • 29.6k
  • 16
  • 46
  • 203

adding characters on mouseover using Svelte best practices

This is my first time using svelte. I am also using tailwind and astro butthatbut that is irrelevant. The following component prepends ">> ">> to my text when it is being hovered upon and takes the ">> ">> out when it is not. 

Is this the typical way to use svelte, am? Am I doing something wrong—becausewrong? I feel I am?.

<script>
    let spanId = "selected";
    let isMouseOver = false;

    function handleMouseOver() {
        if(!isMouseOver) {
            this.innerHTML = `<span id="${spanId}">&gt;&gt; </span>` + this.innerHTML;
            isMouseOver = true;
        }
    }

    function handleMouseOut() {
        let selectedSpan = document.getElementById(spanId);
        selectedSpan.parentNode.removeChild(selectedSpan);
        isMouseOver = false;
    }
</script>

<p
    class="hover:text-green-600 cursor-pointer whitespace-nowrap"
    on:mouseover={handleMouseOver}
    on:mouseout={handleMouseOut}
>
    <slot />
</p>
```

Svelte best practices

This is my first time using svelte. I am also using tailwind and astro butthat is irrelevant. The following component prepends ">> " to my text when it is being hovered upon and takes the ">> " out when it is not. Is this the typical way to use svelte, am I doing something wrong—because I feel I am?

<script>
    let spanId = "selected";
    let isMouseOver = false;

    function handleMouseOver() {
        if(!isMouseOver) {
            this.innerHTML = `<span id="${spanId}">&gt;&gt; </span>` + this.innerHTML;
            isMouseOver = true;
        }
    }

    function handleMouseOut() {
        let selectedSpan = document.getElementById(spanId);
        selectedSpan.parentNode.removeChild(selectedSpan);
        isMouseOver = false;
    }
</script>

<p
    class="hover:text-green-600 cursor-pointer whitespace-nowrap"
    on:mouseover={handleMouseOver}
    on:mouseout={handleMouseOut}
>
    <slot />
</p>
```

adding characters on mouseover using Svelte

This is my first time using svelte. I am also using tailwind and astro but that is irrelevant. The following component prepends >> to my text when it is being hovered upon and takes the >> out when it is not. 

Is this the typical way to use svelte? Am I doing something wrong? I feel I am.

<script>
    let spanId = "selected";
    let isMouseOver = false;

    function handleMouseOver() {
        if(!isMouseOver) {
            this.innerHTML = `<span id="${spanId}">&gt;&gt; </span>` + this.innerHTML;
            isMouseOver = true;
        }
    }

    function handleMouseOut() {
        let selectedSpan = document.getElementById(spanId);
        selectedSpan.parentNode.removeChild(selectedSpan);
        isMouseOver = false;
    }
</script>

<p
    class="hover:text-green-600 cursor-pointer whitespace-nowrap"
    on:mouseover={handleMouseOver}
    on:mouseout={handleMouseOut}
>
    <slot />
</p>
Source Link
Anm
Anm
  • 141
  • 4

Svelte best practices

This is my first time using svelte. I am also using tailwind and astro butthat is irrelevant. The following component prepends ">> " to my text when it is being hovered upon and takes the ">> " out when it is not. Is this the typical way to use svelte, am I doing something wrong—because I feel I am?

<script>
    let spanId = "selected";
    let isMouseOver = false;

    function handleMouseOver() {
        if(!isMouseOver) {
            this.innerHTML = `<span id="${spanId}">&gt;&gt; </span>` + this.innerHTML;
            isMouseOver = true;
        }
    }

    function handleMouseOut() {
        let selectedSpan = document.getElementById(spanId);
        selectedSpan.parentNode.removeChild(selectedSpan);
        isMouseOver = false;
    }
</script>

<p
    class="hover:text-green-600 cursor-pointer whitespace-nowrap"
    on:mouseover={handleMouseOver}
    on:mouseout={handleMouseOut}
>
    <slot />
</p>
```