index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
</head>
<body>
<h1>URL Shortener</h1>
<form id="url-form">
    <input type="text" id="long-url" placeholder="Enter your long URL here" required>
    <button type="submit">Shorten URL</button>
</form>
<div id="result"></div>

<script>
    document.getElementById('url-form').addEventListener('submit', async (e) => {
        e.preventDefault();

        const longUrl = document.getElementById('long-url').value;
        const resultDiv = document.getElementById('result');

        try {
            const response = await fetch('https://urlshortenerfunctionserverless.azurewebsites.net/api/shortenurl', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ url: longUrl })
            });

            if (response.ok) {
                const data = await response.json();
                resultDiv.innerHTML = `Shortened URL: <a href="${data.shortUrl}" target="_blank">${data.shortUrl}</a>`;
            } else {
                resultDiv.textContent = 'Error: Unable to shorten the URL. Please try again.';
            }
        } catch (error) {
            console.error(error);
            resultDiv.textContent = 'Error: Unable to shorten the URL. Please try again.';
        }
    });
</script>
</body>
</html>