get cdn link using api

ajayvishu August 30, 2020
get cdn link using api
in this article, i will show you, get cdn link using api

 <html>
<head>
    <title>get cdn link api</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
</head>
<body style="overflow: hidden;">
    <div class="bg-dark p-4 text-white text-center">get cdn link using api</div>
    <div class="row" style="margin-top: 25px;">
        <div class="col-lg-8 mx-auto">
            <div class="bg-white rounded">
                <div class="input-group mb-4">
                    <input type="search" id="userinput" placeholder="enter cdn input" class="form-control">
                    <div class="input-group-append">
                        <button id="btncall" type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
            <div class="bg-white p-5 rounded shadow">
                <div class="input-group mb-4">
                    <textarea id="cdnresult" class="form-control" readonly></textarea>
                    <div class="input-group-append">
                        <button id="btncopy" data-clipboard-action="copy" data-clipboard-target="#cdnresult" class="btn btn-success" disabled='disabled'><i class="fa fa-copy"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var textinput = "", textresult = "", url = "";
    function cdnfun() {
        textinput = $("#userinput").val();
        url = 'https://api.cdnjs.com/libraries?search=' + textinput;
        $.getJSON(url,
            function (data) {
                textresult = (JSON.stringify(data.results[0].latest, null, 2));
                $("#cdnresult").val("<script src =" + textresult + "><"+"/"+"script>");
            }
        );
    }
    $("#btncall").click(function () {
        if (!$("#userinput").val() == "") {
            cdnfun();
            $('#btncopy').prop('disabled', false);
            $('#cdnresult').attr('readonly', false);
        }
        else {
            alert("please input");
        }
    });
    var clipboard = new ClipboardJS('#btncopy');
    $('#btncopy').tooltip({
        trigger: 'click',
        placement: 'bottom'
    });
    function setTooltip(message) {
        $('#btncopy').tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
    }
    function hideTooltip() {
        setTimeout(function() {
            $('#btncopy').tooltip('hide');
        }, 1000);
    }
    clipboard.on('success', function(e) {
        setTooltip('Copied!');
        hideTooltip();
    });
</script>
</html>
Tags:

Post a Comment

0 Comments

if you have any doubts , please let me know