Skip to content

Instantly share code, notes, and snippets.

@micahstubbs
Last active April 2, 2017 00:30
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 micahstubbs/8e94f74c7d0a5dec710330574781fda0 to your computer and use it in GitHub Desktop.
Save micahstubbs/8e94f74c7d0a5dec710330574781fda0 to your computer and use it in GitHub Desktop.
stopwatch with d3-component | es2015
license: mit
border: no

an es2015 iteration on the block Stopwatch from @currankelleher


A stopwatch app constructed using d3-component.

The following components are defined and used to construct the app:

  • app
    The top-level app component. This serves as a "container component" that holds the state of the app, and exposes "actions" to children (similar pattern to Redux. This component manages an instance of d3-timer that keeps track of passing time.

  • buttonPanel
    The panel that contains the two buttons. This shows a simple composition pattern in which props are passed through to child components.

  • resetButton
    The button that says "Reset" and invokes the reset action when clicked.

  • startStopButton
    The button that either starts or stops (pauses) the stopwatch when clicked, depending on whether the stopwatch is running or not.

  • button
    A generic Button component, used by both resetButton and startStopButton.

  • timeDisplay
    A display of the current time.

Built with blockbuilder.org

forked from curran's block: Posts with d3-component

<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://unpkg.com/d3@4'></script>
<script src='https://unpkg.com/d3-component@3'></script>
<script src='https://unpkg.com/redux@3/dist/redux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
body {
text-align: center;
margin-top: 75px;
}
.time-display {
color: #3d3d3d;
font-size: 10em;
font-family: mono;
cursor: default;
}
button {
background-color: #7c7c7c;
border: solid 3px #7c7c7c;
border-radius: 11px;
color: white;
padding: 20px 60px;
margin: 20px;
font-size: 58px;
cursor: pointer;
}
button:hover {
border: solid 3px black;
}
button:focus {
outline: none;
}
</style>
</head>
<body>
<script src='vis.js'></script>
</body>
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template
This file has been truncated, but you can view the full file.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment