Create a black-out poetry maker with javascript
Tags: showdev, javascript, css, webdev
Published: 2021-07-01 01:41:42

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.
```HTML
<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. 
```CSS
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. 
```javascript
// 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.
```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! 
```javascript
// 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!

![poetry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i32c6yvoqj6kenb81gtt.png)

Here's the [codepen](https://codepen.io/Ivavay/pen/rNmBbvp), the [github repo](https://github.com/ivavay/jacobs-wonderbar) for better css formating, and the [live version](https://blackout-poetry-digital.glitch.me/) of the site.

Have fun making poetry!