Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

CSS

              
                /* 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;
}

              
            
!

JS

              
                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();
});

              
            
!
999px

Console