docs/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Copee Example</title>
    <!-- Bootstrap is not required...it just looks pretty -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
</head>
<body>
    <a href="https://github.com/styfle/copee"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

    <div class="container">
        <div class="jumbotron">

            <h1>Copee Example</h1>
            <p>Copy text from browser to clipboard...natively!</p>
            <div class="row">
                <div class="col-md-6">
<pre><code>btn1.addEventListener('click', function (e) {
    var success = toClipboard('Magic happens here');
    showAlert(success);
});</code></pre>
                </div>
                <div class="col-md-6">
                    <p>Example 1: Copy hard-coded text</p>
                    <p><button id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Copy To Clipboard</button></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
<pre><code>btn2.addEventListener('click', function (e) {
    var success = fromElement(input);
    showAlert(success);
});
</code></pre>
                </div>
                <div class="col-md-6">
                    <p>Example 2: Copy from <code>input</code> element</p>

                    <div class="input-group">
                        <input id="input2" type="text" class="form-control" placeholder="Copy Text" value="https://github.com/styfle/copee">
                        <span class="input-group-btn">
                            <button id="btn2" class="btn btn-default" type="button">Copy!</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-success" role="alert" style="display:none;">Check your clipboard :)</div>
        <div class="alert alert-danger" role="alert" style="display:none;">Something went wrong :(</div>
    </div>
    <footer style="text-align:center;">
        Developed by <a href="https://styfle.dev">styfle</a>. Read the <a href="https://styfle.dev/blog/es6-modules-today-with-typescript">ES6 Modules Today</a> blog post.
    </footer>
    <script nomodule src="https://cdn.jsdelivr.net/npm/copee/dist/copee.umd.js"></script>
    <script nomodule src="./iife.js"></script>
    <script type="module" src="./mod.mjs"></script>
</body>
</html>