Button Cloud Example

Button Cloud Example.markdown

Button Cloud Example ('-' * 20)

A Pen by James on CodePen.

License.

index.html

<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>
<button class='location'>Some destination</button>

<h1>Your destinations:</h1>
<ul id="list">
</ul>

script.js

$('.location').each(function(index) {
  $(this).on("click", function(){
    $(this).prop('disabled', 'disabled');
    $(this).slideUp();
    var destination = $(this).html();
    appendLocation(destination);
  });
});

function appendLocation(destinationString) {
	var li = document.createElement('li');
	li.innerHTML = destinationString;
  $('#list').append($(li));
}

style.css

$asset-slate: #2C3E4F;
$asset-sky: #3E98D3;
$asset-dusk: #965DA5;
$asset-mistyforest: #2CB89A;
$asset-wenge: #231F20;

body {
  font-size: 62.5%;
}
button {
  font-size: 1rem;
  border-radius: 5px;
  background-color: $asset-sky;
  color: $asset-slate;
  border: 0px;
  padding: .5rem;
  margin: .15rem;
}
.location {
  font-weight: bolder;
}
.location:nth-child(even) {
  background-color: $asset-sky;
  color: $asset-slate;
}
.location:nth-child(odd) {
  background-color: $asset-mistyforest;
  color: $asset-wenge;
}
h1 {
  color: $asset-dusk;
}
#list {
  color: $asset-wenge;
  font-size: 2rem;
  li {
    font-weight: bold;
    margin-top: .25rem;
    margin-bottom: .25rem;
  }
}