Build a Social Media URL Shortener Using rebrandly API in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Byte Size</title>
  <style>
    header {
height: 60px;
text-align: center;
}

main {
background-color: #0087de;
height: 900px;
text-align: center;
}

h1 {
height: 38px;
font-family: Roboto;
font-size: 32px;
font-weight: 300;
letter-spacing: 0.6px;
text-align: center;
color: #1f233e;
padding-top: 40px;
}

.logo {
width: 110px;
height: 28px;
margin-top: 40px;
object-fit: contain;
}

.container {
width: 400px;
margin: auto;
text-align: center;
}

#input {
width: 219px;
height: 37px;
border-radius: 3.2px;
border: solid 0.8px #1f233e;
background-color: inherit;
display: block;
margin: auto;
font-family: Source Sans Pro;
font-size: 14px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
}

#shorten {
width: 91px;
height: 37px;
border-radius: 3.2px;
border: solid 0.8px #1f233e;
background-color: inherit;
margin-top: 48px;
font-family: Source Sans Pro;
font-size: 14px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
margin-right: -3px;
}

#shorten:hover {
background-color: #1f233e;
border: solid 0.8px #4a4a4a;
color: #0087de;
cursor: pointer;
}

#shorten:active {
background-color: #ffffff;
border: solid 0.8px #4a4a4a;
color: #1f233e;
cursor: pointer;
}

#responseField {
min-width: 191px;
min-height: 120px;
border: solid 2px #ffffff;
margin: auto;
margin-top: 25px;
font-family: Source Sans Pro;
font-size: 16px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
overflow: auto;
}

  </style>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
</head>

<body>
  <header>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/intermediate-javascript-requests/bytesize_logo.svg" class="logo" />

  </header>
  <main id="main">
    <div class="container">

      <h1>Enter a URL</h1>

      <form id="form" autocomplete="off">
        <input type="text" id="input" value="">
        <button id="shorten">Shorten</button>
      </form>

      <div id="responseField">

      </div>

    </div>
  </main>

  
  <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
  <script>
    // Information to reach API
const apiKey = '554b5b27161f4eadaec5de8f7c8b5a47';
const url = 'https://api.rebrandly.com/v1/links';

// Some page elements
const inputField = document.querySelector('#input');
const shortenButton = document.querySelector('#shorten');
const responseField = document.querySelector('#responseField');

// AJAX functions
const shortenUrl = () => {
  const urlToShorten = inputField.value;
  // We’re including this information because the API expects to see an object with a key destination that has a value of a URL.
  const data = JSON.stringify({destination: urlToShorten});
  // new XMLHttpRequest object
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      renderResponse(xhr.response);  
    }
  }
  xhr.open('POST', url);
  // To access the Rebrandly API, we need a header with two  key-value pairs. In the header, you must include values for 'Content-type' and an 'apikey'.
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.setRequestHeader('apikey', apiKey);
  xhr.send(data);
  
};



// Clear page and call AJAX functions
const displayShortUrl = (event) => {
  event.preventDefault();
  while(responseField.firstChild){
    responseField.removeChild(responseField.firstChild);
  }
  shortenUrl();
}

shortenButton.addEventListener('click', displayShortUrl);

  </script>
  <script>
    // Manipulates responseField to render a formatted and appropriate message
const renderResponse = (res) => {
    // Displays either message depending on results
    if(res.errors){
      responseField.innerHTML = "<p>Sorry, couldn't format your URL.</p><p>Try again.</p>";
    } else {  
      responseField.innerHTML = `<p>Your shortened url is: </p><p> ${res.shortUrl} </p>`;
    }
  }
  
// Manipulates responseField to render an unformatted response
const renderRawResponse = (res) => {
    // Displays either message depending on results
    if(res.errors){  
        responseField.innerHTML = "<p>Sorry, couldn't format your URL.</p><p>Try again.</p>";
    } else {
    // Adds line breaks for JSON
        let structuredRes = JSON.stringify(res).replace(/,/g, ", \n");
        structuredRes = `<pre>${structuredRes}</pre>`;
        responseField.innerHTML = `${structuredRes}`;
    }
}
  
  </script>
</body>
</html>

Leave a Reply