The Great Wall of Gitmoji

great-wall-of-gitmoji.markdown

The Great Wall of Gitmoji

Just using https://api.github.com/emojis to mess around with CSS grid.

A Pen by Mark Hillard on CodePen.

License.

index.html

<div class="😀"></div>

script.js

$.getJSON('https://api.github.com/emojis', function(emoji) {
     $.each(emoji, function(key, value) {
          $('.😀').append('<img src="' + value + '" title="' + key + '">');
     });
});

$(document).on('click', '.😀 img', function () {
    var code = $(this).attr('title');
    prompt('Copy to clipboard: Ctrl+C, Enter', ':' + code + ':');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.😀 {
display:grid;
grid-column-gap:1rem;
grid-row-gap:1rem;
grid-template-columns:repeat(auto-fit, minmax(30px, 1fr));
padding:1rem;
}

.😀 img {
cursor:pointer;
height:auto;
max-width:100%;
width:100%;
}