Skip to content

Instantly share code, notes, and snippets.

@wylieconlon
Created May 22, 2018 18:41
Show Gist options
  • Save wylieconlon/a9d4f81685bc1afdf01e0131e23bddca to your computer and use it in GitHub Desktop.
Save wylieconlon/a9d4f81685bc1afdf01e0131e23bddca to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=a9d4f81685bc1afdf01e0131e23bddca
<!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>
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css","console"]}
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);
.top {
margin-bottom: 20px;
}
.output {
font-weight: bold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment