Git Product home page Git Product logo

gardimy / todo-list Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 370 KB

In this project, I add some functionality to my application to make it interactive. The user will also be able to mark task completion by selecting the corresponding checkbox (or undo it by unchecking the checkbox). The updated tasks list will be stored in local storage.

Home Page: https://gardimy.github.io/Todo-List/dist/

License: MIT License

JavaScript 58.79% HTML 18.65% CSS 22.56%
eslint html lighthouse stylelint webhint css5 javascript luxon webpack

todo-list's Introduction

To do list: Interactive list

Interactive list

πŸ“— Table of Contents

πŸ“–Interactive list

In this project, I add some functionality to my application to make it interactive. The user will also be able to mark task completion by selecting the corresponding checkbox (or undo it by unchecking the checkbox). The updated tasks list will be stored in local storage.

πŸ›  Built With

Tech Stack

This project focuses only on linters and .gitignore. and JS or Server are included in this repo.

Client
Server

Key Features

Use webpack to bundle JavaScript.

  • [Use webpack to bundle JavaScript.]
  • [Use ES6 modules to write modular JavaScript.]
  • [use proper ES6 syntax.]

(back to top)

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

Live Demo

(back to top)

πŸ’» Getting Started

If you are a new developer and would like to have a basic project to start practicing your code or creating your first project Using the most receent version of javaScript ,HTML and CSS : Cloning this project will give you what you need!

To get a local copy up and running, follow these steps: npm run dev or npm start to start this app.

Prerequisites

In order to run this project you need:

  • Have npm installed in your project: curl -qL https://www.npmjs.com/install.sh | sh

Setup

Clone this repository to your desired folder:

https://github.com/Gardimy/Webpack_setup

or

https://github.com/Gardimy/Webpack_setup <-- Only if you have SSH keys configured on your GitHub account.

Install:

run the npm install command in your console.

Usage

To run the linters before committing any changes to your code, execute the following commands:

npx hint . npx stylelint "**/*.scss" <--NOTE: this repo is set up to use with SCSS. If you would like to use CSS, you must replace "**/*.scss" with "**/*.{css,scss}" in line 48 of the .stylelintrc.json file, and run the linter with:

npx stylelint "**/*.{css,scss}" instead.

(back to top)

πŸ‘₯ Authors

πŸ‘€ Gardimy Charles

πŸ”­ Future Features

  • Use webpack to bundle JavaScript.
  • Use proper ES6 syntax.
  • Use ES6 modules to write modular JavaScript.

⭐️ Show your support

If you like this project please give me a star on GitHub.And Don't hesitate to follow me on github, you will have the opportunity to get all updating available for this project.

πŸ™ Acknowledgments

I would like to thank microverse for teaching me this Skills

πŸ“ License

This project is MIT license licensed.

(back to top)

todo-list's People

Contributors

gardimy avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

todo-list's Issues

DRY, KISS, YAGNY check

Hi Gardimy,
Good job so far,😎
After reviewing your code, here are some potential issues and suggestions for improvement:

  • Unused import statement: The code imports addTask from './app.js', but it is not used anywhere in the code. If it's not needed, you can remove the import statement.
  • Function names and organization: The code mixes different functionalities within the populateTodoList function. It would be beneficial to split the code into smaller functions, each responsible for a specific task (e.g., rendering tasks, handling task updates, and event listeners). This helps improve code readability, maintainability and adheres to the Single Responsibility Principle.
  • Direct DOM manipulation: Instead of directly manipulating the innerHTML property of elements like a to-do list, consider using more structured approaches like creating elements using document.createElement and appending them to the DOM. This allows for better control over the HTML structure and helps prevent security vulnerabilities like cross-site scripting (XSS).
  • Redundant code: The updateLocalStorage function is called multiple times within the same function, even though it performs the same operation. It can be called once, at the end of the populateTodoList function, after all the changes have been made.
  • Checkbox event listener: The event listener for the checkbox changes the completed property of the task directly. It would be safer to create a copy of the task object and modify the copy instead of directly modifying the original task. This can help prevent unintended side effects and make the code more robust.
  • Inconsistent naming conventions: The code uses a mix of different naming conventions for CSS classes and JavaScript variables. It's generally recommended to use a consistent naming convention, such as camelCase or kebab-case for JavaScript and kebab-case for CSS classes.
  • Clear button functionality: The clear button event listener calls clearCompletedTasks and then immediately calls updateLocalStorage and populateTodoList. Since clearCompletedTasks already updates the localStorage and repopulates the todo list, these redundant calls can be removed.
  • Lack of error handling: The code assumes that the localStorage operations (getItem and setItem) will always succeed and that the stored data is always valid. It's good practice to include appropriate error handling, such as checking for errors when accessing local storage or parsing JSON data.
  • Lack of validation: There is no validation for the taskId passed to removeTask and data-id attribute of the remove button. It would be wise to validate the taskId and ensure it's a valid index before performing any operations with it.
  • Potential memory leak: The code attaches event listeners to the remove buttons using addEventListener inside the populateTodoList function. When the populateTodoList function is called repeatedly, new event listeners are added to the remove buttons without removing the old ones. This can lead to memory leaks over time. Consider removing existing event listeners before adding new ones.

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.