{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjQyNzYxMTUzLCJpYXQiOjE2NDI3NTc1NTMsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.Jbc584YO7aizph9l4XdQWpkLw8ukmaafm1G4LZA4apDL5g7yvd9VlP7TgT_4igrnWTbIqSJMsvT4l7TIu_MerzQVi1nD1Le43dNz9KoznRQQdlXGozs4vKAFvL4dFggs-EDivpLrqCRbamW_yK0AqgxmqSZDWJA3rdD82MF1L6_8LuwlYEFQleVyc7UCHYgCJWPoHi0DQdR1x46DuJmaNcjrRtZLoorJkJGDF-BZuiYInXY3r3HsJ3TXEHaJNXpjWTA9vVrk_ZMz5xaahMQDp6szPd0JRT4W7TdeKr9CHdn0CmuPpbyNOn8tx5a6hK4aYY38TWu1gKTNhEJ5qjeuZw"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"USER","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":null,"teams":[],"__typename":"User"}}},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__item":"{\"id\":37507283,\"user_id\":369687,\"html\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\">\\n <title>React Todo App<\\/title>\\n<\\/head>\\n<body>\\n <div id='app' class='container'><\\/div>\\n<\\/body>\\n<\\/html>\",\"css\":\"* {\\n box-sizing: border-box;\\n padding: 0;\\n margin: 0;\\n}\\n\\nbody {\\n background: rgb(150,28,251);\\n background: linear-gradient(0deg, rgba(150,28,251,1) 0%, rgba(210,51,149,1) 50%, rgba(247,126,76,1) 100%);\\n color: hsl(280, 50%, 40%);\\n font-family: 'Fredoka One', Impact, sans-serif;\\n\\n \\n height: 900px;\\n height: 100vh;\\n max-width: 100vw;\\n width: 100%;\\n}\\n\\n.app {\\n display: grid;\\n grid-template-rows: auto auto auto;\\n grid-gap: 1.5em;\\n margin: 2em 4vw;\\n}\\n\\n.app__heading {\\n font-size: 4em;\\n box-shadow: 0 0;\\n color: white;\\n text-align: center;\\n white-space: nowrap;\\n}\\n\\n.input {\\n background: white;\\n border-radius: 10px;\\n box-shadow: -8px 9px 8px hsla(0, 0%, 0%, 20%);\\n color: #d23395;\\n display: flex;\\n font-size: 2em;\\n font-weight: bold;\\n align-items: center;\\n justify-content: center;\\n padding: 1.5em;\\n -webkit-flex-wrap: wrap;\\n flex-wrap: wrap;\\n}\\n\\n.input__label {\\n margin-right: 20px;\\n order: 0;\\n}\\n\\n.input__textbox {\\n color: #d23395;\\n flex: 1;\\n font-size: 1em;\\n order: 1;\\n padding: .5em;\\n}\\n\\n.todo-container {\\n display: grid;\\n grid-gap: 1.5em;\\n grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));\\n}\\n\\n.todo {\\n background: white;\\n box-shadow: -8px 9px 8px hsla(0, 0%, 0%, 20%);\\n border-radius: 10px;\\n cursor: pointer;\\n outline: none;\\n padding: 2em 2em 2.8em;\\n text-align: center;\\n position: relative;\\n}\\n\\n.todo:hover {\\n background: hsl(300, 100%, 85%);\\n}\\n\\n.todo--done {\\n background-color: hsl(50, 100%, 75%);\\n text-decoration: line-through;\\n}\\n\\n.todo__btn {\\n border: none;\\n background-color: #d23395;\\n color: white;\\n cursor: pointer;\\n font-size: 1.5em;\\n height: 30px;\\n width: 30px;\\n border-radius: 5px;\\n float: right;\\n padding: 3px;\\n position: absolute;\\n right: 10px;\\n top: 10px;\\n z-index: 2;\\n}\\n\\n.todo__btn:hover {\\n background: magenta;\\n}\\n\\n.todo__content {\\n margin-top: 15px;\\n}\\n\",\"parent\":0,\"js\":\"\\/* Does not implement Hooks *\\/\\n\\n\\n\\/* Main app container *\\/\\nclass App extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n todos: [\\n {name: 'Get Milk 🥛', id: 'todo-hththt', done: false},\\n {name: 'Buy Corn 🌽', id: 'todo-tttnnn', done: false},\\n {name: 'Acquire Carrot 🥕', id: 'todo-cccooo', done: false},\\n {name: 'Mix Ingredients 🥣', id: 'todo-poopoo', done: false}\\n ]\\n };\\n }\\n makeTodo = (name,id) => {\\n const newTodo = ({name, id, done: false});\\n this.setState({todos: [...this.state.todos, newTodo]});\\n }\\n removeTodo = id => {\\n const newTodos = this.state.todos.filter(todo => (\\n todo.id !== id\\n ));\\n this.setState({todos: newTodos});\\n }\\n toggleDone = id => {\\n this.setState(prevState => ({\\n todos: prevState.todos.map(\\n todo => todo.id == id ? todo.done ? {...todo, done: false} : {...todo, done: true} : todo\\n )\\n }));\\n }\\n render() {\\n const {todos} = this.state;\\n return (\\n <div className='app'>\\n <Heading \\/>\\n <Input makeTodo={this.makeTodo}\\/>\\n <TodoContainer todos={todos} removeTodo={this.removeTodo} toggleDone={this.toggleDone}\\/>\\n <\\/div>\\n );\\n }\\n}\\n\\n\\n\\/* Heading *\\/\\nfunction Heading() {\\n return <h1 class='app__heading'>React Todo App<\\/h1>\\n}\\n\\n\\n\\/* Input todo *\\/\\nclass Input extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {text: ''};\\n }\\n keyGen = () => {\\n return ('todo-xxxxxx')\\n .replace(\\/x\\/g,x=>(Math.floor(Math.random()*36))\\n .toString(36));\\n } \\n handleChange = e => {\\n this.setState({text: e.target.value});\\n }\\n onSubmit = e => {\\n e.preventDefault();\\n const newId = this.keyGen();\\n this.props.makeTodo(this.state.text.trim(),newId);\\n this.setState({text: ''});\\n }\\n render() {\\n return (\\n <form className='input' onSubmit={this.onSubmit} id='submit-todo'>\\n <label htmlFor='new-todo' className='input__label'>Enter a new todo: <\\/label>\\n <input\\n className='input__textbox'\\n id='new-todo'\\n ref={this.newTodo}\\n type='text'\\n placeholder='New todo'\\n onChange={this.handleChange}\\n value={this.state.text}\\n \\/>\\n <\\/form>\\n );\\n }\\n}\\n\\n\\n\\/* Todo box container *\\/\\nclass TodoContainer extends React.Component {\\n constructor(props) {\\n super(props);\\n }\\n render() {\\n const [...todos] = this.props.todos;\\n const poo = todos.map(({name,id,done}) => (\\n <Todo todo={name} key={id} id={id} done={done} toggleDone={this.props.toggleDone} removeTodo={this.props.removeTodo}\\/>\\n ));\\n return(<div className='todo-container'>{poo}<\\/div>);\\n }\\n}\\n\\n\\n\\/* Generate todo box *\\/\\nclass Todo extends React.Component {\\n constructor(props) {\\n super(props);\\n }\\n toggleDone = () => {\\n this.props.toggleDone(this.props.id);\\n }\\n onClickClose = () => {\\n this.props.removeTodo(this.props.id);\\n }\\n render() {\\n return (\\n <div role='button' tabindex='0' className={this.props.done ? 'todo todo--done' : 'todo'} onClick={this.toggleDone}>\\n <TodoContent \\n todo={this.props.todo}\\n \\/>\\n <button\\n className='todo__btn'\\n type='button'\\n onClick={this.onClickClose}>\\n <svg viewBox=\\\"0 0 30 30\\\">\\n <path fill=\\\"white\\\" d=\\\"M7 4l8 8 8-8 3 3-8 8 8 8-3 3-8-8-8 8-3-3 8-8-8-8 3-3z\\\"\\/>\\n<\\/svg>\\n <\\/button>\\n <\\/div>\\n )\\n }\\n}\\n\\nfunction TodoContent(props) {\\n return (\\n <>\\n <h2 className='todo__content'>{props.todo}<\\/h2>\\n <\\/>\\n )\\n}\\n\\n\\nReactDOM.render(<App\\/>, document.getElementById('app'));\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2019-07-03T00:01:44.000Z\",\"updated_at\":\"2019-09-24T04:44:16.000Z\",\"session_hash\":\"63abc8fd56998a5c5cf3418b2720be80\",\"title\":\"React Todo App\",\"description\":\"It's your standard to-do app. Trying to use React best practices, though not yet hooks.\",\"slug_hash\":\"RzyBzp\",\"head\":\"<link href=\\\"https:\\/\\/fonts.googleapis.com\\/css?family=Fredoka+One&display=swap\\\" rel=\\\"stylesheet\\\">\",\"private\":false,\"slug_hash_private\":\"f202879677493d318d57bc7efcc9f598\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"19538bb4-d816-4e69-83a3-a1215c5837b6\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":null,\"deleted_at\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"pen_hash\":null,\"hashid\":\"RzyBzp\"}"}