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.

Overview

To-Do-List App

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.

screenshot

Built With

  • Webpack
  • HTML
  • CSS
  • Modular JavaScript (with modern ES6 syntax)

Live Demo

Live Demo Link

Getting Started

Setup

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

Execute the following commands on your terminal

npm install
npm start

Prerequisites

You need to have NODE.JS set up on your local machine.

Deployment

Execute the following commands on your terminal

npm run build
npm run deploy

It will open your browser with the project homepage

👤 ## Author

🤝 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 MIT licensed.

Comments
  • add interactive feature

    add interactive feature

    To-Do list: interactive list

    • Add event listener to the checkbox

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

    • Implement a function for the "Clear all completed" button.

    • Store the data in local storage

    opened by Mwapsam 0
  • Add remove feature

    Add remove feature

    CRUD - Task

    • Removed all hardcoded items from the tasks array

    • Created a TasksManager class for the new functionality:

    • Creating a new task

    • Updating task descriptions

    • Deleting a task

    • Continuous index number value

    • All changes are saved in local storage.

    opened by Mwapsam 0
  • Peer to Peer Review

    Peer to Peer Review

    Hey @Mwapsam you did a good job far but there are some issues to highlight 👍

    • Instead of storing just the task description in the array it would be better to create an object that has a description, completed, and index keys. It will make it easy to track the tasks.
    • Try to create a single function that just loads and updates the localStorage.
    • Try to run this command npx eslint . --fix to fix JavaScript linters.
    opened by TimmyChan99 0
  • Complete project

    Complete project

    • Configure Webpack to bundle Modular JavaScript
    • Configure linters (ESLint, StyleLint & Webhint)
    • Add HTML, CSS & JavaScript files
    • Update README file
    opened by Mwapsam 0
  • Peer-to-peer code reviews

    Peer-to-peer code reviews

    Hello @Mwapsam, We loved your project 💯 and the javascript was very well structured. The code was DRY and you kept it simple. However, there are a few issues to air out in order to take improve your project: [Optional]

    • Kindly consider separating the test from the modules folder, the reason is to give better organization for the project
    • it would be better to create a new folder and name it __test__ where you can the tests because it is the folder jest looks for to run your tests by default.
    opened by selma-belhadj 0
  • JavaScript best practices

    JavaScript best practices

    Below are the issues noticed based on HTML, CSS, and JavaScript best practices

    • Consider wrapping the parent div in a section and replacing the p tag with an h1 tag in the index, this will conform to the HTML semantics rules (every HTML page should have at least one h1 tag)
    • Consider refactoring your code to ES6 classes because their syntax is way cleaner and easier to understand.
    • It would be nice to refactor the loop in crud.js to use ForEach loop instead of the good old for loop
    • Consider pushing all variable declarations to the beginning of the block
    opened by Mwapsam 0
Owner
Samuel Mwape
Full-Stack Software Developer | Online Tutor | Stack: JavaScript, Ruby, Rails, React, Redux, Python, Django | Open to new opportunities
Samuel Mwape
Erick Hans 5 Oct 26, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Emem Ekpo 7 Sep 9, 2022
Richard Chileya 5 Nov 11, 2022
In this project, I built a simple HTML list of To-Do tasks. Using webpack to bundle JS functionality and other sources.

To-do-list App A simple To-do-list app using DOM manipulation. Built With HTML/CSS JavaScript Webpack Jest Live Demo Live Demo Getting Started Get a c

Andy Menutti 10 Nov 5, 2022
In this project, I built a simple HTML 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 webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

 Hassan Momanyi 10 Nov 25, 2022
In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

To Do List In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaSc

Andrés Felipe Arroyave Naranjo 10 Mar 31, 2022
A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

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

Elikplim 4 May 9, 2022
JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Karla Delgado 10 Aug 27, 2022
JavaScript project for the Leader-board list app, using webpack and ES6 features, notably modules

Leaderboard JavaScript project for the Leader-board list app, using webpack and ES6 features, Built With HTML CSS Javascript webpack Getting started t

Banlon Jones 3 Feb 17, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules

LEADERBOARD In this activity I am setting up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I wil

Tobin 11 Mar 16, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules.

Leaderboard ONJoseph Leaderboard project JavaScript leaderboard project using API. Description In this activity I will set up a JavaScript project for

Joseph O 3 May 12, 2022
This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built with HTML, CSS, JavaScript.

Awesome Books with ES6 This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built

Dino Ronald Quispe Arias 7 Jul 21, 2022
A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 2022
Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

Project Name Awsome books Description the project. adding books daynamiclly Built With Major languages Frameworks Technologies used Live Demo (if avai

Alzubair Alqaraghuli 5 Jul 25, 2022
This project is about building a simple HTML list of To Do tasks. Built using webpack and served by a webpack dev server.

To Do List app This project is about building a simple HTML list of To Do tasks and is built using webpack and served by a webpack dev server. Built W

Dino Ronald Quispe Arias 6 Nov 4, 2022