In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. I followed the JavaScript, CSS, HTML, DRY, KISS and YAGNI Best practices.

Related tags

Learning resource To-do-list-Exo-Best-Practices
Overview

To Do list: add & remove

In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of the user interface are fully functional.

Screen Short

My list is a clone of the part of the minimalist project captured in the video below.

Capstone intro

Built With

  • Languages: HTML, CSS, JavaScript
  • Technologies used: HTML, CSS, JavaScript, Webpack

Live Demo

Link live demo

To get a local copy up and running follow these simple example steps.

Getting Started

Prerequisites

To run this app on your local computer you need the browser (Google Chrome is the best)

Setup

  • Clone the repository on your local machine
  • Cd into the folder

Install

  • Install VSCode or any code editor you like
  • Install npm by running npm install
  • run: npm start

Authors

👤 Oliver Kango

🤝 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

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is MIT licensed.

NOTE: we recommend using the MIT license - you can set it up quickly by using templates available on GitHub. You can also use any other license if you wish.

You might also like...

My terrible attempt at a promposal. Update: She said yes LMFAO Update Update: I got friendzoned right after 😭

TypeScript Next.js example This is a really simple project that shows the usage of Next.js with TypeScript. Deploy your own Deploy the example using V

Oct 27, 2022

A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete .

BOOK-DIRECTORY-NODEJS A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete . What I u

May 18, 2022

A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete .

Book-Directory-NodeJS A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete . What I u

May 13, 2022

An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web

An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web

Feel free to contribute! Where? http://www.jstherightway.org Why? Today we have a bunch of websites running JavaScript. I think we need a place to put

Jan 1, 2023

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

My To-Do List 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 imp

Nov 11, 2022

A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Dec 23, 2022

Some HTML, CSS and JS best practices.

Frontend Guidelines HTML Semantics HTML5 provides us with lots of semantic elements aimed to describe precisely the content. Make sure you benefit fro

Jan 1, 2023

In this project I have build a To Do List app that you can list, add, delete and manage your daily tasks better. Build with HTML, CSS, JS, ES6, JSON

ToDo List This project is build by javascript web packages which can add and remove daily tasks. Built With Html Css Javascript Sublime Text Author 👤

Oct 25, 2022

A totally functional user api. It's a service where you list users, create users, update or even delete them.

USER-API 🎯 ABOUT A user api system made with TypeScript using express and prisma. It's a service where you list user, create users, update them or ev

Oct 27, 2022
Comments
  • To Do List for Best Practice Review

    To Do List for Best Practice Review

    Hi there 👋,

    In this particular project I have copied my code from the "To Do list" project and commit it as one big chunk of code in a feature-best-practices branch.

    I build a very simple yet powerful to-do list, inspired by the minimalist website. That website is already offline web.archive.org.

    My task is to build a website that displays a list that looks and behaves like the part of minimalist project capture in the video below.

    Minimalist example

    I implement the following functionalities (presented in the video above):

    • Adding a new item.
    • Removing a selected item.
    • Marking a selected item as complete.
    • Removing all items marked as complete at once.
    opened by Olivier-Kango 0
  • Peer to peer review

    Peer to peer review

    Hello @Olivier-Kango , Congratulations on your project👏

    Your code is clean, you followed best practices in all of your files.👌 However, in line 11 and 12 of index.js you should consider declaring variables inside the function which you will them in. Also avoid declaring variable which you will not use, as they will make your code look bulky.

    opened by Bludidi 0
Owner
Olivier
I'm a Full-Stack Developer in JavaScript | HTML | CSS | Ruby | Ruby on Rails | React | Redux. Open to new opportunities.
Olivier
GitHub
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.

todolist This project is created to understand the use of ES6 with Webpack Built With HTML, CSS and Javascript. Webpack. Live Demo (if available) http

Shotola Ololade 3 Oct 13, 2022
To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. It is built with HTML, CSS and JavaScript

to do List To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. Built With HTML-5 CSS3 Ja

Lynette Acholah 11 Jun 7, 2022
Angular 14 Firebase CRUD with Realtime Database - AngularFireDatabase Object and List example: create, retrieve, update, delete

Angular 14 Firebase CRUD example with Realtime DataBase | AngularFireDatabase Build Angular 14 CRUD example with Firebase Realtime Database that uses

null 7 Dec 26, 2022
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

Leader Board - JavaScript Project Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learne

Mahdi Rezaei 7 Oct 21, 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
To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do.

to do List To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. Built With HTML-5 CSS3 Ja

Nemwel Boniface 21 Jun 23, 2022
This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and served with webpack dev server

Todo-List This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and s

Duane David 10 Sep 28, 2022
This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete tasks.

TO DO LIST APP This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete t

Kehinde Onifade 8 Oct 7, 2022
In this project, I built a to-do list app, which is inspired by the minimalist website. Build withHTML/CSS & JavaScript best practices: Correct use of tags, elements, properties and syntax.

Webpack Exercise In this project, I built a to-do list app, which is inspired by the minimalist website. Built With HTML/CSS & JavaScript best practic

Vanessa Oliveros 3 Oct 11, 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