A simple single page web-app that stores, removes and edits books' names in the browser's local storage.

Alejandro Neira

Last update: Apr 1, 2022

Overview

Webpack-project---To-Do-list-

To Do list project whit Webpack

Build with

HTML
CSS
JavaScript

Set up instructions:

-first of all you have to install node.js and webpack.

-git clone https://github.com/AlejandroNeira98/Webpack-project---To-Do-list-.git

-cd Webpack-project---To-Do-list-

-npm install

-npm run build

-npm start

Live Demo

https://alejandroneira98.github.io/Webpack-project---To-Do-list-/dist/index.html

Author

👤 Alejandro Neira

GitHub: @AlejandroNeira98
Twitter: @JANP_19
LinkedIn: LinkedIn

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Microverse Instructions.

Comments

Newtasks
Project requirements

Add a new JavaScript file and import it as a module:

it will contain methods related to the status updates (completed: true / false).

Add event listener to the checkbox (change).

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

Implement a function for the "Clear all completed" button (use filter() method).

Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.
opened by AlejandroNeira98 0
Add & delete tasks
Project requirements

Removed all hardcoded items from the tasks array.

Created a new JavaScript file for the new functionality.

Implemented a function for adding a new task (add a new element to the array).

Implemented a function for deleting a task (remove an element from the array).

Implemented a function for editing task descriptions.

By default new tasks have the property completed set to false and the property index set to the value of the new array length

Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.

All changes to the To Do List are saved in local storage.
opened by AlejandroNeira98 0
Feature
Project requirements

Set up a new project with webpack that is based on the webpack exercise you have already completed.

Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (<div> or <ul> element). The index.html file must be set as a template using the HTML Webpack Plugin.

The main changes in this pull request were:

Created an index.js file and set an array of some simple to do tasks (array of objects). Each task object contains three keys:

description [string].

completed [bool].

index: [number].

Wrote a function to iterate over the tasks array and populate an HTML list item element for each task.

On page load render the dynamically created list of tasks in the dedicated placeholder. The list should appear in order of the index values for each task.

Created a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.
opened by AlejandroNeira98 0
Erase commented code

https://github.com/AlejandroNeira98/Webpack-project---To-Do-list-/blob/613f324e3df3202cdec72a3d382d5454905b67af/src/Add%26Delete.js#L21

You shall erase the commented out code

opened by AlejandroNeira98 0
Re factor function

https://github.com/AlejandroNeira98/Webpack-project---To-Do-list-/blob/613f324e3df3202cdec72a3d382d5454905b67af/src/ClearChecked.js#L10

Here you can refactor this function into task.completed = !task.completed;

opened by AlejandroNeira98 0
Peer-to-peer code review
Good job Alejandro! :1st_place_medal:

Congratulations

Your project is well organized

You used understandable functions to update tasks

However, there are some suggestions for you to improve your project:

Please, update your event listener when editing tasks, you can use 'change' parameter

Kindly, avoid repetitions such as 'window.localStorage.setItem('tasks', JSON.stringify(tasks))'

Happy coding :100:
opened by leopiresgoss 0

A simple single page web-app that stores, removes and edits books' names in the browser's local storage.

Related tags

Overview

Webpack-project---To-Do-list-

Build with

Set up instructions:

Live Demo

Author

Show your support

Acknowledgments

Comments

Newtasks

Project requirements

Add & delete tasks

Project requirements

Feature

Project requirements

The main changes in this pull request were:

Erase commented code

Re factor function

Peer-to-peer code review

Owner

Alejandro Neira

"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add a book, view a list of books and also remove any un wanted books.

This project is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This Awesome books webpage was created using ES6.

Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Awsome books website is a page that contains information about list of books with the title and author names.

A web app which help you to save you a list of your favorite books, they will be saved on your local storage to never loose them even if you close the page. Built wiht JavaScript

A Single Page Application featuring a medium fidelity wireframe of a to-do-list app that stores tasks that are added and which can be deleted. The tasks can be checked, unchecked or edited. Built mainly with JavaScript and strict ES6 features. Bundled with webpack.

On this page, you can save and load all the awesome books you have and save the name and the author into the local storage. this project uses Javascript to interact with the pages

Awesome Books project : An online Book Library. Storing book information using local storage and displaying it as a list on HTML page

This is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This was a continuous project, where in each milestone, new feature(s) was/were added to it.

A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application with JavaScript, the website is more interactive!

Awesome books is a vanilla Javascript which offers CRUD functionalities allowing you to add, remove edit boks info and store it to the local storage.