JSFiddle - React, Tailwind, and code Playground

by David Dikman

HTML

<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            function setOutput(html) {
                $('#code-output').text(html)
                $('#rendered-ouput').html(html)
            }

            function renderOutput(packageName, githubName) {
                const html = `
<a href="https://github.com/${githubName}" target="_blank"><img src="https://img.shields.io/github/stars/${githubName}.svg"></a><br>
<a href="https://pub.dev/packages/${packageName}/score" target="_blank"><img src="https://badges.bar/${packageName}/likes"></a><br>
<a href="https://pub.dev/packages/${packageName}/score" target="_blank"><img src="https://badges.bar/${packageName}/popularity"></a><br>
<a href="https://pub.dev/packages/${packageName}/score" target="_blank"><img src="https://badges.bar/${packageName}/pub%20points"></a>
`;
                setOutput(html)
            }

            function renderError(error) {
                setOutput(error.toString())
            }

            function run() {
                const packageName = $('#pubdev')[0].value;
                const url = `https://pub.dev/api/packages/${packageName}`
                const proxyUrl = "https://api.allorigins.win/get?url=" + encodeURIComponent(url) 
                $.ajax({
                    url: proxyUrl,
                    method: "GET",
                    success: function(response) {
                        const data = JSON.parse(response.contents);
                        if (data.error) {
                            renderError(data.error.message)
                            return
                        }
                        
                        const github = data.latest.pubspec.homepage
                        const githubName = github.replace('https://github.com/', '').replace(/\/$/, '')
                        renderOutput(packageName, githubName)
                  ...