A simple implementation of a task list application that can be used to add, remove, edit and check users tasks

Last update: Mar 28, 2022

Related tags

Overview

To Do List

"To-do list" is a tool that helps to organize daily activites. It simply lists the things which are needed to be done and allows user to mark them as complete. In this step of project, the CRUD (create, update, delete) methods are implemented. This simple web page is built using webpack and served by a webpack dev server.

Built With

HTML
CSS
Javascript

Getting Started

step1 cloning the project:

git clone https://github.com/ZahraArshia/To-Do-List/.git

step2 buile the project:

npm install
npm run build

step3 Development:

npm install --save-dev webpack-dev-server
npm start

Live Demo

Author

Zahra

GitHub: @githubhandle
Twitter: @twitterhandle
LinkedIn: LinkedIn

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!

📝 License

This project is licensed.

Comments

interaction implemented
Hello 😊

in this step of project:

structure of files is changed to have a "modules" folder related to index.js

a new "interaction.js" file is added, including methods related to the status updates and reset, so 🔄 and clear all completed buttons are now working
opened by ZahraArshia 1
Add&remove
Hello 😊

in this step of project:

a new JavaScript file is added with the name of CRUD.js including class "Task" with methods for add, remove, edit and update

index key of each task is updating according to its position in storage array

edit function don't affect the position of the item in list, just changes the description

in the feature:

the clear all completed button is disable for now, in next step its functionality will be implemented according to Microverse schedule
opened by ZahraArshia 1
List structure
Hello 😊

in this project:

webpack is setted up

an index.html file created with an empty "To-Do List" placeholder using the HTML Webpack Plugin

an index.js file created with an array of objects for saving tasks a function to iterate over the tasks array and print them dynamically

a style.css file loaded by Webpack Style/CSS Loader created containing styles
opened by ZahraArshia 0
peer to peer code review
reviewing final to-do list:

your style is really great ✔️

the edit function is creative I liked it ✔️

just three things I notice:

I shouldn't be able to add an empty string.

Enter the event for adding a task is not work.

there is an overflow that we can avoid.

there is no style when a checkbox event happens.

again you really did good work keep going 💯
opened by saied2035 0
Do I follow JavaScript best practices?
1- JavaScript best practices ✔️

2- DRY, KISS, and YAGNI

traditional functions are used instead of arrow functions: https://github.com/ZahraArshia/To-Do-List/blob/17d71bf1b9dc45c4054289bb7c9fcfe56683866f/src/modules/interaction.js#L8 https://github.com/ZahraArshia/To-Do-List/blob/17d71bf1b9dc45c4054289bb7c9fcfe56683866f/src/modules/interaction.js#L26 https://github.com/ZahraArshia/To-Do-List/blob/17d71bf1b9dc45c4054289bb7c9fcfe56683866f/src/modules/interaction.js#L41

repeated lines of code, doing the same thing: https://github.com/ZahraArshia/To-Do-List/blob/17d71bf1b9dc45c4054289bb7c9fcfe56683866f/src/modules/interaction.js#L12-L16 https://github.com/ZahraArshia/To-Do-List/blob/17d71bf1b9dc45c4054289bb7c9fcfe56683866f/src/modules/interaction.js#L30-L33

3- HTML and CSS best practices ✔️
opened by ZahraArshia 0

Owner

Zahra Arshia

Full-Stack Developer with a love for JavaScript. Stack: JavaScript, Ruby, ReactJS, python, C#. Currently, open to new opportunities

GitHub

RANDM - a dating application that helps users find matches through randomization

RANDM - The Random Dating App RANDM is a dating application that helps users find matches through randomization. While other dating apps on the market

9 Oct 31, 2022

Bookmarklet to remove sticky elements and restore scrolling to web pages!

648 Dec 29, 2022

Math Magician is a single Page App that allows users to perform simple math calculations

11 Apr 9, 2022

Travel Lovers - an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips

Travel Lovers Table of Contents Description Tools Used Installation Instructions Usage License Tests Questions Description Travel Lovers is an applica

5 Aug 31, 2022

💬 Real-time chat application prototype that can summarise the entire chat log

Chat summarizer ?? Disclaimer! This is a prototype and a fun project that I've been working on and it is not ready for production. It was done in a fe

5 Jan 22, 2022

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

3 Mar 6, 2022

An arbitrary size Bit-Vector implementation in JavaScript

BitSet.js BitSet.js is an infinite Bit-Array (aka bit vector, bit string, bit set) implementation in JavaScript. That means that if you invert a bit v

207 Dec 9, 2022

An implementation of cellular automata in TypeScript

?? cellular-automata An implementation of cellular automata in TypeScript. ?? Usage First of all, clone the repository: $ git clone [email protected]:aro

2 Feb 7, 2022

A benchmarking library. As used on jsPerf.com.

Benchmark.js v2.1.4 A robust benchmarking library that supports high-resolution timers & returns statistically significant results. As seen on jsPerf.

5.3k Dec 28, 2022

This library was designed to be used in SPA framework wrappers for the FingerprintJS Pro Javascript Agent

Framework-agnostic SPA service wrapper. Use it to build a FingerprintJS Pro wrapper for your favorite framework.

12 Sep 3, 2022

API for managing authentication, creating Users, Items and Categories for FinancesApp

This is a repository to store all the API for managing authentication, creating users, items and categories. Search for single or multiple records at once, update items and categories and remove both.

8 May 10, 2022

A simple server application that allows you to perform Wake-on-LAN remotely with a web interface

WoL Helper A simple server application that allows you to perform Wake-on-LAN remotely with a web interface. Usage Install: npm install -g wol-helper

5 Jul 27, 2022

Add WebAssembly ESM integration to Vite and support wasm-pack generated modules

Add WebAssembly ESM integration (aka. Webpack's asyncWebAssembly) to Vite and support wasm-pack generated modules

78 Dec 26, 2022

Add weak event listeners from your components/classes based on WeakRefs

Add weak event listeners from your components/classes based on WeakRefs. This package handles the boilerplate for you, which isn't too much anyways but not particularly good looking.

3 Feb 25, 2022

This is my To-do-list project for my Javascript module at Microverse.

To do List This is a To do list project built for learning purposes. Built With HTML Bootstrap Javascript CSS HTML Webpack How to use it Clone the rep

4 Oct 8, 2021

🔬 list user's npm pkgs sorted by monthly downloads

npm maintainer dash list a user's npm packages sorted by monthly downloads very experimental proof of concept, not to be relied upon even a little bit

3 Feb 15, 2022

This is a facebook messenger clone.You can comminicate to other at realtime

?? facebook-messenger This is a facebook messenger clone.You can comminicate to other at realtime ?? ⚡ LIVE To check out the live demo of this app ABO

22 Sep 11, 2022

TrackIt - Single Page Application that helps the user track their habits.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

7 Apr 13, 2022

Insider Unlocked is an ongoing web application

Insider Unlocked is an ongoing web application we have been co-developing for the past few months which aggregates stock trading data of US senators and presents it in a digestible manner for the average retail investor

3 Feb 13, 2022