Skip to content

Instantly share code, notes, and snippets.

@saraquigley

saraquigley/.block

Created August 3, 2017 22:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saraquigley/7a56dc3183bcf4d5c97cbef6661ee7e8 to your computer and use it in GitHub Desktop.
Save saraquigley/7a56dc3183bcf4d5c97cbef6661ee7e8 to your computer and use it in GitHub Desktop.
Download ZIP
a few of buttons
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- end Bootstrap -->
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#story-buttons {margin-left: 360px; margin-top:40px}
#commentary {margin-top: 100px;left:120px;font-size:36pt; font-family: "monospace";text-align:center;}
</style>
</head>
<body>
<script>
function  dispatchButton(source) {
d3.select("#commentary").text("You selected " + source);
}
</script>
<div id="story-buttons" class="btn-group" role="group" aria-label="questions to be answered">
<button id="thunder" type="button" class="btn btn-default" onClick="dispatchButton('thunder');">Thunder</button>
<button id="lightning" type="button" class="btn btn-default" onClick="dispatchButton('lightning');">Lightning</button>
<button id="hail" type="button" class="btn btn-default" onClick="dispatchButton('hail');">Hail</button>
</div>
<div id="commentary" > </div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment