fac-11/week2-baja

Team BAJA week 2 to do app using TDD

week2-baja's Issues

Refactor tests to be pure

Mobile responsiveness could be improved

Currently the todo elements are bunching up and overlapping over each other.

HTML5 outliner shows that body is untitled

Runs the comment 1. Untitled BODY

Maybe the todo input and the list of todos should have different titles to explain what's on the page.

create a 'markToDo' function using TDD

Should leave the input argument todos unchanged
In the new todo array, all elements will remain unchanged except the one with id: idToMark
This element will have its done value toggled
Consider using: array.map

Add information to Readme

• needs additional info in DOM and Style section
• learnings can be added to

Comment out first three todos provided in state

This is nit-picky because I'm struggling to find fault, but I think that the first three todos they've provided are meant for testing - when using a todo app we don't want placeholders, so you might want to consider commenting them out.

https://github.com/FAC-11/week2-baja/blob/master/dom.js#L10-L12

Checkbox floating outside your list items

Tab controls

Maybe think about enabling the highlight on focus, especially for your input. Also you cant tick/untick the check boxes using tab controls.

Add placeholder text to your input message field

This is more of a suggestion really, but you could add an attribute of "placeholder" to your input message box to prompt the user to write something, which could make your app more intuitive and easy to use.

https://github.com/FAC-11/week2-baja/blob/master/index.html#L12

Mark todo list is not showing after refreshing

Controls and media elements should have labels

Your input 'description' needs to have a label

Mark completed 'tasks' in DOM

User story:
As a disorganised person I want to:
-mark tasks as complete so that I can focus on the tasks I have left

Would be good if you could click anywhere on the todo to mark it

As currently we can only click on the small checkbox.

'To-Do' list in DOM displays large

User story:
As a disorganised person I want to:
-the to-dos to be large enough so that I don't hit the wrong one with my thumb

var toDoOther camelcase is slightly off

This is EXTREMELY pedantic but I noticed your var toDoOther in your test.js file has 'toDo' rather than 'todo' like all your other vars.....

I'm really just trying to find any issue.

Create 'addToDo' function using TDD

The should leave the input argument todos unchanged
Returns a new array, it should contain todos with the newTodo added to the end.
Adds an id to the newTodo. You can use the generateId function to create an id.
should consider using: array.concat

text remaining in input area after submitting

when submitting an item to a list, the text remains in the tab, where you have to delete it to add a new item to the list.

Create 'deleteToDo' function using TDD

This should leave the input argument todos unchanged
Will return a new array, this should not contain any todo with an id of idToDelete
Consider using: array.filter

Add styling to site

Include:

• full width todos
• fixed submit bar
• add placeholder text

Stretch: Consider introducing a method that prevents people entering an empty string

improve UX by avoiding frustration with accidentally added input

Take 'todo' input from DOM and add to js file

User story:
As a disorganised person I want to:
-enter tasks I need to do into a web page so that I don't forget them

Unused + weird creation of variable newState in function createTodo

https://github.com/FAC-11/week2-baja/blob/master/dom.js#L47

Site has accessibility tags

re-comment DOM.js file explaining method

To allow readability lets add comments to the file so that it will be easier to read & understand

Stretch: Once new todo is added the form input should automatically refresh as empty

should improve UX by saving user time when wanting to add multiple todos at once

human language not indicated in the html file

The web page should have the content's human language indicated in the markup.
e.g. html lang = en.

Add 'to do list' to the DOM

User story:
As a disorganised person I want to:

• view the tasks I have added in a list so that I can plan my day

Think about using logic.js file to ensure separation DOM & Logic

Currently we are turning the inputted string into a object within the DOM file - perhaps we should consider having this in logic file to keep things tidy? L50: + var newState = todoFunctions.addTodo(state, { description: description }); // ?? change this!

relates issue #3