Failing Elements

Buttons do not have an accessible name

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn more.

Form elements do not have associated labels

Labels ensure that form controls are announced properly by assistive technologies, like screen readers.

• 2x console logs in logic.js
• 1x in dom.js

ES6 is very common and does not take too long to learn. Perhaps try converting your functions to ES6

Function demonstration() {
}

const demonstration = () => {
}

Function anotherOne(a) {
}

const anotherOne = a => {
}

function anotherAnotherOne(a, b) {
}

const anotherAnotherOne = (a, b) => {
}

You might want to remove unused code that you just left commented out.

<<< HEAD and >>>>> should not be in your package.json, you have push to master without properly merging. Which is probably a reflection on my teaching you Git. haha

   "requires": {
<<<<<<< HEAD
        "balanced-match": "1.0.0",
=======
        "balanced-match": "^1.0.0",
>>>>>>> 01ebd549e8b95c57c50112764bae4e3e386d8f7e
        "concat-map": "0.0.1"
      }
    },

It's really satisfying when you add a todoI think you followed the design principle from the 1st design burst to make it seem like real life - ink on paper.

Introduce Flexbox
Set basic sizing
Layout list on top of "paper" on "desk"

You background file wood.jpg is 15MB in size. On mobile it can load for one minute for the first time.
Maybe compress it or resize it (it is 8666x5777 pixels).

If you struggled with testing with Tape don't worry so did I. There are other testing frameworks such as Jest (which is very popular) which you might want to take a look at.

You could maybe add what is this project about and add a link there to the published site.

In test.js you have this:

test("check that todos hasn't changed", function(t) {
  const actual = logic.addTodo(testArr, testObj).slice(0, testArr.length);
  const expected = testArr;
  t.deepEqual(actual, expected, "should not change the original todos array");
  t.end();
});

in the above you are using ES5 and ES6, choose one. I've changed the above below to implement es6 only.

test("check that todos hasn't changed", (t) => {
  const actual = logic.addTodo(testArr, testObj).slice(0, testArr.length);
  const expected = testArr;
  t.deepEqual(actual, expected, "should not change the original todos array");
  t.end();
});

Clone repo and prepare

Lines 44-45 logic.js

• When you submit a to-do the text remains in the field - should clear when you submit.

• You can also submit an empty to-do, which you shouldn't be able to.

Your code is very clear and logical and reading it has helped me understand the concepts especially how you update the state using rendering. Thank you!

For instance the below:

todoNode.addEventListener("click", function(e) { var newState = todoFunctions.markTodo(state, todo.id); update(newState); });
You only update the state inside the event listener.

Then you have things like the below outside, which get updated on the DOM when you update state.

if (todo.done) { markTodoButtonNode.textContent = "✔"; todoSpan.style.textDecoration = "line-through"; }
Great job!

I like the background image. Colours are very pretty and good contrast ratios!

Styling of general HTML elements

Bem can be a pain at first and you do not need to adopt all of its teaching but perhaps consider only using classes in the CSS. So no change tag elements or using IDs