Verserly

Background and Overview

Verserly is an interactive editor used to create visual poetry and art. Writers, students, and teachers can use the editor to create and experiment visual poetry pieces. Erasure mode allows users to manipulate the text so certain words stand out visually, highlighting language choices in new and unexpected ways. There is also a built-in word generator that utlizes the Datamuse API to generate words for the writer that is in need of inspiration.

Check out the right section of the editor for examples of possible creations!

Live Demo

Editor Toolbox

Text Manipulation Tools

Writers can submit their original text or pieces that already have been written by others. This can include text such as poems, prose, recipes, articles, or historical documents. Verserly allows you to play around and explore the language of any piece of written text. Once submitted, the text appears in the editor.

Users can then change the font style and size. They can also edit or clear the text. If more space is needed, they can increase the canvas space by width and size.

Event listeners are added to DOM elements that are part of the editing toolbox. A change in the value of the toolbox changes the style of the text on the cavnas.

const colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("change", () => {
  document.getElementById("targetText").style.backgroundColor = colorPicker.value;
});

const fontSize = document.getElementById("fontSize");
fontSize.addEventListener("change", () => {
  document.getElementById("targetText").style.fontSize = fontSize.value + "px"
});

Erasure/Blackout Poetry Mode

Writers can create Erasure / Blackout Poetry using a variety of erasure filters. Users can click on a letter or word to make it disappear with a variety of settings such as blacked-out, whited-out, strike-through, and fade-out.

When text is submitted, each character is setup as a span element on the DOM and given the class of "visible." An onclick event listener is added to each span. When the span is clicked, a function is executed that changes the class of the span. Changing the class of an element corresponds to the changing how the element looks via SCSS. This gives the characters specific erasure effects.

window.submitText = () => {
  const submittedText = document.getElementById("submitedText").value;

  submittedText.split("").forEach((letter) => {

    const span = document.createElement("span");
    span.className = "visible";
    span.setAttribute("contenteditable", false);
    span.innerHTML = letter;
    span.addEventListener("click", function() {
      if (window.erasureSelection === "character" && window.eraseable) {
        this.classList.toggle(`${window.erasureOption}`);
      } else if (window.erasureSelection === "word" && window.eraseable) {
        getWord(this).forEach((letterElement) => {
          letterElement.classList.toggle(`${window.erasureOption}`);
        });
      }
    });

    const paragraph = document.getElementById("targetText");
    paragraph.append(span);
  });
};

span.line-through {
    text-decoration: line-through;
}

span.blackout {
    background-color: black;
}

span.invisible {
   opacity: 0
}

span.fade-out {
   color: grey;
   opacity: 0.3;
}

Dictionary/ Thesaurus/ Word Generator

Through the Datemuse API, writers can lookup and generate words for inspiration.Writers can enter a word and have the website generate rhymes, synonyms, antonyms, related words, homophones, and more. Once can also enter in a noun and have the generator return related adjectives and vice versa.

Background Picture

Writers can add and remove background pictures to further the visual elements of their text.

Technology

Verserly is built with Javascript, HTML, and SCSS.