wylieconlon/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="top">
            Current value of color:
            <span class="output"></span>
        </div>

        <div class="top">
            Try using the console below to assign the value:
            <pre>color = 'gray';</pre>
        </div>

        <div class="bottom">
            <button class="red">Assign color to red</button>
            <button class="blue">Assign color to blue</button>
            <button class="green">Assign color to green</button>
        </div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css","console"]}

## script.js
var color;

$('.red').click(function() {
    color = 'red';
});

$('.blue').click(function() {
    alert('Blue does not work yet!');
});

$('.green').click(function() {
    alert('Green does not work yet!');
});

/* This code updates the text based on the variables above! */

setInterval(function() {
    if (color) {
        $('.output').text(color);
    } else {
        $('.output').text('Has not been assigned');
    }
}, 20);

## styles.css
.top {
    margin-bottom: 20px;
}

.output {
    font-weight: bold;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<div class="top">
	Current value of color:
	<span class="output"></span>
	</div>

	<div class="top">
	Try using the console below to assign the value:
	<pre>color = 'gray';</pre>
	</div>

	<div class="bottom">
	<button class="red">Assign color to red</button>
	<button class="blue">Assign color to blue</button>
	<button class="green">Assign color to green</button>
	</div>
	</body>
	</html>
	var color;

	$('.red').click(function() {
	color = 'red';
	});

	$('.blue').click(function() {
	alert('Blue does not work yet!');
	});

	$('.green').click(function() {
	alert('Green does not work yet!');
	});

	/* This code updates the text based on the variables above! */

	setInterval(function() {
	if (color) {
	$('.output').text(color);
	} else {
	$('.output').text('Has not been assigned');
	}
	}, 20);