JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div><span id="code-sample-foo" class="command prompt-win  command-text">django-admin startproject mysite
</span></div>

<button class="clipboardjs-btn" data-code-sample-id="foo" data-clipboard-target="#code-sample-foo">Copy</button>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

CSS

::selection {
  background-color: cyan;
}

JavaScript

$( document ).ready(function() {
    // https://clipboardjs.com/

    var clippboard_buttons_class = ".clipboardjs-btn";
    var clipboard = new ClipboardJS(clippboard_buttons_class);

    function remove_background_color($code_sample){
        $code_sample.removeClass("background-color-light-green");
    }

    function blink_background_color($code_sample){
        // By blinking signal to user that the code is copied.
        // Namely add a class, then remove it.
        $code_sample.addClass("background-color-light-green");
        setTimeout(function(){remove_background_color($code_sample)}, 200);
        $code_sample.blur();
    }

    function handle_click($button){
        var code_sample_id = $button.attr("data-code-sample-id");
        var $code_sample = $("#code-sample-" + code_sample_id);
        blink_background_color($code_sample);
    }

    function handle_clipboard_buttons(){
        var $buttons = $(clippboard_buttons_class);
        $buttons.click(function(){
            handle_click($(this));
        });
    }

    handle_clipboard_buttons();

});