{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__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; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1MjYzNzM3LCJpYXQiOjE2NzUyNjAxMzcsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.8VCUVEDoIP9wRaydhRVJePLQPdMAGY53GdshWJXn2iBUZaXiohIT0VIlefhI59zGL8G3Vtma_e71mE9Pk5H5mVcsoNbMxOoBgaUlN8zp7ydE_6ztG2lJnuw_K772lxs1Sg-y2COGH-Yx_AbJBcSGFxbcgT1tdAYJrHSi_ejg0Jw15eJlDR7gQ6aSiiuWkUQiYAs5_0wg419lJPjnVKApMAewUTH81usAQFIEKN8pEwlHjIz-RdaCKqi31i5MJUVswWTYFZV54yJ2p70U_oOjHTNJYi0BjDPUN6GuEpX8crP40A2K7S6vZALYmpCa8TZeFCGYGQVqtADqcF3TIkfMAQ"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":37507283,\"user_id\":369687,\"html\":\"<div id='app' class='container'><\\/div>\",\"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\",\"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\",\"js_library\":null,\"created_at\":\"2019-07-03T00:01:44.000Z\",\"updated_at\":\"2022-03-03T04:34:28.913Z\",\"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,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null,\"hashid\":\"RzyBzp\"}"}