DEV Community

Cover image for Making a 90s aesthetic word art text picker in only 20 lines of pure HTML web component code + 1 extra file (no node or JS!)
michaelb
michaelb

Posted on • Edited on • Originally published at modulojs.org

Making a 90s aesthetic word art text picker in only 20 lines of pure HTML web component code + 1 extra file (no node or JS!)

In previous mini-tutorials, I showed how to use the single-file Modulo.js to create a gradient picker in 13 lines, or even embed JSON files and APIs in just 3 lines of web component code. Now, let's recreate a classic aesthetic as a Modulo tool. I really like this topic, so stay tuned for more. Many word processors and website graphics generators from the 90s and early 00s generated complex text art with all manner of shadows, angles, and contour. This leads to the colorful, kinetic, and playful reputation of the retro Word Art aesthetic elements you see below:

90 Word Art creator screenshot showing sliders for size and skew of X and y

Try it out now, in less than 30 seconds: πŸš€πŸš€πŸš€ Want to skip ahead? Scroll to the bottom and simply copy the ~20 lines of HTML code into any local HTML file, then open that in your browser to see the result locally. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!


Styling and binding a textarea

Let's start with a textarea that's bound to state:

<Template>
  <textarea [state.bind] name="text" style="
        border: none; margin: 1.5em; color: #B90183;
        text-shadow: 5px 5px 0 #aaffaa;
    "></textarea>
</Template>
<State
  text="Word Art test"
></State>
Enter fullscreen mode Exit fullscreen mode

In this example, we create a <textarea> element that's bound to state using [state.bind]. This means the "text" variable in state will be reflected on the page, and can be edited within the textarea. We also use a style= attribute to give the textarea some styling: We give it a margin, a color, a text-shadow, and get rid of the default border. In future tutorials, we'll show how to customize these elements, but for now, if you want to customize the colors and other aspects, consider following this tutorial that builds a gradient picker in 13 lines, which is similar. Also, if State is giving you conceptual trouble, consider trying trying the corresponding section in the interactive Modulo JS tutorial.

Adding font-size slider

Next, let's make the font-size adjustable, since this is one of the core features of a word art designer. To do so, we add a new state variable called size:

<State
  size:=70
  text="90s Word Art Tool in 3 min with Modulo.js"
></State>
Enter fullscreen mode Exit fullscreen mode

Note the := syntax: We use this since we are dealing with numbers. We then add the size into the style= attribute in the Template:

font-size: {{ state.size }}px;
Enter fullscreen mode Exit fullscreen mode

Finally, we add an input with name="size" and [state.bind], so that it binds to the state variable just like the name="text" textarea was bound:

<label>SIZE <input [state.bind] name="size"
             type="range" min="20" max="100" /></label>
Enter fullscreen mode Exit fullscreen mode

Notice how the type="range", along with min="..." and max="..." lets you create a slider-type input, so users can "drag" a knob between those two values.

Adding two new sliders for skew (x and y)

We're going to "rinse and repeat" for the two new values, and utilize the CSS property transform: skew(x deg, y deg) (where x and y respectively need to be the numbers in degrees). We start with adding it to State just like we did size: Using syntax like x:=30 and y:=10. Then, we'll create two new sliders. Since degrees go from negative to positive, we'll use boundaries of -45 and 45 degrees, as follows:

<label>SKEW X <input [state.bind] name="x"
             type="range" min="-45" max="45" /></label>
<label>SKEW Y <input [state.bind] name="y"
             type="range" min="-45" max="45" /></label>
Enter fullscreen mode Exit fullscreen mode

Finally, just like before, we add the finishing touches of inserting the state variables in to the CSS:

transform: skew({{ state.x }}deg, {{ state.y }}deg);
Enter fullscreen mode Exit fullscreen mode

<x-WordArt> - Embeddable results

Once we repeat the same pattern of HTML code, and add the necessary CSS tweaks to the style= attribute, we end up with the final result:

<!DOCTYPE html>
<template Modulo>
  <Component name="WordArt">
    <Template>
        <label>SIZE <input [state.bind] name="size" type="range" min="20" max="100" /></label>
        <label>SKEW X<input [state.bind] name="x" type="range" min="-45" max="45" /></label>
        <label>SKEW Y<input [state.bind] name="y" type="range" min="-45" max="45" /></label>
        <textarea [state.bind] name="text" style="
                border: none; margin: 1.5em; color: #B90183;
                text-shadow: 5px 5px 0 #aaffaa;
                font-size: {{ state.size }}px;
                transform: skew({{ state.x }}deg, {{ state.y }}deg);
            "></textarea>
    </Template>
    <State
        x:=30
        y:=10
        size:=70
        text="90s Word Art Tool in 3 min with Modulo.js"
    ></State>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-WordArt></x-WordArt>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
christianpaez profile image
Christian Paez

That is very cool