A To Do List implemented using webpack, JavaScript.

Richard Opiyo

Last update: Jun 12, 2022

Related tags

Learning resource To_do_list_webpack

Overview

To_do_list_webpack

This is a to do list implemented using webpack bundler

Screenshot

Built With

Major Languages: JAVASCRIPT, HTML, CSS
Major Technologies : Git, Github

Prerequisites

npm ( Node Package Manager )
git and Github Account

Live Link

Live Link: https://richardoppiyo.github.io/To_do_list_webpack/dist/

Setup

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

Open terminal
Change the directory you want put the repo
Then run i. git clone [email protected]:richardoppiyo/To_do_list_webpack.git ii. cd repo-name/

Install linters

Webhint linter

npm install --save-dev [email protected]
Stylelint linter

npm install --save-dev [email protected] [email protected] [email protected] [email protected]
ESLint linter

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

Run linters

Webhint linter -npx hint . on the root of your directory of your project.
Stylelint linter - npx stylelint "**/*.{css,scss}" on the root of your directory of your project.
ESLint linter
- npx eslint . on the root of your directory of your project.

Run project

Now runt the following: npm install - on the root directory of the project to install the required packages npm start - on the root directory of the project to start the project

Authors

👤 Author1

GitHub: @richardoppiyo
Twitter: @blessed_ricky
LinkedIn: Richard Opiyo

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

To morning session team,reviewers and standup team memebers.

📝 License

This project is MIT licensed.

Comments

DRY, KISS AND YAGNI RULES
Hello @richardoppiyo 👋 ,

You have done on implementing this project 💯

To highlight :

Your application works as expected ✅

Your pull request is descriptive ✅

Your commit messages are meaningful and are written in the present continuous tense as requires ✅

The correct Gitflow is used ✅

However, there are some issues 🛠️ that you need to address before you move to the next step 😃.

Required Changes ♻️

Try to employ the use of arrow functions to implement functions wit implicit return values.

Have a look at my inline comment below 👇

https://github.com/richardoppiyo/To_do_list_webpack/blob/45d9b07c38f8d8268718712b3905d347655b7d15/src/index.js#L25

https://github.com/richardoppiyo/To_do_list_webpack/blob/45d9b07c38f8d8268718712b3905d347655b7d15/src/index.js#L86

https://github.com/richardoppiyo/To_do_list_webpack/blob/45d9b07c38f8d8268718712b3905d347655b7d15/src/modules/todo.js#L62

Kindly implement the required changes and re-submit for review. 👍 Feel free to leave any comment, feedback or clarification on the comment box.

HAPPY CODING 😃!
opened by richardoppiyo 1
implement interactions on the to do list
In this milestone:

I implemented the changeStatus method in TODO class to changed the status when checked

Update item upon user keypree on index.js

implemented clearCompleted method in the TODO class

worked on localStorage
opened by richardoppiyo 1
Peer-to-Peer code review
great going on your code!

some highlights:

your code is clear and well organized

loved your elements module makes the code easier to read and more organized

here are some things you could improve:

you should move changeStatus out of your todoList module as it is required on the next step of the project

[OPTIONAL] you could add some comments to make large sections easier to read through

[OPTIONAL] you should take the screenshot out of the src/ folder as it is not part of your final build
opened by JuanLPalacios 1
Morning Session per-to-per code review
Hello @richardoppiyo! 👋🏻

We didn't find anything to improve here, you made an excellent job, congratulations! 🎉

To Highlight

Your code looks great and clean.

You wrote professional commits descriptions.
opened by ryxtor 0
HTML/CSS best practise

-Create a class color and apply it to different element https://github.com/richardoppiyo/To_do_list_webpack/blob/45d9b07c38f8d8268718712b3905d347655b7d15/src/style.css#L51 https://github.com/richardoppiyo/To_do_list_webpack/blob/45d9b07c38f8d8268718712b3905d347655b7d15/src/style.css#L113

opened by richardoppiyo 0
Javascript Best Practises
To add declarations at the top of the page https://github.com/richardoppiyo/To_do_list_webpack/blob/45d9b07c38f8d8268718712b3905d347655b7d15/src/index.js#L48
opened by richardoppiyo 0

A To Do List implemented using webpack, JavaScript.

Related tags

Overview

To_do_list_webpack

Screenshot

Built With

Prerequisites

Live Link

Setup

Install linters

Run linters

Run project

Authors

Show your support

Acknowledgments

📝 License

Comments

DRY, KISS AND YAGNI RULES

implement interactions on the to do list

Peer-to-Peer code review

some highlights:

Morning Session per-to-per code review

Hello @richardoppiyo! 👋🏻

To Highlight

HTML/CSS best practise

Javascript Best Practises

Owner

Richard Opiyo

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.

In this project, I built a basic website that allows users to add/remove books from a list using HTML/CSS to build the app and JavaScript to add functionalities. This project was organized using modules and ES6 syntax implemented.

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.

This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

A simple HTML page maintaining list of To Do tasks using webpack and served by a webpack dev server.

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

In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a webpack dev server.

Awesome book website, small online library to store books when added to the list we have implemented this using a plaint JavaScript!

A simple JS To Do List bundled using Webpack. You can add new tasks, edit existing tasks, check completed tasks, and delete tasks from the list. It is built mainly with Javascript.

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.

A to-do list set up using webpack. It allows the user to add, remove, edit and check items on the list. All the data is saved in local storage.

Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and 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 mark them as complete. It is tested by JavaScript Unit testing using Jest framework. It is build by using ES6 and Webpack!

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

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.