vqoph/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
const gistUrl = "https://gist.githubusercontent.com/vqoph/3582189df9f735684a2af66cdcedfa2c/raw/0896edc2e30fb8fe0118f2782640f69fe15b2d11/saluthuguesalut.json";

function sluggify (str) {
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();

    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    var to   = "aaaaeeeeiiiioooouuuunc------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');

    return str;
}


function getQuotes() {
  return new Promise( (resolve, reject) => {
    var oReq = new XMLHttpRequest()
    oReq.onload = (res) => {
      const response = JSON.parse(res.currentTarget.response);
      resolve(response);
    };
    oReq.open("get", gistUrl, true)
    oReq.send();
  });
}


function element({tag, className}){
  tag = tag || 'div';
  const elm = document.createElement(tag);
  elm.className = className;
  return elm;
}


function addBootstrap(){
  const link = element({tag: 'link'});
  link.href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
  link.rel = 'stylesheet';
  link.type = "text/css";
  document.head.appendChild(link);
}

function menuElement(author, slugClass) {
  const item = element({tag: 'a', className: 'nav-link'});
  item.innerHTML = author;
  item.href = 'javascript:';
  item.dataset.target = slugClass;
  item.onclick = (evt) => {
    const tg = evt.currentTarget;
    document.querySelectorAll('.card').forEach(el => { el.style.display ='none'; });
    document.querySelectorAll(tg.dataset.target)
      .forEach(el => {
        el.style.display ='block';
        console.log(item.dataset.target);
      });

  };
  return item;
}


addBootstrap();
getQuotes().then(quotes => {
  const list = element({className: 'col'});
  const menuItems = [];


  const menu = element({tag:'nav', className: 'nav'});
  list.appendChild(menu);

  for(i = quotes.length; i > 0; i--) {
    const item =  element({className: 'card'})
    const body = element({className: 'card-body'})
    const bq = element({tag: 'blocquote', className: 'blocquote'})
    const char = element({tag: 'footer', className: 'blockquote-footer' })

    const dataItem =  quotes[i - 1];
    bq.innerHTML = dataItem.quote.replace('\n', '<br>')
    char.innerHTML = dataItem.character
    bq.appendChild(char)

    const slug = sluggify(dataItem.character);

    item.className += ' ' + slug;


    item.style.marginTop = '.5rem';
    item.style.marginBottom = '.5rem';
    if( menuItems.map(itm => itm.slug).indexOf(slug) === -1 ) {
      menuItems.push({
        slug: slug,
        character: dataItem.character,
      })
    }

    body.appendChild(bq);
    item.appendChild(body);
    list.appendChild(item);

  }

  menu.appendChild(menuElement('Toutes les répliques', '.card'));

  for(i = menuItems.length; i > 0; i--) {
    const { slug, character } = menuItems[i - 1]
    const item = menuElement(character, '.'+slug)
    menu.appendChild(item);
  }

  const container = element({className: 'container'})
  const row = element({className: 'row'});

  row.appendChild(list);
  container.appendChild(row);
  document.body.appendChild(container);


});
</script>


<script id="jsbin-source-javascript" type="text/javascript">
const gistUrl = "https://gist.githubusercontent.com/vqoph/3582189df9f735684a2af66cdcedfa2c/raw/0896edc2e30fb8fe0118f2782640f69fe15b2d11/saluthuguesalut.json";

function sluggify (str) {
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();

    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    var to   = "aaaaeeeeiiiioooouuuunc------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');

    return str;
}


function getQuotes() {
  return new Promise( (resolve, reject) => {
    var oReq = new XMLHttpRequest()
    oReq.onload = (res) => {
      const response = JSON.parse(res.currentTarget.response);
      resolve(response);
    };
    oReq.open("get", gistUrl, true)
    oReq.send();
  });
}


function element({tag, className}){
  tag = tag || 'div';
  const elm = document.createElement(tag);
  elm.className = className;
  return elm;
}


function addBootstrap(){
  const link = element({tag: 'link'});
  link.href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
  link.rel = 'stylesheet';
  link.type = "text/css";
  document.head.appendChild(link);
}

function menuElement(author, slugClass) {
  const item = element({tag: 'a', className: 'nav-link'});
  item.innerHTML = author;
  item.href = 'javascript:';
  item.dataset.target = slugClass;
  item.onclick = (evt) => {
    const tg = evt.currentTarget;
    document.querySelectorAll('.card').forEach(el => { el.style.display ='none'; });
    document.querySelectorAll(tg.dataset.target)
      .forEach(el => {
        el.style.display ='block';
        console.log(item.dataset.target);
      });

  };
  return item;
}


addBootstrap();
getQuotes().then(quotes => {
  const list = element({className: 'col'});
  const menuItems = [];


  const menu = element({tag:'nav', className: 'nav'});
  list.appendChild(menu);

  for(i = quotes.length; i > 0; i--) {
    const item =  element({className: 'card'})
    const body = element({className: 'card-body'})
    const bq = element({tag: 'blocquote', className: 'blocquote'})
    const char = element({tag: 'footer', className: 'blockquote-footer' })

    const dataItem =  quotes[i - 1];
    bq.innerHTML = dataItem.quote.replace('\n', '<br>')
    char.innerHTML = dataItem.character
    bq.appendChild(char)

    const slug = sluggify(dataItem.character);

    item.className += ' ' + slug;


    item.style.marginTop = '.5rem';
    item.style.marginBottom = '.5rem';
    if( menuItems.map(itm => itm.slug).indexOf(slug) === -1 ) {
      menuItems.push({
        slug: slug,
        character: dataItem.character,
      })
    }

    body.appendChild(bq);
    item.appendChild(body);
    list.appendChild(item);

  }

  menu.appendChild(menuElement('Toutes les répliques', '.card'));

  for(i = menuItems.length; i > 0; i--) {
    const { slug, character } = menuItems[i - 1]
    const item = menuElement(character, '.'+slug)
    menu.appendChild(item);
  }

  const container = element({className: 'container'})
  const row = element({className: 'row'});

  row.appendChild(list);
  container.appendChild(row);
  document.body.appendChild(container);


});</script></body>
</html>

## jsbin.zujasuq.js
const gistUrl = "https://gist.githubusercontent.com/vqoph/3582189df9f735684a2af66cdcedfa2c/raw/0896edc2e30fb8fe0118f2782640f69fe15b2d11/saluthuguesalut.json";

function sluggify (str) {
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();

    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    var to   = "aaaaeeeeiiiioooouuuunc------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');

    return str;
}


function getQuotes() {
  return new Promise( (resolve, reject) => {
    var oReq = new XMLHttpRequest()
    oReq.onload = (res) => {
      const response = JSON.parse(res.currentTarget.response);
      resolve(response);
    };
    oReq.open("get", gistUrl, true)
    oReq.send();
  });
}


function element({tag, className}){
  tag = tag || 'div';
  const elm = document.createElement(tag);
  elm.className = className;
  return elm;
}


function addBootstrap(){
  const link = element({tag: 'link'});
  link.href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
  link.rel = 'stylesheet';
  link.type = "text/css";
  document.head.appendChild(link);
}

function menuElement(author, slugClass) {
  const item = element({tag: 'a', className: 'nav-link'});
  item.innerHTML = author;
  item.href = 'javascript:';
  item.dataset.target = slugClass;
  item.onclick = (evt) => {
    const tg = evt.currentTarget;
    document.querySelectorAll('.card').forEach(el => { el.style.display ='none'; });
    document.querySelectorAll(tg.dataset.target)
      .forEach(el => {
        el.style.display ='block';
        console.log(item.dataset.target);
      });

  };
  return item;
}


addBootstrap();
getQuotes().then(quotes => {
  const list = element({className: 'col'});
  const menuItems = [];


  const menu = element({tag:'nav', className: 'nav'});
  list.appendChild(menu);

  for(i = quotes.length; i > 0; i--) {
    const item =  element({className: 'card'})
    const body = element({className: 'card-body'})
    const bq = element({tag: 'blocquote', className: 'blocquote'})
    const char = element({tag: 'footer', className: 'blockquote-footer' })

    const dataItem =  quotes[i - 1];
    bq.innerHTML = dataItem.quote.replace('\n', '<br>')
    char.innerHTML = dataItem.character
    bq.appendChild(char)

    const slug = sluggify(dataItem.character);

    item.className += ' ' + slug;


    item.style.marginTop = '.5rem';
    item.style.marginBottom = '.5rem';
    if( menuItems.map(itm => itm.slug).indexOf(slug) === -1 ) {
      menuItems.push({
        slug: slug,
        character: dataItem.character,
      })
    }

    body.appendChild(bq);
    item.appendChild(body);
    list.appendChild(item);

  }

  menu.appendChild(menuElement('Toutes les répliques', '.card'));

  for(i = menuItems.length; i > 0; i--) {
    const { slug, character } = menuItems[i - 1]
    const item = menuElement(character, '.'+slug)
    menu.appendChild(item);
  }

  const container = element({className: 'container'})
  const row = element({className: 'row'});

  row.appendChild(list);
  container.appendChild(row);
  document.body.appendChild(container);


});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	const gistUrl = "https://gist.githubusercontent.com/vqoph/3582189df9f735684a2af66cdcedfa2c/raw/0896edc2e30fb8fe0118f2782640f69fe15b2d11/saluthuguesalut.json";

	function sluggify (str) {
	str = str.replace(/^\s+\|\s+$/g, ''); // trim
	str = str.toLowerCase();

	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
	var to = "aaaaeeeeiiiioooouuuunc------";
	for (var i=0, l=from.length ; i<l ; i++) {
	str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	}

	str = str.replace(/[^a-z0-9 -]/g, '')
	.replace(/\s+/g, '-')
	.replace(/-+/g, '-');

	return str;
	}


	function getQuotes() {
	return new Promise( (resolve, reject) => {
	var oReq = new XMLHttpRequest()
	oReq.onload = (res) => {
	const response = JSON.parse(res.currentTarget.response);
	resolve(response);
	};
	oReq.open("get", gistUrl, true)
	oReq.send();
	});
	}


	function element({tag, className}){
	tag = tag \|\| 'div';
	const elm = document.createElement(tag);
	elm.className = className;
	return elm;
	}


	function addBootstrap(){
	const link = element({tag: 'link'});
	link.href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
	link.rel = 'stylesheet';
	link.type = "text/css";
	document.head.appendChild(link);
	}

	function menuElement(author, slugClass) {
	const item = element({tag: 'a', className: 'nav-link'});
	item.innerHTML = author;
	item.href = 'javascript:';
	item.dataset.target = slugClass;
	item.onclick = (evt) => {
	const tg = evt.currentTarget;
	document.querySelectorAll('.card').forEach(el => { el.style.display ='none'; });
	document.querySelectorAll(tg.dataset.target)
	.forEach(el => {
	el.style.display ='block';
	console.log(item.dataset.target);
	});

	};
	return item;
	}


	addBootstrap();
	getQuotes().then(quotes => {
	const list = element({className: 'col'});
	const menuItems = [];


	const menu = element({tag:'nav', className: 'nav'});
	list.appendChild(menu);

	for(i = quotes.length; i > 0; i--) {
	const item = element({className: 'card'})
	const body = element({className: 'card-body'})
	const bq = element({tag: 'blocquote', className: 'blocquote'})
	const char = element({tag: 'footer', className: 'blockquote-footer' })

	const dataItem = quotes[i - 1];
	bq.innerHTML = dataItem.quote.replace('\n', '<br>')
	char.innerHTML = dataItem.character
	bq.appendChild(char)

	const slug = sluggify(dataItem.character);

	item.className += ' ' + slug;


	item.style.marginTop = '.5rem';
	item.style.marginBottom = '.5rem';
	if( menuItems.map(itm => itm.slug).indexOf(slug) === -1 ) {
	menuItems.push({
	slug: slug,
	character: dataItem.character,
	})
	}

	body.appendChild(bq);
	item.appendChild(body);
	list.appendChild(item);

	}

	menu.appendChild(menuElement('Toutes les répliques', '.card'));

	for(i = menuItems.length; i > 0; i--) {
	const { slug, character } = menuItems[i - 1]
	const item = menuElement(character, '.'+slug)
	menu.appendChild(item);
	}

	const container = element({className: 'container'})
	const row = element({className: 'row'});

	row.appendChild(list);
	container.appendChild(row);
	document.body.appendChild(container);


	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">
	const gistUrl = "https://gist.githubusercontent.com/vqoph/3582189df9f735684a2af66cdcedfa2c/raw/0896edc2e30fb8fe0118f2782640f69fe15b2d11/saluthuguesalut.json";

	function sluggify (str) {
	str = str.replace(/^\s+\|\s+$/g, ''); // trim
	str = str.toLowerCase();

	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
	var to = "aaaaeeeeiiiioooouuuunc------";
	for (var i=0, l=from.length ; i<l ; i++) {
	str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	}

	str = str.replace(/[^a-z0-9 -]/g, '')
	.replace(/\s+/g, '-')
	.replace(/-+/g, '-');

	return str;
	}


	function getQuotes() {
	return new Promise( (resolve, reject) => {
	var oReq = new XMLHttpRequest()
	oReq.onload = (res) => {
	const response = JSON.parse(res.currentTarget.response);
	resolve(response);
	};
	oReq.open("get", gistUrl, true)
	oReq.send();
	});
	}


	function element({tag, className}){
	tag = tag \|\| 'div';
	const elm = document.createElement(tag);
	elm.className = className;
	return elm;
	}


	function addBootstrap(){
	const link = element({tag: 'link'});
	link.href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
	link.rel = 'stylesheet';
	link.type = "text/css";
	document.head.appendChild(link);
	}

	function menuElement(author, slugClass) {
	const item = element({tag: 'a', className: 'nav-link'});
	item.innerHTML = author;
	item.href = 'javascript:';
	item.dataset.target = slugClass;
	item.onclick = (evt) => {
	const tg = evt.currentTarget;
	document.querySelectorAll('.card').forEach(el => { el.style.display ='none'; });
	document.querySelectorAll(tg.dataset.target)
	.forEach(el => {
	el.style.display ='block';
	console.log(item.dataset.target);
	});

	};
	return item;
	}


	addBootstrap();
	getQuotes().then(quotes => {
	const list = element({className: 'col'});
	const menuItems = [];


	const menu = element({tag:'nav', className: 'nav'});
	list.appendChild(menu);

	for(i = quotes.length; i > 0; i--) {
	const item = element({className: 'card'})
	const body = element({className: 'card-body'})
	const bq = element({tag: 'blocquote', className: 'blocquote'})
	const char = element({tag: 'footer', className: 'blockquote-footer' })

	const dataItem = quotes[i - 1];
	bq.innerHTML = dataItem.quote.replace('\n', '<br>')
	char.innerHTML = dataItem.character
	bq.appendChild(char)

	const slug = sluggify(dataItem.character);

	item.className += ' ' + slug;


	item.style.marginTop = '.5rem';
	item.style.marginBottom = '.5rem';
	if( menuItems.map(itm => itm.slug).indexOf(slug) === -1 ) {
	menuItems.push({
	slug: slug,
	character: dataItem.character,
	})
	}

	body.appendChild(bq);
	item.appendChild(body);
	list.appendChild(item);

	}

	menu.appendChild(menuElement('Toutes les répliques', '.card'));

	for(i = menuItems.length; i > 0; i--) {
	const { slug, character } = menuItems[i - 1]
	const item = menuElement(character, '.'+slug)
	menu.appendChild(item);
	}

	const container = element({className: 'container'})
	const row = element({className: 'row'});

	row.appendChild(list);
	container.appendChild(row);
	document.body.appendChild(container);


	});</script></body>
	</html>