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.

Overview

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 practices: Correct use of tags, elements, properties and syntax.
  • Linters Check: Local and Pull Request check for errors, bugs and stylistic errors in code.
  • Webpack 5.

Live Demo (if available)

Getting Started

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

  • git clone https://github.com/vvoo21/To-Do-List-App.git
  • To navigate into the project directory, use "cd capstone-project/"

and enjoy

Authors

πŸ‘€ Vanessa Oliveros Padron

🀝 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
  • Hat tip to The Microverse Program!

πŸ“ 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...

A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Testing for Add Remove function in To Do List App Jest framework is used for testing. Created (addremove.test.js) for a file containing the add item a

Aug 15, 2022

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

Jan 21, 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

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

Jul 25, 2022

A solid create-remix app, that applies best practices into a clean, batteries included template. SQLite version. Deploys to Fly.io

A solid create-remix app, that applies best practices into a clean, batteries included template. SQLite version. Deploys to Fly.io

Remix Barebones Stack npx create-remix --template dev-xo/barebones-stack A solid create-remix app, that follows community guidelines and applies best

Dec 30, 2022

This is a basic website Todo Application that displays a list that looks and behaves like the part of minimalist project.

To-Do-list-microverse Description This is a basic website; a Todo Application that displays a list that looks and behaves like the part of minimalist

Feb 3, 2022

Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. This project is build with JavaScript.

Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. This project is build with JavaScript.

Event Page Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. Built With HTML CSS JavaScr

Feb 28, 2022

πŸ“—πŸŒ 🚒 Comprehensive and exhaustive JavaScript & Node.js testing best practices (August 2021)

πŸ“—πŸŒ 🚒 Comprehensive and exhaustive JavaScript & Node.js testing best practices (August 2021)

πŸ‘‡ Why this guide can take your testing skills to the next level πŸ“— 46+ best practices: Super-comprehensive and exhaustive This is a guide for JavaScr

Jan 2, 2023

A set of best practices for JavaScript projects

A set of best practices for JavaScript projects

δΈ­ζ–‡η‰ˆ | ζ—₯本θͺžη‰ˆ | ν•œκ΅­μ–΄ | Русский | PortuguΓͺs Project Guidelines Β· While developing a new project is like rolling on a green field for you, maintaining it is

Jan 1, 2023
Comments
  • Create Interactive list

    Create Interactive list

    In this pull request, I built an interactive list for my To-Do app and performed the following steps πŸš€

    • 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 vvoo21 0
  • implement the CRUD (create, read, update, delete) methods

    implement the CRUD (create, read, update, delete) methods

    In this pull request I implemented the CRUD (create, read, update, delete) methods to my To-Do app and performed the following steps πŸš€

    • 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.
    • By default new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal 5).
    • Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should be set to 1).
    • All changes to the To Do List should be saved in local storage.
    opened by vvoo21 0
  • Build a list of To Do tasks

    Build a list of To Do tasks

    In this pull request I built a list of To-Do tasks and performed the following steps πŸš€

    • 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.
    • Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys:
      1. description [string].
      2. completed [bool].
      3. index: [number].
    • Write 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.
    • Create a style.css and set rules for the To Do List.
    opened by vvoo21 0
  • Review by Lucas

    Review by Lucas

    Great job Vanessa! Your App is looking awesome! You only need to separate your Js code in modules and create the dynamic id for your localStorage and it's done.

    opened by Oklukeok 0
Owner
Vanessa Oliveros
I'm a full-stack developer who transforms app designs with HTML, CSS, and JavaScript. Enjoys code + spending time with my family. Open to new opportunities.
Vanessa Oliveros
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.

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 th

Olivier 6 Nov 20, 2022
"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

To Do List Structure Solo programming project for module 2 week 2 of the Microverse Program. Live Demo Live Demo Link "To Do List" is a minimalist pro

Yersel Hurtado 7 Mar 5, 2022
A package to toggle properties of your HTML tags.

Toggler A package(atleast the code) to toggle properties of tags. I mostly use toggle classes while making a switch theme method, button interaction e

chandra sekhar pilla 6 Jan 9, 2022
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 ??

Sahar Saba Amiri 7 Oct 25, 2022
this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Afolabi Akorede 7 Jul 17, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
:white_check_mark: The Node.js best practices list (March 2021)

Node.js Best Practices Follow us on Twitter! @nodepractices Read in a different language: CN, BR, RU, PL, JA, EU (ES, FR, HE, KR and TR in progress! )

Yoni Goldberg 85k Jan 9, 2023
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.

Awesome Books ES6 In this project, I build a basic website that allows users to add/remove books from a list. using ES6 syntax and make it more organi

Abdulhamid 11 Jul 1, 2022