URL Shortener

URL Shortener

Create Short URL

<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

إرسال تعليق