In this project, I build a simple HTML list of To Do task

Related tags

Learning resource webpack html5 js css3
Overview

Todo List

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

Built With

  • HTML5, CSS3 and JavaScript
  • Github and Git
  • Webpack
  • VSCode

Live Demo

Live Demo Link

Getting Started

To get a local copy up run the following steps.

Install

  • Have NodeJS installed and follow the next steps

Usage

Author

👤 Miliyon Ayalew

🤝 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

  • Inspiration

📝 License

This project is MIT licensed.

Comments
  • Todo List: Added Interactive list

    Todo List: Added Interactive list

    In this milestone :

    • Add a new clearAll.js file and import it as a module:
    • Implemented methods related to the status (completed: true/false) updates in clearAll.js
    • Add event listener to the checkbox change
    • Update items object's value for completed key upon user actions.
    • Implemented a function for the "Clear all completed" button to clear the tasks that are completed
    • Store the updated array of items in local storage.
    opened by Miliyonayalew 0
  • Todo List: Add and remove

    Todo List: Add and remove

    In this milestone:

    • Removed all hardcoded items from the tasks array.
    • Create new JavaScript files for the new functionality.
    • Implemented a function for adding a new task (add a new element to the array) when the button is clicked.
    • Implemented a function for deleting a task (remove an element from the array) when the three-dot button is clicked it shows the delete button and when the delete button is clicked the task is deleted.
    • Implement a function for editing task descriptions when the input field is changed.
    • All changes to the To Do List are saved in local storage.
    opened by Miliyonayalew 0
  • Todo List: List structure

    Todo List: List structure

    In this milestone:

    • Set up a new project with webpack that is based on the webpack exercise that I have already completed.
    • Created anindex.html and write markup
    • Created an empty To Do List placeholder.
    • Set the index.html file as a template using the HTML Webpack Plugin.
    • Created an index.js file and set an array of some simple to-do tasks (array of objects)
    • Implemented a function to iterate over the tasks array and populate an HTML list item element for each task.
    • Implemented the window page load to render the dynamically created list of tasks in the dedicated placeholder.
    • Create a style.css and set rules for the To-Do List.
    • Added Readme
    opened by Miliyonayalew 0
  • Follow DRY, KISS, YAGNI, JavaScript best practices, and HTML and CSS best practices.

    Follow DRY, KISS, YAGNI, JavaScript best practices, and HTML and CSS best practices.

    DRY, KISS, and YAGNI

    • On the styles part you used display: flex much time trying to give them on class like .flex display: flex to avoid DRY
    • Declare the variable inside the function block
    opened by Miliyonayalew 0
  • Follow DRY, KISS, YAGNI, JavaScript best practices, and HTML and CSS best practices.

    Follow DRY, KISS, YAGNI, JavaScript best practices, and HTML and CSS best practices.

    DRY, KISS, and YAGNI

    • On the styles part you used display: flex much time trying to give them on class like .flex display: flex to avoid DRY
    • Declare the variable inside the function block
    opened by Miliyonayalew 0
  • Follow JavaScript best practices

    Follow JavaScript best practices

    DRY, KISS, and YAGNI

    • On the styles part you used display: flex much time trying to give them on class like .flex display: flex to avoid DRY
    • Declare the variable inside the function block
    opened by Miliyonayalew 0
Owner
Miliyon Ayalew
Full-Stack Software Developer with a love ❤️ for React, Redux, and JavaScript. Reading books, playing Pool, and PS in my spare time. Open to new opportunities.
Miliyon Ayalew
GitHub
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 4, 2022
A simple to-do list application that helps to organize your daily tasks and keep track of the task you have completed and the task you are yet to have completed, and also deleting the completed task leaving those yet to be completed.

To-Do-List A To-Do-List App helps users to get their task cordinated and organised. This project is from microverse javascript curriculum which tests

zieeco 12 Jul 8, 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
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.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
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

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 including but not limited to HTML, CSS, JavaScript and webpack to manipulate DOM.

Jerry Owusu 2 Feb 19, 2022
This is a project being built to show the usage of Webpack. It's an application were you are able to add a task to the list, and remove a task from the list

Microverse Project To Do List This is a project being built to show the usage of webpack. Its an application were you are able to add a task to the li

Roland Ossisa Yuma 4 May 6, 2022
Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG)

Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG) This Assignment is mainly on PSD TO HTML along with HTML,CSS As a Basic HT

Yasir Monon 1 Jan 29, 2022
In this project, I build a simple HTML list of To Do task

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

Miliyon Ayalew 6 Oct 21, 2022
A to-do-list project is about keeping the track of all the daily task. This application can add move or delete task.

TO-DO LIST This is a project that create a simple todo tool that help you organize your day. This is build using ES6 and webpack. Built With HTML CSS

suzana marsela 8 Oct 26, 2022
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

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

Daniel Yerimah 6 Jun 7, 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
The ToDoList app let you create a task, added to a list of task, mark it as complete, and delete individual or multiple tasks at the same time

The ToDoList app let you create a task, added to a list of task, mark it as complete, and delete individual or multiple tasks at the same time. The app manipulate the Local-Storag so you can save your tasks there. Built with HTML, CSS and JavaScript. First practice using Webpack, Modules and tests with Jest

Tomas Milanesi 12 Jul 21, 2022
A to-do list Web application that lets the user add, remove and reorder to do lists and checks a task when completed with a button to delete all completed task

TO DO LISTS A Web application that lets the user add, remove and reorder to do lists Built With Html,JS,CSS Webpack and other dependencies Git, Github

Promise Okechukwu 14 Nov 1, 2022
A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

todolist This project is created to understand the use of ES6 with Webpack Built With HTML, CSS and Javascript. Webpack. Live Demo (if available) http

Shotola Ololade 3 Oct 13, 2022
A simple project of task list! - Stacks HTML, CSS and JS(pure)

Stacks used This project The purpose of this was to recreate a To do list project using the concepts of JavaScript, HTML and CSS and also storing the

Alisson Peixer 3 Sep 20, 2022
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.

To Do list with Webpack 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 w

Sidney Kaguli 8 Aug 23, 2022
"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 Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Fatima Ezzahra elmenoun 5 Jan 28, 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
Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

SWTF (Simple Worklog Task Format) Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can wr

null 4 Apr 4, 2022