To do list - José Alberto xyz

Redes sociales

HTML JS Y CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<h1>  10 personas más ricas del mundo </h1>

<p>Drag an drop the items into teri corresponding spots</p>

<ul class="draggable-list" id="draggable_list"></ul>

<button class="check-btn" id="check">
  Check Order

<i class="fas fa-paper-plane"></i>

</button>

<script>
    const draggable_list = document.getElementById("draggable_list");

const check = document.getElementById("check");

const richestPeople = ['Jeff Bezos','Carlos Slim','Elias Ayub'];

const listItems = [];

let dragStartIndex;
    createList();

function createList(){
      
      [...richestPeople]
        .map(a =>({value:a, sort: Math.random() }))
        .sort((a, b) => a.sort - b.sort)
         .map(a => a.value)
        .forEach((person, index) => {
      
        const listItem = document.createElement('li');
        listItem.setAttribute('data-index', index);
        console.log(person);
        listItem.innerHTML = `
          <span class="number">${index + 1}</span> 
          <div class="draggable" draggable="true">
            <p class="person-name">${person}</p>
            <i class="fas fa-grip-lines"></i>
          </div>
        `;
        listItems.push(listItem);
        draggable_list.appendChild(listItem);
      });
    }
  
  
  </script>

RESULTADO