Medium SortableJS - Final

A Fiddle to demonstrate my SortableJS example on Medium. Has all styling and functionality.

by Sahil Kashyap

HTML

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<html>
  <section class="favorites-section" style="background-image: url('https://i.pinimg.com/originals/39/31/c0/3931c0be9c75b433257e9e69cb482864.jpg')">
    <div class="container favorites-container">
      <h2 id="favorites-header">Favorites for User</h2>
      <div class="row">
        <div class="container">
          <form method="post" id="favorites-form">
            <input type="hidden" id="current_favorites" name="current_favorites" value="" />

            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Favorites</th>
                  <th>
                    Other Teams
                    <select id="sport-selector">
                      <option value="NFL" selected>NFL</option>
                      <option value="NBA">NBA</option>
                      <option value="NHL">NHL</option>
                      <option value="MLB">MLB</option>
                    </select>
                  </th>
                </tr>
              </thead>
              <tbody>
                <td>
                  <div class="list-group" id="favoriteList">
                    <li class="list-group-item team-item NFL-team" id="NFL-8">
                      <img src="https://a.espncdn.com/i/teamlogos/nfl/500/det.png"> Detroit Lions
                    </li>
                    <li class="list-group-item team-item NBA-team" id="NBA-13">
                      <img src="https://a.espncdn.com/i/teamlogos/nba/500/lal.png"> Los Angeles Lakers
                    </li>
                  </div>
                  
                  <button type="submit" class="btn btn-lg btn-block btn-primary">Save</button>
                </td>
                <td>
                  <div class="list-group" id="otherList">
                    <li class="list-group-item team-item NFL-team" id="NFL-22">
                     ...

CSS

.favorites-section {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-top: 5vh;
  padding-bottom: 5vh;
}
.team-item img {
  height: 5vh;
  margin: 0 8px;
  background-position: center;
  background-size: cover;
}
.team-item:hover {
  cursor: pointer;
}
#favoriteList {
  height: 60vh;
}
#otherList {
  height: 60vh;
}
#favorites-form td {
  width: 50%;
}
#favorites-form {
  width: 100%;
}
table.table-bordered{
  border: 1px solid black;
}
table.table-bordered > thead > tr > th{
  border: 1px solid black;
}
table.table-bordered > thead {
  border-bottom: 2px solid black;
}
table.table-bordered > tbody > tr > td{
  border: 1px solid black;
}
#favorites-header {
  margin-top: 3vh;
  color: black;
}
.list-group {
  -webkit-column-count: 2;  /* Chrome/Opera, Safari */
  -moz-column-count: 2; /* Mozilla Firefox */
  column-count: 2;
}
.list-group li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.favorites-container {
  border-radius: 5px;
  background-color: rgba(255,255,255,0.9);
}
.team-item {
  border: 1px black;
}

JavaScript

let favoriteList = document.getElementById('favoriteList');
let otherList = document.getElementById('otherList');

let favorite_list = Sortable.create(favoriteList, {
  animation: 150,
  group: 'shared',
  ghostClass: 'sortable-ghost',
});

let other_list = Sortable.create(otherList, {
  animation: 150,
  group: 'shared',
  ghostClass: 'sortable-ghost',
  sort: false
});

let sportSelector = document.getElementById('sport-selector');

sportSelector.addEventListener('change', function (e) {
  new_sport = document.getElementById("sport-selector").value;
  let otherList = document.getElementById('otherList');
  var teamItems = otherList.getElementsByClassName('team-item');
  let newSportClass = new_sport + "-team";
  for (var i = 0; i < teamItems.length; i++){
    var this_list = teamItems[i];
    this_list.style.display = 'none';
  }
  console.log(newSportClass)
  var newSportTeamItems = otherList.getElementsByClassName(newSportClass);
  for (var i = 0; i < newSportTeamItems.length; i++){
    var this_list = newSportTeamItems[i];
    this_list.style.display = 'block';
  }
});

let favoritesForm = document.getElementById("favorites-form");

favoritesForm.addEventListener('submit', function (e) {
  let favorite_ids = document.querySelectorAll('#favoriteList li[id]');
  let favorite_ids_list = [];
  for (let i = 0; i < favorite_ids.length; i++) {
    favorite_ids_list.push(favorite_ids[i].id);
  }
  let favorites_input = document.getElementById("current_favorites");
  favorites_input.value = favorite_ids_list.join(",");
});