Giter VIP home page Giter VIP logo

week3-jicg's Introduction

CIJG

What a to do

Welcome to the README for our to do list website.

The site

Our site

Here you can:

  • enter things to do by writing text and clicking Add or pressing enter
  • mark them as done
  • delete them (but please be sure, they're not coming back)

Testing, 1, 2

This site was build using Test Driven Aware Development, by agreeing integration tests from our user stories and building unit tests from there.

For example, for deleting todo items:

console.groupCollapsed("TEST: Can delete items")

test('every todo has a delete button', assert => {
    const todos = Array.from(document.querySelectorAll('.todo'));
    let assertion = todos.every(todo =>
    todo.querySelector('.todo__delete'))
    //check every list item has button
    assert.equal(assertion, true)
})

test('clicking the delete button deletes a todo item', t => {
    const startingLength = list.children.length;
    document.querySelector('.todo__delete').click();
    const endLength = list.children.length;
    //check clicking delete button reduces list by one item
    t.equal(startingLength - 1, endLength);
})

test('pressing the delete button deletes the correct todo', t => {
    let todos = document.querySelectorAll('.todo')
    const startingLength = todos.length
    const randomIndex = Math.floor(Math.random() * todos.length)
    const removableElement = todos[randomIndex]
    removableElement.remove();
    todos = Array.from(document.querySelectorAll('.todo'))
    const assertion = !todos.includes(removableElement) && todos.length === startingLength - 1;
    //check a random list item is removed if its delete button is clicked
    t.equal(assertion, true);
})


console.groupEnd("TEST: Can delete items")

Authors

week3-jicg's People

Contributors

ivo-evans avatar glrta avatar jackherizsmith avatar chloeh24 avatar

Watchers

D Sofer avatar James Cloos avatar

Forkers

glrta chloeh24

week3-jicg's Issues

filter doesn't work

Made some progress to help you fix the filter bug, though not completely fixed:


//we tried to add a filter but our brains stopped working
filterButton.onclick = () => {
  console.log("hi");
  const checkedItems = document.querySelectorAll('.todo__text--done');//document.querySelectorAll("label");
  if (filterButton.checked === true){
    console.log(checkedItems);
    for (let i=0; i < checkedItems.length; i++){
      console.log(checkedItems[i]);
      checkedItems[i].classList.add('hide');
    }  
  }
  // else{
  //   for (let i=0; i < checkedItems.length; i++){
  //     checkedItems[i].classList.remove('hide')
  //   }  
  // }
};

Great testing

I like how the tests are grouped within the user stories, the tests within those groups are thorough and work well for TTD

Nice work!

Can tasks be removed?

  • there should be a delete button in each item added
  • delete button must be clickable
  • item should be removed from the list when delete button is clicked

Accessibility

I love that I don't need to click on the checkbox, the whole container is clickable, and you receive feedback on what you are hovering on

Body positioning

You've absolutely positioned and translated your <body> in order to center everything. This has the unfortunate side-effect of cutting off the top and bottom when the todo list gets longer than the viewport height.

A safer way to center would probably be using grid or flexbox

Tidy up code

  • use prettier on all code
  • apply consistent naming conventions to classes, selectors used in querySelector, and javascript variable names

README

  • Overview of what site does

Accessibility

Great that you have labeled most of your inputs but the main input field (where you write your todo) is missing one and it feels quite important!

I'm assuming that's because you don't want to display it. In that case, an option would be having a label and hiding it visually so at least a screen reader would detect it. Take a look here:
https://www.w3.org/WAI/tutorials/forms/labels/

Checkbox - Can't select

When navigating the page with my keyboard I was unable to hit the enter key to select the checkbox.

We had the same issue! Here's a code snippet of the fix (sorry for the spoiler!)

    checkbox.addEventListener("keypress", function(e){
        if(e.which === 13){
            this.checked = !this.checked;
        }
    });

Can tasks be marked as done?

  • There should be a checkbox next to every todo
  • checkboxes next to todos should be clickable
  • there should be a visual demonstration that a todo's checkbox has been clicked
  • add a strikethrough style for finished todos
  • add a strikethrough style for finished todos
  • click on label to mark todo as completed

Write valid tests for functions that add todo list items

This is to ensure our tests are passing as we continue to develop the site

  • can the user input an item
  • the submit button does not do anything if there is no text in the input field
  • when you press the submit button a new todo appears on the end of the list
  • input field should return to blank after item is added

HTML skeleton

  • Set up file with basic HTML
  • Create a template element

Loads of tests

You clearly spent a lot of time writing tests! I really appreciate that, so thank you ๐Ÿ˜

Project Board

great use of the project board!

  • Nice use of tags,
  • Liked the idea of having a Live Pull Requests section

The amount of tests!

Testing was clearly the main learning objective in this week's project and I can see you guys spent a lot of time on it. I'm actually learning a lot from your scripts - super well done!

Screenreader users

  • can it be used with only a screenreader?
  • screenreaders should be able to clearly distinguish between todo content, todo buttons, the input field and the submit button
  • when using a screen reader, it should be clear both what a button does and what todo it is related to.
  • screenreaders should be able to match up todos with the correct buttons
  • contrast colors

Can tasks be filtered?

  • two modes can be toggled between (show / hide completed items)
  • list items can be selected if they are checked
  • selected items can be manipulated in the DOM (e.g. assigned CSS styling / moved to bottom of the list)

Labels and checkboxes

todoLabel.classList.toggle("todo__text--done");

You don't need to toggle a class with JS to visually "check" the label.

You can do this with just CSS since there's an input:checked pseudo-selector. You can combine this with one of the sibling combinator selectors to style the element following the checked input. Something like: input:checked + label { text-decoration: line-through }

Nailed it!

Really nice work, impressive that you completed the main functionality and it looks great too! ๐Ÿ’ฅ ๐Ÿ’…

todo list box problem

When there's more than 5 tasks, the top and bottom get cut off. Maybe use flexbox instead or since it's only one box, set the position to be fixed and adjust max-height?

Love your design!

Great job on your project! love your design and the app logic works well. I really like the hover effect on the list items.

CSS Styling

  • has a theme
  • nice to use
  • intuitive
  • styled checkboxes with :before pseudo elements

voice extension

  1. Does not read list text, only checkbox so when I tab though the app, I don't know what the lists are for only whether its ticked or not

  2. When I click enter when adding a list item it says the list item is deleted

Can tasks be added to the list?

  • can the user input an item
  • the submit button does not do anything if there is no text in the input field
  • when you press the submit button a new todo appears on the end of the list
  • Input field should return to blanck after item is added

Use app without a mouse

  • each element can be accessed with the keyboard
  • It is obvious what key to press to delete a todo and to mark one as done
  • The order of items when tabbing through them is intuitive

Screen reader issues

When tabbing through the page the checkboxes aren't labelled properly so arent read out correctly.

Testssss!

You did such a good job of testing! Seriously strong effort. We (FAC 17) didn't take this approach to testing so it was also super interesting to look at, thanks!

Compliments

  • nice read me
  • looks beautiful -- pretty hover
  • buttons nice and large, very accessable (for motor impairments) <- this is great!
  • nice use of aria-labels on buttons

Multiple event listeners on todo

week3-JICG/script.js

Lines 33 to 43 in 8c711cb

todo.addEventListener("click", event => {
if (event.target.tagName === "INPUT") {
todoLabel.classList.toggle("todo__text--done");
}
});
domFrag.querySelector('.todo__text').textContent = userInput;
todo.addEventListener('click', (event) => {
if (event.target.tagName === "BUTTON") {
event.currentTarget.remove()
}
})

You've added multiple "click" listeners to the todo <li>. Since you're immediately checking what element was actually clicked on it would make more sense to add the listeners directly to the relevant elements (e.g. the checkbox and the delete button).

This would also be more accessible, since the list item isn't focusable or usable via keyboard (whereas checkboxes and buttons are by default).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.