marshallmurphy

const removeTodo = (i, checked) => {
    if (checked) {
      const newCompletedTodos = [...completedTodos];
      newCompletedTodos.splice(i, 1);
      setCompletedTodos(newCompletedTodos); 
    } else {
      const newTodos = [...todos];
      newTodos.splice(i, 1);
      setTodos(newTodos);
    }

marshallmurphy

const checkboxRow = (todo, i, checked = false) => (
  <Flex
    width='100%'
    justifyContent='space-between'
  >
    <Label
      color='#fff'
    >
      <Checkbox
        checked={checked}

marshallmurphy

const checkboxRow = (todo, i, checked = false) => (
  <Flex
    width='100%'
    justifyContent='space-between'
  >
    <Label
      color='#fff'
    >
      <Checkbox
        checked={checked}

marshallmurphy

const revertTodo = (i) => {
  const todo = completedTodos[i];
  todos.unshift(todo);
  setTodos(todos);

  const newCompletedTodos = [...completedTodos];
  newCompletedTodos.splice(i, 1);
  setCompletedTodos(newCompletedTodos);
}

marshallmurphy

...

<Box width='350px'>
  {todos.map((todo, i) => checkboxRow(todo, i))}
</Box>

// add this -->
<hr 
  color='#fff'
  width='350px'

marshallmurphy

const completeTodo = (i) => {
  const todo = todos[i];
  completedTodos.unshift(todo);
  setCompletedTodos(completedTodos);

  const newTodos = [...todos];
  newTodos.splice(i, 1);
  setTodos(newTodos);
} 

marshallmurphy

const completeTodo = (i) => {
    const todo = todos[i];
    completedTodos.unshift(todo);
    setCompletedTodos(completedTodos);

    const newTodos = [...todos];
    newTodos.splice(i, 1);
    setTodos(newTodos);
  } 

marshallmurphy

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (e) => {
    e.preventDefault();
    if (e.target[0].value.length > 0) {
      const todo = e.target[0].value;
      const newTodos = [...todos];
      newTodos.unshift(todo);
      setTodos(newTodos);

marshallmurphy

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (e) => {
    e.preventDefault();
    if (e.target[0].value.length > 0) {
      const todo = e.target[0].value;
      const newTodos = [...todos];
      newTodos.unshift(todo);
      setTodos(newTodos);

marshallmurphy

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (e) => {
    e.preventDefault();
    if (e.target[0].value.length > 0) {
      const todo = e.target[0].value;
      const newTodos = [...todos];
      newTodos.unshift(todo);
      setTodos(newTodos);