Randomization Clickthrough Widget

Certain pages on this site, and others I’ve made, feature a cute little random clickthrough widget of sorts. In these setups, the user can click a button to randomly load a statement from a predefined series using HTML, CSS, and Javascript. This isn’t exactly useful as such, but is interesting, creative, and fascinating for visitors. I wanted to share the (rather simple, in fact) code here just in case anyone else wants it.

I provide both a stripped-down version featuring just the basic areas necessary for the features to work, and a more aesthetically-aligned version. The latter is actually pretty easy to customize, in my opinion. I’m trying to give proper documentation to allow you to do that (with both of them, actually).

View a live preview of both versions on on Codepen, along with all three necessary code components.

You can use the aesthetic version (with any modifications necessary) as you’d like, or use the plain version with an existing theme. I’ve also found that some sites provide small frames work well with these, if you simply place the plain version inside with a few tweaks to the CSS.

Orange Cat Version

While many of the demonstrative pages on this site are garden or floral-themed, this one focuses on an orange tabby cat, and you’ll have noticed if you visit it on Codepen. I have done this because I feel that orange tabby cats are significantly undervalued, especially the male tabby cats (and most orange tabbies are, in fact, I am told, male).

They are often called stupid or ridiculous, and that’s an unfair stereotype since I’ve known many pleasant and intelligent orange tabbies. In any case, this demonstration is aggressively orange, and I hope you enjoy it. You can very easily alter the CSS (more on that later) so that it isn’t orange, of course.

CSS

This version of the form, which is meant to be a decent start to aestheticizing the experience, features an orange theme, but all colors and features can, of course, be changed. Much of the styling relies on the container #dreamwindow and the button within it, and you can edit both readily.

There is also #dreamed, which allows you to style the output itself - the randomized statements that appear. Please note that this also includes styling for a title tag, because why not? You can always remove it! View this version (and any recent changes to it not yet reflected on this page) live on Codepen.

/* below we have the simple styling for the body, only the background color */
    body {
      background-color: #f4a261;
    }
    
    /* #dreamwindow is the rounded rectangle that includes the entire device */
    #dreamwindow {
      text-align: center;
      font-size: 1.2rem;
      font-family: "Tahoma", sans-serif;
      color: #632307;
      background-color: #cd9057;
      border: 2px dotted #632307;
      margin: 2rem auto;
      width: 30%;
      min-height: 15rem;
      border-radius: 1rem;
      padding: 1rem 4rem;
      position: relative;
    }
    
    /* below, of course, styles the title */
    #dreamwindow h1 {
      font-size: 4rem;
      margin: 0.8rem 1rem 1rem;
      text-transform: lowercase;
      letter-spacing: 0.1rem;
      color: #632307;
    }
    
    /* below styles the button that the user clicks to see new statements from the list, whatever they may be */
    #dreamwindow button {
      border-radius: 0.25rem;
      letter-spacing: 0.1rem;
      font-family: "Tahoma", sans-serif;
      background-color: #ffbb84;
      color: #632307;
      width: 100%;
      padding: 0.4rem;
      border: 1px solid #632307;
      font-size: 1.5rem;
      transition: all 0.5s;
      &:hover,
      :focus {
        outline: none;
        font-style: italic;
        background-color: #f4a261;
        color: #632307;
      }
    }
    /* #dreamed, though sparse below, simply styles the paragraph containing the statements from inserted from the javascript itself */
    #dreamed {
      width: 100%;
      margin: 2em auto;
    }

HTML

The HTML for this is rather simple, in all actuality, and most of what I’ve added here is containers for aesthetic purposes (the aforementioned #dreamwindow). Only the button itself and the paragraph with the ID #dreamed are really necessary to make the widget itself functional. Obviously, title text (if you want to include the <h1> tag at all, for example) or any other additions are possible, too. Do not put anything directly within the HTML of the paragraph labeled #dreamed or it will vanish when the Javascript takes hold…


    <!-- #dreamwindow (beginning below) is the rounded rectangle that contains the entire form -->
    <div id="dreamwindow">
      <!-- below we have a simple h1 title, customize as you wish -->
      <h1>Facts about Me</h1>
      <!-- the button below cycles through the statements as the visitor clicks -->
      <button id="dreaming">Click to learn...</button>
      <!-- the paragraph below is empty here, but gets filled with statements as the page loads and the Javascript runs -->
      <p id="dreamed"></p>
    </div> <!-- #dreamwindow ends here -->

Javascript

The Javascript fills the paragraph called #dreamed with the randomized statements. In the case of the example we’re using below, it is populated here (and on Codepen) with eight autobiographical facts about a small orange cat, typical of most orange cats. You can add any number of these, though, simply by following the same syntax (within double quotes followed by a comma) and adding some at the end.

Guess what, though? Because this is Javascript, the usual rules about escape clauses when one uses (plain, not curly) single or double quotation marks apply, just in case, so you’ll need to be sure to insert a \ before any of those. I’ve created a weak little converter that just might do the trick, so give it a try, I suppose. Notice below that usage of the curly ones works just fine - but keep in mind that some text (and even code) editors randomly turn them into plain ones.

        document.addEventListener("DOMContentLoaded", function () {
        const dreams = [
          //BELOW WE HAVE THE LIST OF STATEMENTS THAT WILL BE RANDOMIZED INTO THE FIELD ON THE PAGE. THERE ARE SEVERAL HERE, BUT YOU CAN ADD AS MANY AS YOU WANT, REGARDLESS OF THE REST OF THE CODE. HAVE AT IT.
          "I’m an orange tabby cat, but I have far more intelligence than most people expect of orange male cats. Indeed, most of what is said about orange cats would be, in fact, sheer misinformation at best, and utter prejudice at worst.",
          "I enjoy chasing small birds and other animals, but I’ve never caught one of any appreciable size, nor managed to successfully slay one. I’ve a particular fascination with cardinals and robins, and do plan to persist in attempts to catch one.",
          "I’ve no memory of my birth or childhood. My memories began the moment my family pulled me from a cardboard box after the car ride home from the animal shelter. I suspect this is, in fact, as things are meant to be.",
          "Someday, I’d like to visit New York City, because I hear that it has many interesting mice and rats to choose from and give chase. It is possible that rats and mice are different there, and that I could, in fact, catch them.",
          "My favorite food is canned salmon, but I only eat kibble, and I eat it every day, twice a day, regardless. The canned salmon only comes infrequently at best, and only on occasions deemed special by the family. I don’t understand.",
          "I once went to the doctor. I blacked out. When I woke up, something was missing? I had a cone around my neck. It felt strange, but things got better again. Eventually. Unusual experience. I hate the doctor.",
          "My best friend is a golden retriever named Hamilton. She protects me and even lets me sleep next to her for warmth. Usually, we both sleep at the foot of the bed with the humans nearby, but we also have our own beds.",
          "There is something hiding behind the sofa. Most of the time. And nobody but me has noticed this. I am a very alert cat, one might say. All attempts to alert my humans to this entity have failed."
        ];
        //WE ARE DECLARING SOME CONSTANTS TO GET THINGS MOVING BASICALLY LMAO
        const dreamy = document.getElementById("dreamed");
        const newdream = document.getElementById("dreaming");
      
        //HERE WE GO, RANDOMIZING THE STATEMENTS.
        function getdreamy() {
          return dreams[Math.floor(Math.random() * dreams.length)];
        }
        //FILLING THE HTML ELEMENT #DREAMED WITH THE RANDOM STATEMENT
        function displayRandomdream() {
          dreamy.innerHTML = getdreamy();
        }
      
        newdream.addEventListener("click", displayRandomdream);
      
        // MAKE SURE SOMETHING DISPLAYS AT FIRST
        displayRandomdream();
      });

Plain Version

The plain version of this is as stripped-down and simplistic as possible (while still functioning). This will allow you to insert it into an existing theme, container, or other space. I really do think, though, that it's not feasible to use this without some styling, but we'll discuss that in a bit. Still, this version is as basic as possible, and will allow you the most leeway in styling, organizing things, and just setting things up in your preferable way.

CSS

Guess what? Sorry, but while I do feel CSS is necessary to make this friendly, I’m not including any with the plain version of this widget. You can, of course, see a rich example of CSS in use for it in the full version above. Instead, I’ll simply list those elements within the HTML which must be included and therefore should include some CSS styling in order to not look random on the screen.

In particular we have #dreaming, which will allow you to style the button that the user clicks to cycle through the statements, and #dreamed which styles the statements that the widget displays. Any other included elements, containers, classes, etc, will be of your own creation and/or designed to suit your personal site theme.

HTML

  <!-- the button below cycles through the statements as the visitor clicks -->
  <button id="dreaming">Click to learn...</button>
  <!-- the paragraph below is empty here, but gets filled with statements as the page loads and the Javascript runs -->
  <p id="dreamed"></p>

Javascript

In terms of Javascript, there is no change between the plain version of this widget and the full version above.