Skip to content

Instantly share code, notes, and snippets.

@d0ruk d0ruk/index.html
Last active Jun 27, 2020

Embed
What would you like to do?
bl.ocks.org/d0ruk/9f019002e43043503e9d4b7d6f0b0343
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>react app</title>
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/rc-tooltip@3.7.3/assets/bootstrap_white.css">
<style>
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #ddd;
overflow: hidden;
}
</style>
</head>
<body>
<div id="root""></div>
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
<script src="https://unpkg.com/styled-components@4.4.1/dist/styled-components.js"></script>
<script src="https://unpkg.com/react-countdown-clock@latest"></script>
<script src="https://unpkg.com/rc-tooltip@3.7.3/dist/rc-tooltip.js""></script>
<script type="text/babel" data-plugins="transform-class-properties">
const Tooltip = window["rc-tooltip"];
const Wrapper = styled.div`
position: absolute;
width: 100%;
height: 100%;
text-align: right;
margin-top: 5rem;
`;
const H2 = styled.h2`
color: black;
display: inline-block;
font-size: 3rem;
margin: 0 0.5rem;
`;
const Input = styled.input`
font-size: 3rem;
padding-left: .5rem;
max-width: 10rem;
border: none;
font-family: "Black Ops One", cursive;
`;
const Section = styled.section`
margin: 0.5rem;
`;
const Div = styled.div`
cursor: ${({ hoverable }) => hoverable ? "pointer" : "unset"};
`;
const Button = styled.button`
font-weight: bold;
border: 0;
background: #ddd;
box-shadow: none;
border-radius: 0;
margin: 0 0.2rem;
&:hover {
cursor: cell;
}
`;
const SecondsWrapper = styled.div`
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
& :last-child {
border: 0;
}
`;
const NumberInput = styled.input.attrs(props => ({
type: "text",
onKeyPress: e => {
if (e.charCode === 13) return props.startTimer();
if (!(e.charCode >= 48 && e.charCode <= 57)) {
e.preventDefault();
e.stopPropagation();
return;
}
},
}))`
font-size: 2rem;
max-width: 4rem;
text-align: center;
border: none;
border-right: 1px solid black;
&::-webkit-outer-spin-button,::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
-moz-appearance: textfield;
`;
const SecondsInput = ({ onClick }) => {
const [hours, setHours] = React.useState("");
const [minutes, setMinutes] = React.useState("");
const [seconds, setSeconds] = React.useState("");
function startTimer() {
const totalseconds = [hours, minutes, seconds]
.map(Number)
.reduce((acc, curr, idx) => {
switch(idx) {
case 0: // hours
return acc + (curr * 60 * 60);
case 1: // minutes
return acc + (curr * 60);
case 2: // seconds
return acc + curr;
}
}, 0);
onClick(totalseconds);
}
return (
<SecondsWrapper>
<Tooltip
animation="zoom"
placement="left"
mouseEnterDelay={2}
overlay={<span>ctrl+click to stop<br/>enter to start</span>}
>
<Button onClick={startTimer}>Go</Button>
</Tooltip>
<NumberInput startTimer={startTimer}
placeholder="hh"
maxLength={2}
value={hours}
onChange={({ target: { value }}) => setHours(value)}
/>
<NumberInput startTimer={startTimer}
placeholder="mm"
maxLength={2}
value={minutes}
onChange={({ target: { value }}) => setMinutes(value)}
/>
<NumberInput startTimer={startTimer}
placeholder="ss"
maxLength={2}
value={seconds}
onChange={({ target: { value }}) => setSeconds(value)}
/>
</SecondsWrapper>
);
}
class App extends React.Component {
state = {
name: "Kate",
seconds: 0,
paused: false
};
render() {
return (
<Wrapper>
<Section>
<H2>Hi </H2>
<Input
maxLength={4}
value={this.state.name}
onChange={this.handleAdd}
/>
</Section>
<Section>
{this.state.seconds
? (
<Div
hoverable
onClick={e => {
if (e.ctrlKey) {
return this.setState({ seconds: 0, paused: false });
}
this.setState(({ paused }) => ({ paused: !paused }))
}}
>
<ReactCountdownClock
seconds={this.state.seconds}
showMilliseconds
color="rebeccapurple"
alpha={0.6}
size={200}
weight={7}
paused={this.state.paused}
font='"Black Ops One", cursive'
onComplete={() => this.setState({ seconds: 0 })}
/>
</Div>
)
: <SecondsInput onClick={seconds => this.setState({ seconds })}/>
}
</Section>
</Wrapper>
);
}
handleAdd = ({ target: { value: name } }) => {
this.setState({ name });
};
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.