Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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


Save Automatically?

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.


  <button id="welcome" onClick="helloUser()" height="15%" width= "20%" style="font-size: 150%; border-radius: 5px; background: linear-gradient(to right, pink , orange); margin-left: 5%; margin-top: 3%;">Click Me 😄 </button>
  <h1 id="place" style="text-align:center;"> Functions are </h1>




                // Javascript : Functions

// Functions are blocks of code that are programmed to perform specific actions/a specific task. 

// Functions are designed to be reusable because they save time and make programming easier. 

// Functions are similar to formulas in mathematics. 

// You may remember doing tedious math problems in which you had to plug values into the same formula over and over and over again, and record the answer, such as finding the circumfrence of a number of different circles.

// Functions eliminate the tedious portion of using formulas by taking the values we want to plug into a formula, plugging them in for us, and giving us the result. 

// Functions are not solely used for repeated use of a formula, however. Functions have essentially no limitations on their use, meaning you can program a function to do whatever you please. 

// We can have a function that returns sentences in pig latin, a function that calculates how many seconds you've been alive, a function that creates new objects or edits an array, the possibilities are endless.

// After we learn about functions, we will be able to create a button like the one below. Try clicking the button to see what happens.

function helloUser(){
  let page = document.querySelector('#place');
  let adjectives = ["Magical!!! 🦄✨💫" , "Fun!!! 🦄✨💫" , "Handy dandy!!! 🦄✨💫"];
  let word = Math.floor(Math.random() * 3);
  page.innerHTML = "Functions are " + adjectives[word];