To Do list: Add and Remove Functionality

  • By Mong'are
  • Last update: Mar 29, 2022
  • Comments: 6

To Do list: Add and Remove Functionality

This is the Third milestone of the To Do List project with the final features of the to-do list project.

Project screenshot

screenshot

Additional description about the project and its features.

Live Demo

Live Demo Link

Built With

  • HTML
  • CSS
  • JAVASCRIPT
  • Webpack

Using it Locally

  • Clone the project from GitHub here
  • Run the following commands as listed in your terminal:
  • npm install
  • npm run build
  • npm start

How to Setup

You can simply clone or download this repository, and use your favorite browser or code editor to run this program.

  • To open the project after download, simply double click the index.html file

  • To open this project using vs code ( for this example) or your favorite code editor, you can follow the guide below:

in your cmd or command line navigate to where this project is located, then;

cd to-do-list

thereafter run

code .

Authors

👤 Author

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Design idea by web.archive.org.

📝 License

This project is MIT licensed.

Github

https://github.com/Mosams/to-do-list

Comments(6)

  • 1

    Add the delete, remove and add functionality

    The following features were added to the To-do project through the add-remove-items branch:

    • Remove all hardcoded items from the tasks array.
    • Create a new JavaScript file for the new functionality.
    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for editing task descriptions.
    • Implement a function for deleting a task (remove an element from the array).
    • Implement a function for the "Clear all completed" button (use filter() method).
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.
    • Saved to local storage
  • 2

    Interactive list

    The following features have been implemented in this (Interactive list) branch:

    • Add a new JavaScript file and import it as a module
    • Add event listener to the checkbox (change).
    • Update items object's value for completed key upon user actions
    • Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.
    • Update the readme.md file
  • 3

    The to-do-list project structure

    The following changes to the project has been implemented in this branch (list-structure)

    • Incorporated webpack into the repository.
    • Added linters files into the repository.
    • Add the index.html file with the backbone for the list generated dynamically.
    • Add the styles.css file for the styling of HTML elements.
    • Add index.js containing an array displayed to the DOM through a function
    • project served by a webpack dev server.
  • 4

    Peer to peer morning code review

    Your code looks great and working properly. Great job. I would suggest that you should put all your js files in a folder to keep it more organized. Keep it up!

  • 5

    HTML and CSS best practices

    After an intensive review of my CSS and HTML files, I was not able to come up with any issues.

    • There was use the appropriate tags for each element
    • Lines of code were the required length.
    • There were no blank lines and indentation
    • All HTML elements were closed.
    • Use lowercase for elements and attribute names.
    • I did always quote attribute values.
    • Used space-less equal signs.
    • Did not use inline styles. Keep your style definition in a separate CSS file.
    • Always used the class attribute for multiple elements (do not use ID selector for multiple elements).
    • Did not commit old pieces of code as inline comments
  • 6

    JavaScript best Practices

    The following are the issues found after the review of my Code:

    • I used an alert in my code. This is against JavaScript best practices. It is advised to use custom modal instead.

    https://github.com/Mosams/to-do-list/blob/fa8344fd155e089998ffff52bf7225325baad122/src/checkStatus.js#L67-L71