title: Bubble Sort algorithm visualizer app made in Svelte is giving me some weird output
body: <p>I'm trying to do a Bubble Sort algorithm visualizer. However the output is strange,
  <a href="https://i.stack.imgur.com/jUhLW.png" rel="nofollow noreferrer">This is the image of the output</a>. You can try the app here: <a href="https://svelte.dev/repl/hello-world?version=3.38.3" rel="nofollow noreferrer">https://svelte.dev/repl/hello-world?version=3.38.3</a> by pasting the following code: (I know that a lot of code isn't mine but I made this for practicing Svelte)</p>
  <pre><code>&lt;script&gt;
  import { flip } from 'svelte/animate'
  
  const ARRAY_LENGTH = 54
  var arr = Array.from(Array(ARRAY_LENGTH)).map(x=&gt;Math.random() * 200 + 1)
  
  function BubbleSort() {
      for(var i = 0; i &lt; arr.length; i++){
          for(var j = 0; j &lt; ( arr.length - i -1 ); j++){
              if(arr[j] &gt; arr[j+1]){
                  var temp = arr[j]
                  arr[j] = arr[j + 1]
                  arr[j+1] = temp
              }
          }
      }
  }
  &lt;/script&gt;
  
  &lt;div&gt;
  {#each arr as item (item)}
      &lt;div style=&quot;
                          background-color: green;
                          width: 10px;
                          height: {item}px;
                          margin: 0 1px;
                          display: inline-block;
                          &quot;
                          animate:flip={{duration:500}}
      /&gt;
  {/each}
  &lt;/div&gt;
  
  &lt;button on:click={BubbleSort}&gt;
     Next
  &lt;/button&gt;
  </code></pre>