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. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

Overview

Project Name : TO-Do 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. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

In order to achieve this project I used some resources and technologies listed below :

On Desktop On Mobile
Desktop version of the project Mobile Version

Built With

  • Major languages : JavaScript (ES6 syntax), HTLM and CSS
  • Frameworks : none
  • Module bundler : webpack
  • Technologies used : Github, Git and Linters

Live Demo

Click here for the demo

Getting Started

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

Prerequisites โ™ป๏ธ

  • A personal computer connected to the internet;
  • Have a working and updated browser.
  • Have a local version control like git installed on your computer
  • Have an account on Github, as an online/remote Version Control System
  • Code editor (Visual studio code, sublime text, notepad++, ...) installed on your computer;
  • At least basic of HTML and CSS.

Setup ๐ŸŽฐ

  • Click the me and you'll land on the pure repository;
  • click on the green ( ๐ŸŸข ) button with Code Inscription;
  • You can choose to download the project or just clone it if you are familiar with Git and Github;
  • Follow normal step once download in your computer and use it as it's yours.

Install

  • If you are familiar with git, Run npm install to get all dependecies required to run the linters checks, otherwise use the downloaded project on your computer without testing files

Run test ๐Ÿงช

Run thes command bellow inside your git bash or command line interface..

  • npm build start : to run the project in your default web Browser
  • npx hint . : for the html codebase and use of best practices.
  • npx stylelint "**/*.{css,scss}" : for the css codebase and use of best practices. you can add
  • npx eslint . : for the JavaScript codebase and use of best practices
  • Note that you can add --fix keyword to the command for Css and/or JavaScript to make sure that you avoid all errors comming from your code editor

Author

๐Ÿ‘ค Chris Siku (Main Author)

Chris Siku's GitHub stats

๐Ÿค 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
  • Hat tip to anyone whose code was used.

๐Ÿ“ License

This project is MIT licensed.

Comments
  • Milestone 3 :  interactive To-Do List

    Milestone 3 : interactive To-Do List

    What I add to the project โ™ป๏ธ

    For this project's milestone 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 is stored in local storage

    Note that: all changes to the Tasklist are updated in the localStorage;

    Technology ๐Ÿง‘โ€๐Ÿ’ป

    • Language : Javascript, HTML and CSS
    • Framework: none
    • Module Bundler: Webpack
    • Technology: Github, Git, Linters
    opened by Chrissiku 1
  • Milesotne 2 : Add, remove and edit items

    Milesotne 2 : Add, remove and edit items

    What I add to project โ™ป๏ธ

    For this project's milestone I Add the following functionalities to the project :

    • 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.

    Note that: all changes to the project are stored in the localStorage;

    Technology ๐Ÿง‘โ€๐Ÿ’ป

    • Language : Javascript, HTML and CSS
    • Framework: none
    • Module Bundler: Webpack
    • Technology : Github, Git, Linters
    opened by Chrissiku 1
  • Peer-to-peer codereview

    Peer-to-peer codereview

    Your code works really well and you have a very great UI ๐Ÿ‘ , however, there are a few things that should be addressed:

    • since ES6 module is being used, you could split your code into modules/functions to make it more modular and reusable.
    opened by wale-prog 0
  • HTML and CSS best practices.

    HTML and CSS best practices.

    Highlight ๐Ÿ‘

    Required Changes โ™ป๏ธ

    • [ ] I should use a ul tag to store all task items on line [37] (https://github.com/Chrissiku/To-Do-List/blob/c964f7914ed0a505d391e21aafd652ba00d308b0/src/index.html#L37)
    opened by Chrissiku 0
  • DRY, KISS, and YAGNI

    DRY, KISS, and YAGNI

    Highlight ๐Ÿ‘

    • The project is DRY
    • The project is KISS
    • The project is not YAGNI

    Required changes โ™ป๏ธ

    for this project I think that there is nothing else to say about the DRY, KISS and YAGNI concept.

    opened by Chrissiku 0
  • JavaScript best practices.

    JavaScript best practices.

    Highlight ๐Ÿ‘

    • No console.log commit to the repo
    • No use of window.alert(), window.confirm(), document.write or eval()
    • The number of changes/updates to the DOM are low as possible
    • Existance of node_modules dirctory to the .gitignore file

    Required Changes โ™ป๏ธ

    • [ ] I should Keep the application logic separated from DOM manipulation tasks form line 20 to 42 inside my index.js file
    opened by Chrissiku 0
  • Morning session: Peer-to-peer code reviews

    Morning session: Peer-to-peer code reviews

    Highlights ๐Ÿ‘๐Ÿผ

    • Great UI
      -Awesome Readme
    • Use of best HTML, CSS and ES6 practices

    Required changes โ™ป๏ธ

    • I'd kindly suggest that you use modules to divide your code.
    opened by Favourezeugwa 0
  • Milestone 1 : Creation fo the To-Do list structure

    Milestone 1 : Creation fo the To-Do list structure

    What I add to the project โ™ป๏ธ

    For this project's milestone I build a simple HTML, CSS, and JavaScript list of To-Do tasks. The list Is styled according to the specifications listed later in this lesson. This simple web page is built using a webpack and served by a webpack dev server.

    Techonlgie used ๐Ÿง‘โ€๐Ÿ’ป

    • Language : JavaScript (ES6 syntax), HTML, CSS
    • Framework: None
    • module bundler: webpack
    • technology: Git, Github, Linters
    opened by Chrissiku 0
  • To-Do list: Peer-to-peer code review

    To-Do list: Peer-to-peer code review

    Your project's UI looks very clean and was implemented as required in the specification ๐Ÿ‘ but there are a few things that should be worked on to make it even better:

    • This is supposed to be a TDD project, so the ./src/index.js should be broken down into individual functions that represent the actions users can perform on the UI
    • When the user clicks on the clear all button the widow should not reload because this is expensive for the browser.
    • when the user tries to edit the tasks, there is a console error generated indicating that the task being edited is not present, this can be a result of a function being called twice when the editing action is performed.
    opened by wale-prog 0
Owner
Chris Siku
๐Ÿ‘‹ Hi, Iโ€™m Chris ๐Ÿ‘€ I'm a JavaScript Software Engineer ๐ŸŒฑ Iโ€™m currently practicing Backend development with NodeJs but also open to new opportunities
Chris Siku
Harrison Njuguna 5 Nov 11, 2022
"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. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

ABDUL ALI 7 Jul 17, 2022
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. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

TOFANA SILVIA 16 Jun 13, 2022
"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 created with HTML , CSS , JS and webpack and NPM.

My Todo 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 com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
Ajayi Ridwan 7 Oct 21, 2022
"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

To Do 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 compl

Sahar Abdel Samad 16 Aug 9, 2022
"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.

Todo_List 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 to mark th

Cynthia Inga 4 Apr 19, 2022
"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.

todo-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 comple

Okoroji Victor Ebube 13 Jul 4, 2022
"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.

To-Do 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 compl

Juan Palacios 10 May 24, 2022
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. Built with JavaScript.

To Do List Application that record the tasks to remind you and got many features that you might need. This is an image for it Live Demo Live Demo Here

Omar Ragheb 14 Jul 13, 2022
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. Built with JavaScript.

To-do 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 complet

Leonardo Goss 9 Mar 4, 2022
"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.

Hello! I am a software developer! I can help you build a product, feature or website. Tak a look of my works. If you like what you see and have a proj

Roberto A. Baรฑos Alvarez 5 Apr 29, 2022
"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.

To do 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 compl

Ndikumana Isaie 4 Jun 10, 2022
"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.

To-Do-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 compl

Tushar Singh 4 Jul 19, 2022
"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.

To-do List build with Webpack "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

PRATAP PANABAKA 5 Aug 19, 2022
A to-do list is a tool that helps organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

ToDo-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 comple

Mohammed Hussen 6 Aug 20, 2022
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.

To Do List This Projects involves building a clone of minimalist ToDo List. Built With HTML, CSS & JS Live demo Getting Started To get a local copy up

Samuel Munyi 6 Oct 7, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 2022