This repo contains a To-Do List App developed as a Single Page Application using Webpack, Javascript, HTML and CSS.

Related tags

Learning resource to-do-list-app
Overview

Todo List App

In this project I built an interactive Todo List Web App with Webpack, HTML, CSS, and JavaScript. This project contains a feature that allow your Todo List to be stored in the local storage to keep track of the tasks even after closing your browser

Built With

  • Webpack
  • JavaScript
  • HTML and CSS

Live Demo

Live link

Getting Started

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

Prerequisites

Modern web browser with Javascript enabled

Install

git clone https://github.com/indigodavid/webpack-first-project.git

Authors

👤 David Vera

👤 Elson Otake

🤝 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
  • Microverse
  • My supportive family 😊

📝 License

This project is MIT licensed.

Comments
  • Improving code following HTML, CSS and JS best practices

    Improving code following HTML, CSS and JS best practices

    Reviewing the code I have found the following functions that can be improved following the "Best Practices" recommended for JS, HTML, and CSS:

    • [ ] In the following lines I am repeating myself. Maybe I can refactor my code to improve this code. https://github.com/indigodavid/to-do-list-app/blob/46af879e83253ea1069defa7ff43179519d83395/src/modules/create-li.js#L23-L32

    • [x] Here, I can remove this comment because I have added the styling I wanted in a different way. https://github.com/indigodavid/to-do-list-app/blob/46af879e83253ea1069defa7ff43179519d83395/src/modules/create-li.js#L93

    • [x] I am repeating the appendChild function a lot, and there should be a function to append multiple elements. https://github.com/indigodavid/to-do-list-app/blob/46af879e83253ea1069defa7ff43179519d83395/src/modules/create-li.js#L51-L55

    • [ ] I am repeating these functions for these elements. https://github.com/indigodavid/to-do-list-app/blob/46af879e83253ea1069defa7ff43179519d83395/src/modules/update-indexes.js#L17-L21

    Despite all, most of my code follows the best practices in my opinion.

    opened by indigodavid 1
  • Milestone 7. Add tests for edit tasks, set checkboxes and clear completed functions

    Milestone 7. Add tests for edit tasks, set checkboxes and clear completed functions

    In this milestone we added:

    • Mock module for localStorage
    • Mock module for DOM
    • Tests for edit task
    • Tests for completed tasks
    • Tests for clear completed functions
    • Test for update indexes
    opened by indigodavid 0
  • Milestone 5. Refactor drag drop

    Milestone 5. Refactor drag drop

    In this milestone the drag and drop feature has been heavily refactored to prevent a bug that was removing the event listeners from the dragged elements:

    • The 'dragover' event listener has been added to the container
    • The feature now uses the 'dragend' event instead of the 'drop' event
    • The feature now uses the Y position of the moving element to insert it
    • The feature no longer uses data transfer functions to move the element

    Check the commits to further review the behavior.

    opened by indigodavid 0
  • Milestone 3. Interactive list

    Milestone 3. Interactive list

    In this milestone I added:

    • Refactored code for adding and removing tasks in specific cases (fixed bug)
    • Improved module to change the completed status for the tasks
    • Clear completed button functionality
    opened by indigodavid 0
  • Milestone 2. Add & Remove task elements feature

    Milestone 2. Add & Remove task elements feature

    In this milestone I added:

    • Task class as template for the stored objects
    • Module to create list elements in the DOM
    • Module to add task and store the new task on local storage
    • Module to retrieve stored data
    • Module to remove task
    • Module to edit task
    • Custom alert div for empty task
    opened by indigodavid 0
  • Milestone 1. List structure

    Milestone 1. List structure

    In this milestone I added the following features:

    • Basic HTML template
    • Fontawesome as module for icons
    • CSS with custom style
    • JS to append list elements dynamically
    opened by indigodavid 0
Owner
David Vera Castillo
Software Developer, learning at @microverseinc. Currently developing projects using HTML, CSS, and JS. Soon I'll be learning React, Ruby, Swift, and others
David Vera Castillo
GitHub
This project contains a leader board for a game which contains players name and list and store them on API build with HTML, CSS, JS and API

Leaderboard This App is a Game Leaderboard app Which is created by JavaScript and the big picture of this application is using API. Build With ??‍?? .

Sahar Saba Amiri 5 Dec 15, 2022
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.

To-Do-List In this "To-Do-List" project, I created the basic structure of a page single page application with HTML, CSS and javascript, using the webp

amon-cofie 6 Oct 7, 2022
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
Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day

Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day. It lists the tasks that you need to do and allows you to mark them as complete. It was built as an introduction to web dev using ES6 and We…

Dagmawi zewdu 6 Mar 4, 2022
A simple HTML page maintaining list of To Do tasks using webpack and served by a webpack dev server.

Task Organiser In this project, we build a simple HTML list of To Do tasks using webpack and served by a webpack dev server. Built With HTML CSS Javas

Angom 4 Jun 24, 2022
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.

To do list 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 ser

Jesús Vázquez 8 Dec 21, 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
This is an app developed in the Microverse course, it is a simple app used for developing a task list, using JavaScript modules and webpack

TODO LIST This is an app developed in the microverse course, developing a task list, using Javascript modules and webpack A simple app to help you man

JUSTINE IMASIKU 5 Jul 28, 2022
This is email scheduler made using MERN. This repo contains server code, client repo is linked in readme.

Email Scheduler Client This is an email scheduler server (client in different repository). It is made using node.js/express.js. Overview User can sign

Sai Charan 2 Dec 3, 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
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

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
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
This repo contains configurations for webpack, webhint, stylelint and eslint, it is a boiler-plate template and a starting point for coming projects.

Project Name Description the project. Built With Major languages Frameworks Technologies used Live Demo (if available) Experience a live Demo ?? Getti

Adel Guitoun 6 Oct 20, 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 single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Micheal Oguntayo 4 Oct 14, 2022
A SPA (Single Page Application) that can track your books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

Awesome-Books-project Recreate awesome book app using ES6 syntax and modules. Built With HTML CSS Javascript Live Demo (if available) Live Demo Link G

Youta Lactio Christabelle 7 Jul 14, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 2022
This is a JavaScript leaderboad list app. In this project I used Webpack and ES6 modules. As well as HTML, and CSS for styling the app. When submitting the scores the data is preserved thanks to the external Leaderboard API service.

Leaderboard App In this project the leaderboard app allows you to create games and the user can submit their names and scores into the app to keep tra

Erick Hans 5 Oct 26, 2022
A simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript

This is a simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript. You can add, remove, edit and complete tasks, then clear all completed.

Joaquín G. L. Z. 4 Mar 4, 2022