Web-pack based Todo-List Website built using HTML, CSS and JavaScript. Tested Using Jest.

Saadat Ali

Last update: Mar 31, 2022

Overview

To-DO List

Live Link

Additional description about the project and its features:

Built With

HTML and CSS
Javascript
HTML & CSS3 & JavaScript Linters
Github and GithubFlow
Webpack

Getting Started

To Create A To-DO List from this Repository feel free to contact me.

How to run in your local machine

Copy the URL: [email protected]:Saadat123456/To-do-List.git"
In your terminal, go to the directory you want to clone the repository.
Use the command: git clone [email protected]:Saadat123456/To-do-List.git
Open index.html file
Run npm install in the terminal to install node modules
Execute npm run dev in terminal to build the development files
To start a server run npm start and the server would be started on port 8080
To Add the new task just enter the task description in the input field and press enter.
To Edit the task click on the three task on the right side of the task for a while and it would become editable.

Authors

👤 Saadat Ali

GitHub: @githubhandle

🤝 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

Microverse Team

📝 License

This project is MIT licensed.

Comments

Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump node-forge from 1.2.1 to 1.3.0
Bumps node-forge from 1.2.1 to 1.3.0.

Changelog

Sourced from node-forge's changelog.

1.3.0 - 2022-03-17

Security

Three RSA PKCS#1 v1.5 signature verification issues were reported by Moosa Yahyazadeh ([email protected]).

HIGH: Leniency in checking digestAlgorithm structure can lead to signature forgery.

The code is lenient in checking the digest algorithm structure. This can allow a crafted structure that steals padding bytes and uses unchecked portion of the PKCS#1 encoded message to forge a signature when a low public exponent is being used. For more information, please see "Bleichenbacher's RSA signature forgery based on implementation error" by Hal Finney.

CVE ID: CVE-2022-24771

GHSA ID: GHSA-cfm4-qjh2-4765

HIGH: Failing to check tailing garbage bytes can lead to signature forgery.

The code does not check for tailing garbage bytes after decoding a DigestInfo ASN.1 structure. This can allow padding bytes to be removed and garbage data added to forge a signature when a low public exponent is being used. For more information, please see "Bleichenbacher's RSA signature forgery based on implementation error" by Hal Finney.

CVE ID: CVE-2022-24772

GHSA ID: GHSA-x4jg-mjrx-434g

MEDIUM: Leniency in checking type octet.

DigestInfo is not properly checked for proper ASN.1 structure. This can lead to successful verification with signatures that contain invalid structures but a valid digest.

CVE ID: CVE-2022-24773

GHSA ID: GHSA-2r2c-g63r-vccr

Fixed

[asn1] Add fallback to pretty print invalid UTF8 data.

[asn1] fromDer is now more strict and will default to ensuring all input bytes are parsed or throw an error. A new option parseAllBytes can disable this behavior.

NOTE: The previous behavior is being changed since it can lead to security issues with crafted inputs. It is possible that code doing custom DER parsing may need to adapt to this new behavior and optional flag.

[rsa] Add and use a validator to check for proper structure of parsed ASN.1 RSASSA-PKCS-v1_5 DigestInfo data. Additionally check that the hash algorithm identifier is a known value from RFC 8017 PKCS1-v1-5DigestAlgorithms. An invalid DigestInfo or algorithm identifier will now throw an error.

NOTE: The previous lenient behavior is being changed to be more strict since it could lead to security issues with crafted inputs. It is possible that code may have to handle the errors from these stricter checks.

... (truncated)

Commits

6c5b901 Release 1.3.0.

0f3972a Update changelog.

dc77b39 Fix error checking.

bb822c0 Add advisory links.

d4395fe Update changelog.

a4405bb Improve signature verification tests.

aa9372d Add missing RFC 8017 algorithm identifiers.

3f0b49a Fix signature verification issues.

c20f309 Adjust remaining length.

e27f612 Remove unused option.

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Testing To Do list: part 2
Project requirements

Use jest framework for testing.

Create a test file(s) ([..].test.js) for a file(s) containing the following functions:

a function for editing the task description.

a function for updating an item's 'completed' status.

the "Clear all completed" function.

Use the mock storage object you have created in Part 1 of this project to mock the localStorage updates.

Mock the HTML elements to test DOM manipulation functions.

Make sure you group your tests using the description() method.
opened by Saadat123456 0
Test Add and Remove Functionality of Todo List
Project requirements

This is a pair-programming project. Please decide whose project will you use for testing.

Use jest framework for testing.

Create a test file ([..].test.js) for a file containing the add item and delete item functions that you want to test.

Take a look at each of these functions. Are they pure functions? If the answer is "yes" then writing tests for them should be straightforward. Some of those functions however will update localStorage and manipulate the DOM. For those, you will need to use mocks:

Mock a storage object to "imitate" localStorage operations (only if you are using jest < 24.x, in newer versions localStorage is mocked automatically).

Mock HTML to test if add/delete functions add or remove exactly one <li> element to/from the list in the DOM.

Make sure you group your tests using the describe() method.
opened by Saadat123456 0
Interective list
Project requirements

Add a new JavaScript file and import it as a module:

it will contain methods related to the status updates (completed: true / false).

Add event listener to the checkbox (change).

Update items object's value for completed key upon user actions.

Implement a function for the "Clear all completed" button (use filter() method).

Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.
opened by Saadat123456 0
Add and remove functionality
Project requirements

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 deleting a task (remove an element from the array).

Implement a function for editing task descriptions.

By default new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal to 5).

Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique.

All changes to the To-Do List should be saved in local storage.
opened by Saadat123456 0
To Do list: list structure
Project requirements

Set up a new project with webpack that is based on the webpack exercise you have already completed.

Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (<div> or <ul> element). The index.html file must be set as a template using the HTML Webpack Plugin.

Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys:

description [string].

completed [bool].

index: [number].

Write a function to iterate over the tasks array and populate an HTML list item element for each task.

On page load render the dynamically created list of tasks in the dedicated placeholder. The list should appear in order of the index values for each task.

Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.
opened by Saadat123456 0
Peer to peer code review
Good job @Saadat123456

Your project looks amazing. to highlight:

You created a good testing environment.

Your code is free of linter errors.

You have grouped your test which increases the readability and understandability.

There are just two minor things that you can improve: 1- instead of using querySelector('#list').querySelectorAll('#li') you can use querySelectorAll('#list li') which is shorter. 2- for testing clear all completed tasks functionality, instead of checking whether your list is empty or not, you can test if there is any completed task in your list or not.
opened by Behnam1369 1
DRY, KISS, and YAGNI
The Code Shown below is performing the same function. A new Function can be made to fix the DRY issue. https://github.com/Saadat123456/To-do-List/blob/91672b431cbac98112e7a7a5f49879b1bba5fc4b/src/js/todolist.js#L124-L126 https://github.com/Saadat123456/To-do-List/blob/c7a305fc5e17a9ab3e79264ee54a0eccb9244051/src/js/todolist.js#L135-L137
opened by Saadat123456 0
JavaScript Clean Code
Lengthy Function: The Function can be subdivided into smaller functions that describe the task that they perform. A function should do one functionality at a time.

Callbacks Not Defined Seperately: The callbacks are not defined separately so that each function do one task at a time.

Do not use console.log('') in the commit: console.log() should only be used for debugging purposes.
opened by Saadat123456 0
Peer to Peer Code Review Module 2 week 2
Hi @Saadat123456

Congratulations on the project!

Design is looking great, very close to the original.

Functionality is good.

Creative implementation of UI.

Code looks very organized. Suggestion: Instead of making the classes display: none onLoad, maybe it would be good to make them display: none by default on CSS and only make javascript remove or change that when requested.

Keep it up! 🚀
opened by Nizamuddin4493 0

Web-pack based Todo-List Website built using HTML, CSS and JavaScript. Tested Using Jest.

Related tags

Overview

To-DO List

Additional description about the project and its features:

Built With

Getting Started

How to run in your local machine

Authors

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

1.3.0 - 2022-03-17

Security

Fixed

Project requirements

Project requirements

Project requirements

Project requirements

Project requirements

Hi @Saadat123456

Congratulations on the project!

Owner

Saadat Ali

TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is tested by JavaScript Unit testing using Jest framework. It is build by using ES6 and Webpack!

Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding problems are pulled from LeetCode and Daily Coding Problem.

A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

🥾 A simple way to do testing AWS Services and Jest or Serverless and Jest

This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.