// Information to reach API
const apiKey = '67b46c9a54d348268f3963fb39d05147';
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;
const data = JSON.stringify({destination: urlToShorten});
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = () => {
if(xhr.readyState === XMLHttpRequest.DONE) {
renderResponse(xhr.response);
}
};
xhr.open('POST', url);
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);
// 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}`;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Byte Size</title>
<link rel="stylesheet" type="text/css" href="public/style.css" />
<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 src="public/main.js"></script>
<script src="public/helperFunctions.js"></script>
</body>
</html>