wylieconlon · May 22, 2018 18:41
diff --git a/index.html b/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>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css","console"]}
diff --git a/script.js b/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);
diff --git a/styles.css b/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);