d0ruk · November 28, 2023 11:04
diff --git a/index.html b/index.html
 <!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/[email protected]/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/[email protected]/dist/styled-components.js"></script>
    <script src="https://unpkg.com/react-countdown-clock@latest"></script>
    <script src="https://unpkg.com/[email protected]/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>
	<!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/[email protected]/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/[email protected]/dist/styled-components.js"></script>
	<script src="https://unpkg.com/react-countdown-clock@latest"></script>
	<script src="https://unpkg.com/[email protected]/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>