This content originally appeared on DEV Community and was authored by Ivy Chen
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!
This content originally appeared on DEV Community and was authored by Ivy Chen
Ivy Chen | Sciencx (2021-07-01T01:41:42+00:00) Create a black-out poetry maker with javascript. Retrieved from https://www.scien.cx/2021/07/01/create-a-black-out-poetry-maker-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.