<!-- <iframe id="test" src="https://codepen.io/ninivert/pens/public" frameborder="0"></iframe> -->

<h1>Codepen export bookmark plugin</h1>

<p>Drag this link to your bookmark bar. Go to your codepen profile, and click the link. All the pens on the page will start downloading. If they don't, allow codepen to display pop-ups</p>
<p>(06/2018) Support for list view</p>
<p>(07/2018) Fix for Firefox and added dialog boxes to help the user</p>
<a href="javascript:(function()%7Bvar%20links%3D%5B%5D%2Ctitles%2Cdata%2Caccept%2Clink%3Bif(-1%3D%3D%3Dwindow.location.href.indexOf(%22%3Fgrid_type%3Dlist%22))%7Btitles%3Ddocument.getElementsByClassName(%22cover-link%22)%3Bfor(var%20i%3D0%3Bi%3Ctitles.length%3Bi%2B%2B)links.push(titles%5Bi%5D.href)%7Delse%20for(titles%3Ddocument.getElementsByClassName(%22title%22)%2Ci%3D0%3Bi%3Ctitles.length%3Bi%2B%2B)links.push(titles%5Bi%5D.firstElementChild.href)%3B%0Aif(0%3D%3D%3Dlinks.length)alert(%22Download%20pens%3A%20No%20pens%20found%20on%20this%20page%20%3A(%22)%3Belse%20if(accept%3Dconfirm(%22Starting%20download...%5CnIf%20not%20all%20pens%20start%20downloading%2C%20please%20check%20if%20you%20have%20allowed%20codepen.io%20to%20display%20pop-ups%5Cn%5CnTabs%20will%20fly%20open%20and%20close%2C%20THIS%20MAY%20LAG%20YOUR%20COMPUTER.%20Do%20you%20want%20to%20continue%3F%22))for(i%3D0%3Bi%3Clinks.length%3Bi%2B%2B)links%5Bi%5D%3Dlinks%5Bi%5D.replace(%2Fhttp%3A%5C%2F%5C%2Fcodepen.io%5C%2F%7Chttps%3A%5C%2F%5C%2Fcodepen.io%5C%2F%2F%2C%22%22)%2Cdata%3Dlinks%5Bi%5D.split(%22%2Fpen%2F%22)%2Clink%3Ddocument.createElement(%22a%22)%2Clink.href%3D%22%2F%2Fcodepen.io%2F%22%2Bdata%5B0%5D%2B%0A%22%2Fshare%2Fzip%2F%22%2Bdata%5B1%5D%2Clink.target%3D%22_blank%22%2Cdocument.body.appendChild(link)%2Clink.setAttribute(%22type%22%2C%22hidden%22)%2Clink.click()%3B%7D)()%3B">Download pens</a>
p,
a {
  margin: 2em 0;
}

a {
  display: block;
  padding: 2em;
  border: 2px solid #eee;
  border-radius: 3em;
  background: transparent;
  text-align: center;
  color: #333;
  transition: all .2s;
  &:hover {
    text-decoration: none;
    border: 2px solid crimson;
    box-shadow: 0 .2em 1em rgba(51, 51, 51, .6);
    color: crimson;
    transform: translatey(-.2em);
  }
}
/* UNCOMPRESSED
var links = [], titles, data, accept, link;

// Get all the pen IDs on the page
if (window.location.href.indexOf('?grid_type=list') === -1) {
    titles = document.getElementsByClassName('cover-link');
    for (var i = 0; i < titles.length; i++) {
        links.push(titles[i].href);
    }
} else {
    titles = document.getElementsByClassName('title');
    for (var i = 0; i < titles.length; i++) {
        links.push(titles[i].firstElementChild.href);
    }
}

// Alert the user if getting pen IDs failed
if (links.length === 0) {
    alert('Download pens: No pens found on this page :(')
} else {
    // Warn the user about lag, if user accepts launch download
    accept = confirm('Starting download...\nIf not all pens start downloading, please check if you have allowed codepen.io to display pop-ups\n\nTabs will fly open and close, THIS MAY LAG YOUR COMPUTER. Do you want to continue?')
    if (accept) {
        // Generate download links and click them
        for (var i = 0; i < links.length; i++) {
            links[i] = links[i].replace(/http:\/\/codepen.io\/|https:\/\/codepen.io\//, '');
            data = links[i].split('/pen/');
            link = document.createElement('a');
            link.href = '//codepen.io/' + data[0] + '/share/zip/' + data[1];
            link.target = '_blank';
            // Need to add the link to the body for Firefox
            document.body.appendChild(link);
            link.setAttribute("type", "hidden");
            link.click();
        }
    }
}
*/

/* COMPRESSED
var links=[],titles,data,accept,link;if(-1===window.location.href.indexOf("?grid_type=list")){titles=document.getElementsByClassName("cover-link");for(var i=0;i<titles.length;i++)links.push(titles[i].href)}else for(titles=document.getElementsByClassName("title"),i=0;i<titles.length;i++)links.push(titles[i].firstElementChild.href);
if(0===links.length)alert("Download pens: No pens found on this page :(");else if(accept=confirm("Starting download...\nIf not all pens start downloading, please check if you have allowed codepen.io to display pop-ups\n\nTabs will fly open and close, THIS MAY LAG YOUR COMPUTER. Do you want to continue?"))for(i=0;i<links.length;i++)links[i]=links[i].replace(/http:\/\/codepen.io\/|https:\/\/codepen.io\//,""),data=links[i].split("/pen/"),link=document.createElement("a"),link.href="//codepen.io/"+data[0]+
"/share/zip/"+data[1],link.target="_blank",document.body.appendChild(link),link.setAttribute("type","hidden"),link.click();
*/

/* ENCODED
<a href="javascript:(function()%7Bvar%20links%3D%5B%5D%2Ctitles%2Cdata%2Caccept%2Clink%3Bif(-1%3D%3D%3Dwindow.location.href.indexOf(%22%3Fgrid_type%3Dlist%22))%7Btitles%3Ddocument.getElementsByClassName(%22cover-link%22)%3Bfor(var%20i%3D0%3Bi%3Ctitles.length%3Bi%2B%2B)links.push(titles%5Bi%5D.href)%7Delse%20for(titles%3Ddocument.getElementsByClassName(%22title%22)%2Ci%3D0%3Bi%3Ctitles.length%3Bi%2B%2B)links.push(titles%5Bi%5D.firstElementChild.href)%3B%0Aif(0%3D%3D%3Dlinks.length)alert(%22Download%20pens%3A%20No%20pens%20found%20on%20this%20page%20%3A(%22)%3Belse%20if(accept%3Dconfirm(%22Starting%20download...%5CnIf%20not%20all%20pens%20start%20downloading%2C%20please%20check%20if%20you%20have%20allowed%20codepen.io%20to%20display%20pop-ups%5Cn%5CnTabs%20will%20fly%20open%20and%20close%2C%20THIS%20MAY%20LAG%20YOUR%20COMPUTER.%20Do%20you%20want%20to%20continue%3F%22))for(i%3D0%3Bi%3Clinks.length%3Bi%2B%2B)links%5Bi%5D%3Dlinks%5Bi%5D.replace(%2Fhttp%3A%5C%2F%5C%2Fcodepen.io%5C%2F%7Chttps%3A%5C%2F%5C%2Fcodepen.io%5C%2F%2F%2C%22%22)%2Cdata%3Dlinks%5Bi%5D.split(%22%2Fpen%2F%22)%2Clink%3Ddocument.createElement(%22a%22)%2Clink.href%3D%22%2F%2Fcodepen.io%2F%22%2Bdata%5B0%5D%2B%0A%22%2Fshare%2Fzip%2F%22%2Bdata%5B1%5D%2Clink.target%3D%22_blank%22%2Cdocument.body.appendChild(link)%2Clink.setAttribute(%22type%22%2C%22hidden%22)%2Clink.click()%3B%7D)()%3B">Download pens</a>
*/

External CSS

  1. https://codepen.io/ninivert/pen/YWVJqO

External JavaScript

This Pen doesn't use any external JavaScript resources.