Vaynermedia's Album Manager Sample

In this example below you will see how to do a Vaynermedia's Album Manager Sample with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by damontian1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright damontian1 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vaynermedia's Album Manager Sample</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper"> <!-- start of wrapper -->
  
  <section id="section-a">
    <h1>Vaynermedia Album Manager</h1>
    <small>with search, drag & drop, and add users feature</small>
  </section>

  <section id="section-b">
    <h3>Add User: </h3>
    <select id="id-list">
      <option value="1">ID 1</option>
      <option value="2">ID 2</option>
      <option value="3">ID 3</option>
      <option value="4">ID 4</option>
      <option value="5">ID 5</option>
      <option value="6">ID 6</option>
      <option value="7">ID 7</option>
      <option value="8">ID 8</option>
      <option value="9">ID 9</option>
      <option value="10">ID 10</option>
    </select>
  </section>

  <section id="section-c">
    <div class='table table__left'>
      <h2>User <span>1</span>'s Albums</h2>
      <div class="search__filter1">
        <label>Filter</label>
        <input type='text'></input>
        <button type='submit'>Submit</button>
      </div>
      <div class='table__row table__header'>
        <div class='table__cell table__cell--short'>id</div>
        <div class='table__cell'>title</div>
      </div>
      <h2 class="drag__label">+ DRAG ALBUM HERE</h2>
      <div class="table__body table__data--left">
        <div class='table__row table__colorized'>
          <div class='table__cell table__cell--short'>{{ID}}</div>
          <div class='table__cell table__cell'>{{TITLE}}</div>
        </div>
      </div>   
    </div>
  
    <div class='table table__right'>
      <h2>User <span>2</span>'s Albums</h2>
      <div class="search__filter2">
        <label>Filter</label>
        <input type='text'></input>
        <button type='submit'>Submit</button>
      </div>
      <div class='table__row table__header'>
        <div class='table__cell table__cell--short '>id</div>
        <div class='table__cell'>title</div>
      </div>
      <h2 class="drag__label">+ DRAG ALBUM HERE</h2>
      <div class="table__body table__data--right">
        <div class='table__row table__colorized'>
          <div class='table__cell table__cell--short'>{{ID}}</div>
          <div class='table__cell table__cell'>{{TITLE}}</div>
        </div>
      </div>
    </div>
  </section>

</div> <!-- end of wrapper -->
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/damontian1/vaynermediaandaposs-album-manager-sample-bLjPeB */
/*---------------------------------
            All Styles
----------------------------------*/
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  padding: 0 50px;
  background-color: #EFEFEF;
}

/*---------------------------------
          Desktop Styles
----------------------------------*/
.wrapper {
  /***********************/
  /*      section a      */
  /***********************/
  /***********************/
  /*      section b      */
  /***********************/
  /***********************/
  /*      section c      */
  /***********************/
}
.wrapper section#section-a {
  text-align: center;
}
.wrapper section#section-a h1 {
  margin-bottom: 0;
}
.wrapper section#section-b {
  display: flex;
  align-items: center;
}
.wrapper section#section-b select {
  margin: 1rem;
}
.wrapper section#section-c {
  display: flex;
  justify-content: space-between;
}
.wrapper section#section-c .table {
  width: 48%;
  border: 1px solid #333;
  background-color: white;
}
.wrapper section#section-c .table.table__left, .wrapper section#section-c .table.table__right {
  height: 100%;
}
.wrapper section#section-c .table.table__left h2, .wrapper section#section-c .table.table__right h2 {
  padding-left: 1rem;
}
.wrapper section#section-c .table.table__left .search__filter1, .wrapper section#section-c .table.table__left .search__filter2, .wrapper section#section-c .table.table__right .search__filter1, .wrapper section#section-c .table.table__right .search__filter2 {
  margin: 0.5rem 0.5rem;
}
.wrapper section#section-c .table.table__left .search__filter1 button, .wrapper section#section-c .table.table__left .search__filter2 button, .wrapper section#section-c .table.table__right .search__filter1 button, .wrapper section#section-c .table.table__right .search__filter2 button {
  border: 1px solid black;
}
.wrapper section#section-c .table.table__left .table__row, .wrapper section#section-c .table.table__right .table__row {
  display: flex;
  padding: 5px;
  border-bottom: 1px solid #333;
}
.wrapper section#section-c .table.table__left .table__row:last-child, .wrapper section#section-c .table.table__right .table__row:last-child {
  border-bottom: 0;
}
.wrapper section#section-c .table .table__header {
  background-color: #333;
  font-weight: bold;
  color: white;
}
.wrapper section#section-c .table .table__cell {
  margin-right: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.wrapper section#section-c .table .table__cell--short {
  flex-shrink: 0;
  width: 50px;
}
.wrapper section#section-c .table .drag__label {
  text-align: center;
  display: none;
}
.wrapper section#section-c .table .table__body .table__colorized:nth-child(even) {
  background: #b8daff;
}
.wrapper section#section-c .table .table__body .table__colorized:nth-child(odd) {
  background: #d6d8dba1;
}
.wrapper section#section-c .table .table__body .table__colorized:hover {
  background: #f5c6cb;
}
.wrapper section#section-c .table .table__body .table__cell:last-child {
  margin-right: 0px;
}

/*---------------------------------
          Mobile Styles
----------------------------------*/
@media (max-width: 768px) {
  .wrapper section#section-c {
    display: block;
  }
  .wrapper section#section-c .table {
    width: 100%;
    margin-bottom: 1rem;
  }
}


/*Downloaded from https://www.codeseek.co/damontian1/vaynermediaandaposs-album-manager-sample-bLjPeB */
(function () {
  
  // selector helper function
  function $(element) {
    return document.querySelector(element);
  }
  // variables
  var userId1 = 1,
      userId2 = 2,
      flag = true,
      tableLeft = $(".table__left"),
      tableRight = $(".table__right"),
      tableRowsLeft = $(".table__left .table__data--left"),
      tableRowsRight = $(".table__right .table__data--right"),
      searchFilter1 = $(".search__filter1"),
      searchFilter2 = $(".search__filter2"),
      selectionId = $("#id-list"),
      albumsArray = [];
  
  // functions
  function makeHTML(albums) {
    return albums.map((item) => {
      return `
        <div class='table__row table__colorized' draggable='true' id=${item.id}>
          <div class='table__cell table__cell--short'>${item.id}</div>
          <div class='table__cell table__cell'>${item.title}</div>
        </div>
      `;
    }).join("");
  }
  
  function renderData(dataHTML, tableSelection) {
    document.querySelector(`.table__${tableSelection}`)
      .querySelector(`.table__data--${tableSelection}`)
      .innerHTML = dataHTML;
  }

  function populateData(userId, tableSelection) {
    fetch(`https://jsonplaceholder.typicode.com/albums?userId=${userId}`)
      .then(item => item.json())
      .then((data) => {  
        albumsArray.push(...data);
        var html = makeHTML(data);
        renderData(html, tableSelection);
      });
  }

  
  // listeners
  searchFilter1.addEventListener("change", function (e) {
    var query = e.target.value;
    var albums = albumsArray.filter((item) => {
      return item.title.includes(query);
    });
    var html = makeHTML(albums);
    renderData(html, "left");
  });

  searchFilter2.addEventListener("change", function (e) {
    var query = e.target.value;
    var albums = albumsArray.filter((item) => {
      return item.title.includes(query);
    });
    var html = makeHTML(albums);
    renderData(html, "right");
  });

  // drag from left table to right
  tableRowsLeft.addEventListener("dragstart", function (e) {
    tableRight.querySelector(".drag__label").classList.add("show");
    e.dataTransfer.setData("text", e.target.id);
  });

  tableRowsLeft.addEventListener("dragend", function (e) {
    tableRight.querySelector(".drag__label").classList.remove("show");
  });

  tableRight.addEventListener("dragover", function (e) {
    e.preventDefault();
  });

  tableRight.addEventListener("drop", function (e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    this.appendChild(document.getElementById(data));
    tableRight.querySelector(".drag__label").classList.remove("show");
  });

  // drag from right table to left
  tableRowsRight.addEventListener("dragstart", function (e) {
    tableLeft.querySelector(".drag__label").classList.add("show");
    e.dataTransfer.setData("text", e.target.id);
  });
  
  tableRowsRight.addEventListener("dragend", function (e) {
    tableLeft.querySelector(".drag__label").classList.remove("show");
  });

  tableLeft.addEventListener("dragover", function (e) {
    e.preventDefault();
  });

  tableLeft.addEventListener("drop", function (e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    this.appendChild(document.getElementById(data));
    tableLeft.querySelector(".drag__label").classList.remove("show");
  });

  selectionId.addEventListener("change", function () {
    var id = this.value;
    var tableSelection = flag === true ? "left" : "right";
    var tableTitle = document.querySelector(`.table__${tableSelection}`);
    tableTitle.querySelector("span").textContent = id;
    populateData(id, tableSelection);
    flag = !flag;
  });

  // function calls
  populateData(userId1, "left");
  populateData(userId2, "right");
}());

Comments