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


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.


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.


                <div class="sw-StockWidget">
	<div class="sw-StockWidget_Live">
		Live price: <span id="swPrice" class="sw-StockWidget_Price">10</span>
	<div class="sw-StockWidget_UserInput">
		<input id="swInput" type="number" class="sw-StockWidget_Input" value="10"/>
		<label class="sw-StockWidget_Label" for="swInput">Max Buy Price:</label>
	<button id="swBuy" class="sw-StockWidget_Buy">
		Stock price too high


                * {
	box-sizing: inherit;

.sw-StockWidget {
	box-sizing: border-box;
	font-size: 14px;
	border-radius: 2px;
	overflow: hidden;
	background-color: #d5d5d5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 300px;
	padding: 10px 20px 20px;
	font-family: sans-serif;
	box-shadow: 0 3px 5px -2px #555;

.sw-StockWidget_UserInput {
	display: flex;
	flex-direction: row-reverse;
	margin: 10px 0;
	height: 44px;
	width: 100%;
	align-items: stretch;

.sw-StockWidget_Label {
	display: flex;
	width: 50%;
	color: #777;
	margin-right: 10px;
	align-self: center;
	text-align: center;

.sw-StockWidget_Input {
	border: 0;
	width: 50%;
	font-size: 2em;
	text-align: center;

.sw-StockWidget_Buy {
	appearance: none;
	border: 1px solid #777;
	background-color: transparent;
	width: 100%;
	min-height: 44px;
	font-size: 1em;
	&:focus {
		outline: 0;
	&:active {
		position: relative;
		top: 1px;
	&[aria-disabled="true"] {
		opacity: .4;
	&[aria-disabled="false"] {
		background-color: green;
		color: #eee;


                var swPrice = document.getElementById("swPrice");
var swInput = document.getElementById("swInput");
var swBuy = document.getElementById("swBuy");

function Widget() {
    this.enabled = false;
    this.validInput = false;
    this.maxValue = 10;
    this.marketOpen = false;
    this.livePrice = 10;
    this.observers = [];
    this.buttonText = "Stock price too high";

Widget.prototype.addObserver = function (observer) {

Widget.prototype.notify = function (changes, callback) {
    // Loop through every property in changes and set the data to that new value
    var prop;
    for(prop in changes) {
        // First catch any incorrect assignments of the data
        if(typeof this[prop] == "undefined") {
            console.log("there is no property of name " + prop);
        // We want to exit if the change value is the same as what we already have, otherwise we update the main object with the new one
        if (this[prop] === changes[prop]) {
        } else {
            this[prop] = changes[prop];                

    // Loop through every observer and check if it matches any of the props in changes
    // Do this by filtering the existing array
    var matchedObservers = this.observers.filter(hasSomeOfTheChangedProps);

    // filter invokes this and returns observers that match into the matchedObservers array
    function hasSomeOfTheChangedProps(item) {
        // If the props contains a wildcard 
        if (item.props === "*") {
            return true;
        // Otherwise check if the changed prop is included in the props list
        for(var prop2 in changes) {
            // To ensure we don't quit the entire loop, we want to return true if the prop2 is in item.props. Otherwise we want to keep looping to check each prop and only quit the function by returning once the entire loop has run
            if(item.props.includes(prop2)) {
                return true;
        return false;
    // Now for any observers that care about data that has just been changed we inform them of the changes
    matchedObservers.forEach(function (matchingObserver) {;

var sw = new Widget();

    props: ["livePrice","maxValue"],
    callback: function observeAndSetButton() {
        if (sw.livePrice > sw.maxValue) {
            swBuy.setAttribute("aria-disabled", "true");
            swBuy.textContent = "Stock Price too high";
        } else {
            swBuy.setAttribute("aria-disabled", "false");
            swBuy.textContent = "Buy Now";
		 console.log("observer ran");

swInput.addEventListener("input", function(){
		maxValue: parseFloat(swInput.value),
}, false);

(function loop() {
   var rand = Math.round(Math.random() * (1000 - 500)) + 3000;
   setTimeout(function() {
   }, rand);

(function loop2() {
   var rand = Math.round(Math.random() * (1000 - 500)) + 6570;
   setTimeout(function() {
   }, rand);

function randomPrice() {
	console.log("randomPrice updated livePrice");
	var possibleResponses = [1,2];
	var rand = possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
      if (rand === 1) {
      	sw.notify({livePrice: sw.livePrice + 5});        
      } else {
			sw.notify({livePrice: Math.max(sw.livePrice - 5, 0)});
		swPrice.textContent = sw.livePrice;

function openCloseMarket() {
			marketOpen: !sw.marketOpen,
		console.log("openCloseMarket updated data");
	}, 100);