cleoold · February 6, 2020 06:37
diff --git a/index.html b/index.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>Button</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> 
 </head>

 <style>
    html, body {
        font-family: 'Raleway', sans-serif;
        font-size: 40px;
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        background-color: gold;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: center;        
    }

    #main {
        height: 100%;
    }

    #clickable {
        flex-direction: column;
        position: relative;
    }

    #clickable h1 {
        margin: .5rem;
    }

    #count {
        display: inline-block;
        padding: 0 .5rem;
        line-height: 2rem;
        width: 4rem;
        text-align: center;
    }

    #clickable button {
        height: 2rem;
        font-size: .96rem;
        padding: 0 .1rem;
        width: 1.3rem;
        border: none;
        background-color: rgb(132, 53, 196);
        color: white;
        transition: background-color .4s ease;
    }
    #clickable button:hover {
        background-color: rgb(86, 26, 134);
    }
    #clickable button:active {
        transition: background-color .1s ease;
        background-color: rgb(156, 94, 206);
    }

    .button-area {
        background-color: rgba(255, 255, 255, 0.301);
    }

    #nicejob {
        position: absolute;
        font-size: 18px;
        top: 6rem;
    }
 </style>

 <body>
    <div id="root"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/dist/redux.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/dist/react-redux.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        /** clickable.js*/

        const _Clickable = props => {
            const decr = React.useCallback(() =>
                props.count > 0 &&
                    props.dispatch({ type: 'CLICKABLE_DECREMENT' })
            , [props.count]);
            const incr = React.useCallback(() =>
                props.dispatch({ type: 'CLICKABLE_INCREMENT' })
            , []);

            return (
                <div id="clickable" className="flex" style={props.style}>
                    <h1>Click this</h1>
                    <div className="button-area flex">
                        <button onClick={decr}>-</button>
                            <span id="count">{props.count}</span>
                        <button onClick={incr}>+</button>
                    </div>
                    {props.nicejob && <span id="nicejob">Nice job!</span>}
                </div>
            );
        };

        const Clickable = ReactRedux.connect(
            state => ({
                count: state.clickable.count,
                nicejob: state.nicejob
            })
        )(_Clickable);

        /** store.js*/

        const initState = {
            nicejob: false,
            clickable: {
                count: 0,
            }
        };

        const store = Redux.createStore((state = initState, action) => {
            switch (action.type) {
            case 'CLICKABLE_INCREMENT':
                return {
                    ...state,
                    nicejob: state.clickable.count >= 99 ? true : state.nicejob,
                    clickable: {
                        ...state.clickable,
                        count: state.clickable.count + 1
                    }
                };
            case 'CLICKABLE_DECREMENT':
                return {
                    ...state,
                    clickable: {
                        ...state.clickable,
                        count: state.clickable.count - 1
                    }
                };
            default:
                return state;
            }
        });

        /** index.js*/

        const Main = () => {
            return (
                <ReactRedux.Provider store={store}>
                    <div id="main" className="flex">
                        <Clickable />
                    </div>
                </ReactRedux.Provider>
            );
        };

        ReactDOM.render(
            <Main />, document.querySelector('#root')
        );
    </script>
 </body>

 </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>Button</title>
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
	</head>

	<style>
	html, body {
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	background-color: gold;
	}

	.flex {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	#main {
	height: 100%;
	}

	#clickable {
	flex-direction: column;
	position: relative;
	}

	#clickable h1 {
	margin: .5rem;
	}

	#count {
	display: inline-block;
	padding: 0 .5rem;
	line-height: 2rem;
	width: 4rem;
	text-align: center;
	}

	#clickable button {
	height: 2rem;
	font-size: .96rem;
	padding: 0 .1rem;
	width: 1.3rem;
	border: none;
	background-color: rgb(132, 53, 196);
	color: white;
	transition: background-color .4s ease;
	}
	#clickable button:hover {
	background-color: rgb(86, 26, 134);
	}
	#clickable button:active {
	transition: background-color .1s ease;
	background-color: rgb(156, 94, 206);
	}

	.button-area {
	background-color: rgba(255, 255, 255, 0.301);
	}

	#nicejob {
	position: absolute;
	font-size: 18px;
	top: 6rem;
	}
	</style>

	<body>
	<div id="root"></div>

	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script crossorigin src="https://unpkg.com/[email protected]/dist/redux.js"></script>
	<script crossorigin src="https://unpkg.com/[email protected]/dist/react-redux.js"></script>
	<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

	<script type="text/babel">
	/** clickable.js*/

	const _Clickable = props => {
	const decr = React.useCallback(() =>
	props.count > 0 &&
	props.dispatch({ type: 'CLICKABLE_DECREMENT' })
	, [props.count]);
	const incr = React.useCallback(() =>
	props.dispatch({ type: 'CLICKABLE_INCREMENT' })
	, []);

	return (
	<div id="clickable" className="flex" style={props.style}>
	<h1>Click this</h1>
	<div className="button-area flex">
	<button onClick={decr}>-</button>
	<span id="count">{props.count}</span>
	<button onClick={incr}>+</button>
	</div>
	{props.nicejob && <span id="nicejob">Nice job!</span>}
	</div>
	);
	};

	const Clickable = ReactRedux.connect(
	state => ({
	count: state.clickable.count,
	nicejob: state.nicejob
	})
	)(_Clickable);

	/** store.js*/

	const initState = {
	nicejob: false,
	clickable: {
	count: 0,
	}
	};

	const store = Redux.createStore((state = initState, action) => {
	switch (action.type) {
	case 'CLICKABLE_INCREMENT':
	return {
	...state,
	nicejob: state.clickable.count >= 99 ? true : state.nicejob,
	clickable: {
	...state.clickable,
	count: state.clickable.count + 1
	}
	};
	case 'CLICKABLE_DECREMENT':
	return {
	...state,
	clickable: {
	...state.clickable,
	count: state.clickable.count - 1
	}
	};
	default:
	return state;
	}
	});

	/** index.js*/

	const Main = () => {
	return (
	<ReactRedux.Provider store={store}>
	<div id="main" className="flex">
	<Clickable />
	</div>
	</ReactRedux.Provider>
	);
	};

	ReactDOM.render(
	<Main />, document.querySelector('#root')
	);
	</script>
	</body>

	</html>