Device List

List of devices

by Tgwizman

HTML

<div id="my_devices" class="devices"></div>
<div id="devices" class="devices"></div>

CSS

.devices {
  margin: 40px auto;
  padding: 10px 20px;
  width: 552px;
  min-height: 100px;
  border: 1px solid #0003;
  border-radius: 10px;
}

.devices .device {
  margin: 5px 7px;
  padding: 5px 10px 5px 80px;
  display: inline-block;
  width: 80px;
  height: 50px;
  font: 14px Arial, Sans-serif;
  background: #CCC;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 5px 15px #000A;
}

.devices .deviceName {
  margin: auto 0px;
  padding: 5px 50px 5px 10px;
  display: inline-block;
  width: 70px;
  color: #FFF;
  background: #0006;
  border: 5px solid #0003;
  border-radius: 5px;
}

.devices .device:hover {
  animation-name: wobble;
  animation-duration: 1s;
}

@keyframes wobble {
  0% {
    transform: rotateY(0deg);
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateY(30deg);
    transform: rotateZ(3deg);
  }
  75% {
    transform: rotateY(-30deg);
    transform: rotateZ(-3deg);
  }
  100% {
    transform: rotateY(0deg);
    transform: rotateZ(0deg);
  }
}

JavaScript

var div_my_devices = document.getElementById('my_devices'),
	div_devices = document.getElementById('devices'),

  devices = [
    {name: 'Computer', image: ['color', 'monitor']},
    {name: 'Playstation 4', image: ['ios', 'play-station']},
    {name: 'Playstation 3', image: ['color', 'playstation-3-console']},
    {name: 'Playstation', image: ['color', 'play-station']},
    {name: 'Xbox 360', image: ['color', 'xbox']},
    {name: 'Xbox One', image: ['color', 'xbox']},
    {name: 'Nintendo Switch', image: ['color', 'nintendo-switch']},
    {name: 'Nintendo Wii U', image: ['color', 'nintendo-wii-u']},
    {name: 'Nintendo Wii', image: ['color', 'wii']},
    {name: 'Nintendo Gamecube', image: ['color', 'nintendo-gamecube']},
    {name: 'Nintendo 64', image: ['color', 'nintendo-64']},
    {name: 'Nintendo DS', image: ['color', 'nintendo-ds']},
    {name: 'Gameboy Advanced', image: ['color', 'visual-game-boy']},
    {name: 'Phone / Tablet', image: ['color', 'smartphone-tablet']}
  ];

function fillDevices() {
	var html = '<h3>Devices</h3>';
  for (var i = 0; i < devices.length; i++) {
  	html += '<div class="device" id="' + devices[i].name.split(' ').join('_') + '" style="background-image: url(https://img.icons8.com/' + devices[i].image[0] + '/72/000000/' + devices[i].image[1] + '.png); background-position: 3px -4px; background-repeat: no-repeat" draggable="true" ondragstart="drag(event)"><div class="deviceName">' + devices[i].name + '</div></div>';
  }
  div_devices.innerHTML = html;
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

(function() {
  div_my_devices.addEventListener('drop', drop, false);
	div_my_devices.addEventListener('dragover', allowDrop, false);
	div_devices.addEventListener('drop', drop, false);...