<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>API de binbox.io</h1>
<label for="inputNombreUsuario">Nombre de usuario binbox:
<br>
<input id="inputNombreUsuario" type="text" placeholder="">
</label>
<br>
<br>
<label for="seleccionLink">Link
<input id="seleccionLink" name="seleccion" type="radio" value="0" checked />
</label>
<label for="seleccionPaste">Paste
<input id="seleccionPaste" name="seleccion" type="radio" value="1" />
</label>
<br>
<br>
<label for="titulo">Título:
<br>
<input id="titulo" type="text">
</label>
<br>
<br>
<label for="urlOTexto">URL (si es link) o Texto (si es un paste):
<br>
<textarea id="urlOTexto" cols="30" rows="10"></textarea>
</label>
<br>
<br>
<button id="btnAccion">Ok</button>
<p id="parrafoResultados">Aquí aparecerán los resultados en caso de que todo vaya bien :)</p>
<script type="text/javascript" src="http://binbox.io/api.js"></script>
<script type="text/javascript">
var parrafoResultados = document.querySelector("#parrafoResultados");
document.querySelector("#btnAccion").addEventListener("click", function() {
var nombreUsuario = document.querySelector("#inputNombreUsuario").value;
if (nombreUsuario) {
var titulo = document.querySelector("#titulo").value;
var urlOTexto = document.querySelector("#urlOTexto").value;
if (titulo && urlOTexto) {
var opcionSeleccionada = document.querySelector("input[type='radio']:checked").value;
var objeto = {
title: titulo
};
if (opcionSeleccionada == 0) {
objeto.url = urlOTexto;
} else {
objeto.text = urlOTexto;
}
var BB = new Binbox.API("http://" + nombreUsuario + ".binbox.io/");
parrafoResultados.innerHTML = "Cargando...";
BB.create(objeto, function(resultados) {
if (resultados.ok) {
var link = "https://binbox.io/" + resultados.id;
if (opcionSeleccionada == 1) link += "#" + resultados.salt;
var ancla = '<a target="_blank" href="' + link + '">' + link + "</a>";
parrafoResultados.innerHTML = "Correcto. El link es: " + ancla;
} else {
parrafoResultados.innerHTML = "Ups, algo salió mal. El error es: " + resultados.error;
}
});
}
}
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */