This is an educational project to make a To Do List web application without using JS frameworks

Related tags

Learning resource javascript todo webpack
Overview

To Do List (Microverse project)

This is an educational project to make a To Do List web application without using JS frameworks.

Built With

  • HTML5
  • JavaScript
  • npm
  • webpack

Screenshot

screenshot

Live Demo

Check the live demo

Usage

To build the project run:

$ npm install
$ npm run build

Development

In development environment use the following command:

$ npm run dev

Author

👤 Mostafa Ahangarha

🤝 Contributing

As an educational project at this stage I am not supposed to accept any PR. Yet I appreciate if you can report problems from issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Linters are made by Microverse Inc.

📝 License

This project is released under AGPL licensed.

Comments
  • Suggestions for better implementation

    Suggestions for better implementation

    Hello Mustafa you did a great job implementing all the requirement and I suggest that you use a separate class for the logic part (CRUD functionalities) and also for the DOM this way you can implement the tests easily by calling methods. and also if you want to implement more functionalities you will not be lost between the lines otherwise you did good

    opened by souad988 3
  • Morning session: Peer review

    Morning session: Peer review

    Your code is good, clean code, and respect the best practices. but you can:

    • It would be good to use destructuring in the class and functions.
    • You can use default Parameters, for KISS best practices.
    • Optional, it would be cleaner if you had a label with the id of the input type.
    • Optional, I think you could have created a separated js file containing the addToPage function that will make your code look better and not overwhelming.
    • Optional, I would suggest setting text-transform to capitalize as the user can enter words awkwardly.
    opened by Ismailco 1
  • Project 1 list structure

    Project 1 list structure

    Description

    The first phase on making a Todo List web application.

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    HTML/CSS requirements

    • [x] Followed best practices for HTML & CSS
    • [x] Followed best practices for JavaScript

    Additional notes

    Live Demo is not available since Github pages default action doesn't support such projects.

    Thank you for taking the time to review this pull request.

    opened by ahangarha 1
  • 8 suggestions for better implementation

    8 suggestions for better implementation

    In this PR, I have rewritten the code to:

    • extract DOM manipulation functions from TodoList class
    • make more pure functions
    • write better tests

    closes #8 closes #11

    opened by ahangarha 0
  • Test part 2

    Test part 2

    Description

    To test the following functionalities:

    • Editing todo
    • Marking todo as completed
    • Removing all completed todos

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    HTML/CSS requirements

    • [x] Followed best practices for HTML & CSS
    • [x] Followed best practices for JavaScript

    Thank you for taking the time to review this pull request.

    opened by ahangarha 0
  • Test part 1

    Test part 1

    Description

    In this PR we have added test for

    • Adding one item to the todo list
    • Removing one items from the todo list

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    HTML/CSS requirements

    • [x] Followed best practices for HTML & CSS
    • [x] Followed best practices for Javascript

    Thank you for taking the time to review this pull request.

    opened by ahangarha 0
  • Apply Best Practices

    Apply Best Practices

    • [ ] Regarding JavaScript best practices, try to use deconstruction in todoList class methods; namely for addToPage method. https://github.com/ahangarha/MV-ToDo-List/blob/08fe6325855af958fea646ad663ac83540a26abd/src/modules/todoList.js#L51
    opened by ahangarha 0
  • Project 2 add remove

    Project 2 add remove

    Description

    In the second PR, these functionalities are added:

    • Add new todo
    • Modified todos
    • Remove todos
    • Remove all completed todos
    • Mark todo as completed
    • Store data in localStorage

    General requirements

    • [x] There are no linter errors.
    • [x] Followed the Github flow.
    • [x] The documentation is professional.

    HTML/CSS requirements

    • [x] Followed best practices for HTML & CSS
    • [x] Followed best practices for JavaScript

    Thank you for taking the time to review this pull request.

    opened by ahangarha 0
Owner
Mostafa Ahangarha
Full-Stack Developer using React, Tailwindcss / Software Freedom advocate, looking for new opportunities. Gitlab: https://framagit.org/ahangarha
Mostafa Ahangarha
GitHub
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

Awesome books ES6 This is a website that allows users to add and remove books from a list. This project is build using JavaScript objects Built With H

Mustafa Fahimy 7 Jul 21, 2022
CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for easy distribution and without installation on the Google Chrome Browser. Powered by Unicorn.js, Capstone.js, Quasar and NASM.

CPUSim - A Graphical CPU Simulator CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for ea

Michael Schneider 4 Oct 26, 2022
Microverse Module 02 Project: This is educational project 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. Built with HTML, Sass, JavaScript and Webpack.

Project Demo Live Demo Description 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

Ajayi Ridwan 7 Oct 21, 2022
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
An users NodeJS API without packages libs or frameworks!

NodeJS Users API - Without Frameworks And Packages ?? Table of Contents About Getting Started Usage Built Using Authors ?? About Purpose of this proje

Nathan Cotrim Lemos 31 Feb 7, 2022
Examples and challenges of my video about Creating and testing a complete Node.js Rest API (Without frameworks)

Building a complete Node.js WebApi + testing with no frameworks Welcome, this repo is part of my youtube video about Creating and testing a complete N

Erick Wendel 120 Dec 23, 2022
This project is an educational asset demonstrating the use of AWS amplify, Graphql API, Appsync, Material UI and amazon cognito. T

This project is an educational asset demonstrating the use of AWS amplify, Graphql API, Appsync, Material UI and amazon cognito. This project belongs to Black bird and this repo will remain dormant until final decision.

Shikhar 7 Oct 12, 2022
Educational Project, Kodlama.io Etiya Academy

EtiyaTelcoProject Development is progressing in the dev branch. This project was generated with Angular CLI version 14.0.6. Development server Run ng

ahmet-cetinkaya's other repos 10 Dec 2, 2022
To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed.

To Do App To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed. Users c

Ishpaul Singh 6 Jul 21, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology including but not limited to HTML, CSS, JavaScript and webpack to manipulate DOM.

Jerry Owusu 2 Feb 19, 2022
Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron 334 Dec 29, 2022
Connect Web Integration illustrates the integration of Connect-Web in various JS frameworks and tooling

Connect Web Integration Connect Web Integration is a repository of example projects using Connect-Web with various JS frameworks and tooling. It provi

Buf 43 Dec 29, 2022
An ongoing curated list of frameworks, books, articles, talks, screencasts, recordings, libraries, learning tutorials and shiny resources about Javascript Development.

Javascript Frameworks Development Welcome to the world of Javascript Frameworks. An ongoing curated list of frameworks, books, articles, talks, screen

Paul Veillard 3 Jul 31, 2022
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
An exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes.

Stupid Database This is an exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes. None of this co

Fabio Akita 196 Dec 20, 2022
Minecraft 1.8.9 mod which steals the access token and more things from the targetted user and sends to a backend server for processing. Disclaimer: For educational purposes only.

R.A.T Retrieve Access Token Check DxxxxY/TokenAuth to login into an MC account with a name, token and uuid combo. Features Grabs the username, uuid, t

null 45 Jan 9, 2023
A decentralised portal that aims to help Government Educational organisations to track student and colleges data to provide them with fellowships and programs.

DeSIDB A decentralised database built on Ethereum & Solidity. Introduction - India is a country with a population of 6.8 crore students graduating eac

Sachin Pandey 14 Jul 10, 2022
bbystealer is the new modern discord token grabber & token stealer, with discord password & token even when it changes. Terms Educational purpose only. Reselling is forbidden. You can use the source code if you keep credits (in embed + in markdown), it has to be open-source. We are NOT responsible of anything you do with our software.

?? Premium - ?? Builder - ?? Features Authors GhostyXD#0202 Rundeun#1337 Contributors Florin#5231 Kokto#3333 bbystealer The new modern discord token g

null 4 Mar 16, 2023