URL Shortener

URL Shortener

Create Short URL

Long URL: Shortner: tinyurl.com

<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 600px;
    margin: auto;
  }

  h2 {
    color: #1d4ed8;
    font-size: 28px;
    margin-bottom: 10px;
  }

  label {
    display: block;
    margin-top: 20px;
    font-weight: bold;
  }

  input[type="text"], select {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    box-sizing: border-box;
  }

  button {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 12px 20px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 6px;
  }

  button:hover {
    background-color: #1d4ed8;
  }

  #result {
    margin-top: 20px;
    font-weight: bold;
    color: green;
  }
</style>

<h2>URL Shortener</h2>
<p>Create Short URL</p>

<label for="longUrl">Long URL:</label>
<input type="text" id="longUrl" placeholder="https://example.com">

<label for="shortener">Shortner:</label>
<select id="shortener">
  <option value="cleanuri">cleanuri.com</option>
  <option value="tinyurl">tinyurl.com</option>
  <option value="ulvis">ulvis.net</option>
  <option value="shrtco">shrtco.de</option>
  <option value="gotiny">gotiny.cc</option>
  <option value="1pt">1pt.co</option>
  <option value="isgd">is.gd</option>
</select>

<button onclick="shortenUrl()">Shorten URL</button>

<div id="result"></div>

<script>
async function shortenUrl() {
  const url = document.getElementById('longUrl').value;
  const service = document.getElementById('shortener').value;
  const resultDiv = document.getElementById('result');
  resultDiv.innerText = 'Loading...';

  try {
    let apiUrl = '';
    let body = null;

    switch(service) {
      case 'cleanuri':
        apiUrl = 'https://cleanuri.com/api/v1/shorten';
        body = new URLSearchParams({ url });
        const cleanRes = await fetch(apiUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body
        });
        const cleanData = await cleanRes.json();
        resultDiv.innerHTML = `✅ Short URL: <a href="${cleanData.result_url}" target="_blank">${cleanData.result_url}</a>`;
        break;

      case 'tinyurl':
        apiUrl = `https://api.tinyurl.com/create?api_token=YOUR_TINYURL_API_KEY`; // Replace with real API key
        body = JSON.stringify({ url });
        const tinyRes = await fetch(apiUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body
        });
        const tinyData = await tinyRes.json();
        resultDiv.innerHTML = `✅ Short URL: <a href="${tinyData.data.tiny_url}" target="_blank">${tinyData.data.tiny_url}</a>`;
        break;

      case 'shrtco':
        const shrtRes = await fetch(`https://api.shrtco.de/v2/shorten?url=${url}`);
        const shrtData = await shrtRes.json();
        resultDiv.innerHTML = `✅ Short URL: <a href="${shrtData.result.full_short_link}" target="_blank">${shrtData.result.full_short_link}</a>`;
        break;

      case 'ulvis':
        const ulvisRes = await fetch(`https://ulvis.net/api.php?url=${url}`);
        const ulvisText = await ulvisRes.text();
        resultDiv.innerHTML = `✅ Short URL: <a href="${ulvisText}" target="_blank">${ulvisText}</a>`;
        break;

      case 'gotiny':
        const gotinyRes = await fetch('https://gotiny.cc/api', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify([{ long: url }])
        });
        const gotinyData = await gotinyRes.json();
        resultDiv.innerHTML = `✅ Short URL: <a href="https://gotiny.cc/${gotinyData[0].code}" target="_blank">https://gotiny.cc/${gotinyData[0].code}</a>`;
        break;

      case '1pt':
        const ptRes = await fetch(`https://api.1pt.co/addURL?long=${encodeURIComponent(url)}`);
        const ptData = await ptRes.json();
        resultDiv.innerHTML = `✅ Short URL: <a href="https://1pt.co/${ptData.short}" target="_blank">https://1pt.co/${ptData.short}</a>`;
        break;

      case 'isgd':
        const isgdRes = await fetch(`https://is.gd/create.php?format=simple&url=${encodeURIComponent(url)}`);
        const isgdText = await isgdRes.text();
        resultDiv.innerHTML = `✅ Short URL: <a href="${isgdText}" target="_blank">${isgdText}</a>`;
        break;
    }
  } catch (err) {
    resultDiv.innerText = '❌ Error shortening URL';
    console.error(err);
  }
}
</script>

Info!
To receive the code, please leave your email address in the comment section below and I will send the template to you via email as soon as possible.

People don't have to become experts to share. In the process of sharing, they become experts.

Anonymous