Create a black-out poetry maker with javascript

In this tutorial, I'll walk you through how to build a black-out poetry maker with vanilla javascript! Black-out poetry is a kind of reductionist poetry-writing method where you cross out words in black until the remaining words form a poem. Blackout poetry is known to help writers organize their thoughts, regulate emotions, and restore creativity. Let's get started!

First in your HTML, let's create a textarea and some buttons.

<div class="container">
<textarea id='input' placeholder="Copy & paste a block of text you'd like to start with" ></textarea>
  <button id="btn">Display Text</button>
  <button id="download">Download PNG</button>
  <div id ="myDiv"></div>
</div>

In the CSS, let's do some styling.

span {
  margin-left: 3px;
  display: inline-block;
}
.container {
   display: inline-block;
}
textarea {
  width: 500px;
  height: 300px;
}
#myDiv {
  background-color: white;
  width: 500px;
  height: 100%;
}

Finally, in the JS file, we're going to make each word a span element and make it so that when you click on a span element, its background turns black.

// enter a block of text and select words to black out  
let btn = document.getElementById("btn");
let inputValue = document.getElementById("input").value;
btn.addEventListener("click", () => {
  let inputValue = document.getElementById("input").value;
    // loop thru each word and create a span
    inputValue.split(" ").forEach(word => { 
    const element = document.createElement("span");
    element.innerHTML = word;  
    document.body.appendChild(element);
    document.getElementById('myDiv').appendChild(element);  
    element.onclick = () =>     
    element.style.background = '#000';
    });
});

Then we're going to use this html2canvas library to turn our div output into a png. First put this in your HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.min.js" integrity="sha512-Ih/6Hivj+361PNhdTq03BrGbzCpetyokxTKSqohHw8GSsGD6jGzp4E5Wl8nayPWN3iUpZpfRNE/25q5BuaUd8Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Then, put this in your JS file. Shoutout to stackoverflow for showing me how to do this!

// render div as png 
document.getElementById("download").addEventListener("click", function() {
    html2canvas(document.getElementById('myDiv')).then(function(canvas) {
    saveAs(canvas.toDataURL(), 'file-name.png');
    });
});

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);

    } else {
      window.open(uri);
    }
}

And yay, you're done! You should now be able to copy and paste a block of text to the textarea, start marking away, and render your finished poem in a png when the download button is clicked!

Here's the codepen, the github repo for better css formating, and the live version of the site.

Have fun making poetry!

Blog

Create a black-out poetry maker with javascript

Ivy Chen

Join Our Newsletter. No Spam, Only the good stuff.

Related