fac-17 / abcd-week2-project Goto Github PK

To-Do List

Home Page: https://fac-17.github.io/ABCD-week2-project/

JavaScript 10.10% HTML 87.51% CSS 2.38%

abcd-week2-project's Introduction

ABCD Week 2 : To do app

The project and TDD

The aim of this project is to build a basic To-do app. It will get you started and give you an introduction to unit testing and TDD for client-side code.

Team

Francesca
Emmanuel
Victor
Sarah

Built With

Vanilla Javascript HTML CSS

Goals and User Stories

Enter tasks I need to do into a web page :
- add a new object in the list
View the tasks I have added in the list
Mark tasks as complete
Delete an object from the list
The to-dos to be large enough

Potential stretch goals

Edit my to-dos if the task changes
Click on any part of a to-do to mark it as complete
A visual indication of which to-do I'm about to interact with

Our Journey to create this app

On this project, we decide to mob all together to create the pure functions. As we were all a little bit lost, it was better for us to communicate out loud our thoughts and discuss straight away when we had an idea.

We kinda draw a LOT! But it definitely really helpon the communication inside of the team and for our understanding of the project.

Getting Started

These instructions will get you a copy of the project and running on your local machine for development and testing purposes.

Prerequisites

To start the project on your computer, you need to:

Clone the repository :

git clone https://github.com/fac-17/ABCD-week2-project.git

Install NPM :

npm install

Use NPM to install TAPE on your computer and work through the test file: npm i -D tape and npm i -D tap-spec
Then, to run the test :

npm test

Deployment

You can find the repo of the project on GitHub here.

You can see the project on a live system here

Resources

Founders and Coders Instructions

abcd-week2-project's People

Contributors

Watchers

Forkers

ayub3 frannyfra

abcd-week2-project's Issues

Design

Not sure about the orange text colour on the blue, very difficult to make out and this is mentioned in the accessibility audit. White or something a bit brighter would be easier to make out I think.

Submitting blank to dos!

I'm able to submit blank to dos! Oh no!

Tests are Failing

your tests fail with the error

description: document.getElementsByName('description')[0].value,
                     ^

ReferenceError: document is not defined
    at Object.addTodo (/home/rss/Documents/Coding/FAC-Mentoring/ABCD-week2-project/logic.js:43:22)

This seems to be because you are accessing the dom from within your addTodo function. This makes it impossible to test addTodo without a renderer running within your tests.

You also want to avoid touching the dom within logic.js. Consider switching description to an argument, and simply getting its value in dom.js before you call the function. (Which you actually seem to be trying to do.)

try console logging event.target on line 68 of dom.js to see how you can find the correct value for description.

Design

Nice design + colours, simple and responsive. Maybe too simple? Maybe a header would be good.

Looks great though

Nice Readme

Your readme is nice, however it could be even better with even more gifs.

I know you want to be on the code like this the entire time

The one you have is top quality. but more is always good

Readme

Readme is good and has a nice journey + install instructions are good. May be worth adding in more about how you built the functions, what you struggled with, what you learned?

Jackson 5

You've got a Jackson 5 image in your repo and it's referred to in your HTML but you're not using it!

Refactor JS

In the logic.js files you use a for loop to iterate through the todos array. forEach or map functions might make readability a little easier and (I think) is better practice.

Comments in Code

We had load of these ourselves. There are comments that could be removed to tidy things up in both the .js files.

No line breaks

Very long todos have no line break meaning that the todo will run past the buttons and window borders.

Accessibility / language

The lighthouse accessibility test flags up that the <html> element doesn't have a [lang] attribute:

"If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly."

Hoverable buttons?

I really like how your complete button changes to green when you click it.

Perhaps for a bit more consistency with the other buttons, you could have them do the same or a similar thing. Maybe some hovering?

This article always helps me!
https://www.w3schools.com/css/css3_buttons.asp

gitignore

Very minor point but if you add the json-lock file to the gitignore file it should tidy things up a bit

toggle boolean

In your markTodo function you're toggling a boolean with the code

if (item.done == false) {
    item.done = true
}
    else if (item.done == true) {
    item.done = false
}

this is nice. but you can get it even nicer, and down into one line, with a ternary operator.

item.done ? do something if true : do something if false

Accessibility

According to lighthouse id's aren't unique (the to-do block apparently)

Simplistic and Beautiful

I love the simplistic design, and big title

Border around the separate to dos?

Maybe it would be nice to have a border around each or your to dos? This will just make it clearer to the user that each to do is a separate idea. We added it by just adding a border and a bit of box shadow, too.

Font

Nice font in the input box, this changes to a serif font in the actual to-do. I think consistency between the two would be good?

Cursor: pointer, suggestion

Maybe you could add cursor: pointer to your buttons? Just so that the user is more aware that they can interact with them!

Refactor JS 2

Your marktodo function has a console.log that could be removed. There's also a way of getting the specific object from an array using a callback function (we had to google this but we think it makes it neater and easier.) Once you have the object you can just change the done:true/false key/value pair to it's opposite using the if loop you already have.

Refactor JS 3

(I'm only doing loads of these because we also need to refactor our JS ... it looks great)

Lines 44 and 45 of dom.js could be put on one line, you don't need to have two separate if statements for the 'todo.done == true' value.

Nice Loop

I like you use of for with for (let item of newTodos)

Its a short and simple way to iterate through an array using a for loop.

Example To-do

A single example to-do might be good just to make the layout a little clearer.

Accessibility - CSS Styling

I noticed that you set the input field outline to 0 in CSS.
#input-field:focus {
outline: 0; /* avoids blue shadow when clicking on button */
}

As Oliver mentioned on Wednesday, it's best practice to keep the outline for selected elements to allow for better accessibility. Maybe you could change it to a colour that fits better with your design?

id attributes not unique

Lighthouse says:

[id] attributes on the page are not unique
Failing elements: ul#todo-block

I think what's happening here is you've set <ul id="todo-block"></ul> on line 15 of the <index.html> file.

Then in the dom.js file you're referencing it on line 62:

var todoBlock = document.getElementById("todo-block"); `

But then also setting the same id attribute in line 84:

todoListNode.setAttribute("id", "todo-block");

Could get around this by using class instead of id?

code after return statement

Your deleteTodo functions has the lines

    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);

after the return statement in the function.
You don't really want anything after a return statement in your code, cause the lines will never get run. So you should either move these to before or delete them if they are unnecessary.