index.html

<!DOCTYPE html>
<html>
<head>
    <title>URL.cut</title>
    <p></p>
</head>
<body>
    <h1>URLcut</h1>
    <label for="long-url">Enter a long link:</label>
    <p></p>
    <input type="text" id="long-url" placeholder="https://example.com">
    <p></p>
    <button id="shorten-button">Shorten</button>
    <br>
    <p></p>
    <label for="short-url">Short link:</label>
    <p></p>
    <input type="text" id="short-url" readonly>
    <p></p>
    <script>
        document.getElementById("shorten-button").addEventListener("click", function() {
            var longUrl = document.getElementById("long-url").value;

            // Выполнение запроса к API Bit.ly для сокращения ссылки
            fetch("https://api-ssl.bitly.com/v4/shorten", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "YOUR_API_TOKEN_BITLY"
                },
                body: JSON.stringify({
                    long_url: longUrl
                })
            })
            .then(response => response.json())
            .then(data => {
                var shortUrl = data.link;
                document.getElementById("short-url").value = shortUrl;
            })
            .catch(error => {
                console.error(error);
                document.getElementById("short-url").value = "Ошибка при сокращении ссылки.";
            });
        });
    </script>
    <p></p>
    Link shortener
</body>
</html>