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

Most of what I’ve added here are containers for aesthetic purposes. 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 backticks followed by a comma) and adding some at the end.

  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`); //THE PARAGRAPH THAT DISPLAYS THE SNIPPETS LABELED DREAMY OR #DREAMED
  const newdream = document.getElementById(`dreaming`);
//THE BUTTON THAT CYCLES THRU THE SNUPPETS IS CALLED NEWDREAM OR #DREAMING

  //FILLING THE HTML ELEMENT #DREAMED WITH THE RANDOM STATEMENT
  function displayrandomdream() {
    dreamy.innerHTML = dreams[Math.floor(Math.random() * dreams.length)];
  }

  newdream.addEventListener(`click`, displayrandomdream);

  // MAKE SURE SOMETHING DISPLAYS AT FIRST
  displayrandomdream();

Plain Version HTML

This version uses the same Javascript as above, but is without any lavish CSS customizations.

  <!-- 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>