Create a black-out poetry maker with javascript

#showdev #javascript #css #webdev

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!

Top comments (7)

Kyle Scheuerlein • Jul 1 '21

What a neat idea! I love the simple things that can be done using strictly HTML, CSS, and JS.

I did notice a bug though. Every time you click the “Display text” button it appends your text to the document. Either you should disable the button (until the textarea changes) or the button should always replace whatever is in “myDiv”.