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.

Overview

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 webpack bundler to bundle all the source files in the "src" folder into the "dist" folder for distribution.

Built With

  • HTML
  • CSS
  • Javascript
  • Webpack

Live Demo

See the project live

Get Started

This project is high-fidelity wireframe of a to do list web app. You can open the live link to view it or you can make a copy to personalize it. To get a local copy up and running follow these simple example steps:

Prerequisites

  • Code editor
  • Install Git
  • Command Line Interface
  • Basic knowledge of HTML and Javascript
  • Web browser
  • webpack
  • npm

Setup

  • Open your command line and change directory to the destination on your local computer where you want your copy to be stored (You can use the terminal in VS code).
  • Copy this command to your command line or terminal: git clone https://github.com/amon-cofie/To-Do-List.git
  • Change directory to the repository. You can use this command in the command line: cd To-Do-List
  • The content of the repository should appear in the your code editor at this point if you are using the inbuilt terminal.
  • You can open the repository from git bash in VS code at this point with the following command: code .
  • You should make any desired changes in the "src" folder and try as much as possible not to change the configurations in the package.json and webpack.config.js files

Author

πŸ‘€ David Amon-Cofie

🀝 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
  • Inspiration
  • etc

Menu Vertical icon by Icons8

Refresh icon by Icons8

πŸ“ License

This project is MIT licensed.

Comments
  • 10/7/2022

    10/7/2022

    Good Job so far πŸ‘πŸΌ , we can add, remove and edit tasks easily as required but the only issue is that your code doesn't accept one character as a task.

    opened by AhmedNazirMusah 2
  • To Do list: interactive list

    To Do list: interactive list

    In this "To-Do-List" project, I created the basic structure of a single page application with HTML, CSS and javascript, using the webpack bundler to bundle all the source files in the "src" folder into the "dist" folder for distribution. I did the following things:

    • Installed the webpack bundler
    • Generated the index.html file in the dist folder from the source folder using an html plugin
    • Wrote functions function to iterate over the tasks array and populate an HTML list item element for each task.
    • Wrote functions to add a task and remove the task
    • Added functions to give the page some interactivity
    • Added CSS styling for the to do list application.
    opened by amon-cofie 0
  • To Do list: add & remove

    To Do list: add & remove

    In this "To-Do-List" project, I created the basic structure of a page single page application with HTML, CSS and javascript, using the webpack bundler to bundle all the source files in the "src" folder into the "dist" folder for distribution. I did the following things:

    • Installed the webpack bundler
    • Generated the index.html file in the dist folder from the source folder using an html plugin
    • Wrote functions function to iterate over the tasks array and populate an HTML list item element for each task.
    • Wrote functions to add a task and remove the task
    • Added CSS styling for the to do list application.
    opened by amon-cofie 0
  • Morning session: Peer-to-peer code review

    Morning session: Peer-to-peer code review

    Status: βœ”οΈ Project Approved βœ”οΈ

    Hello @amon-cofie πŸ”₯

    Good job on implementing the requirements. You smashed it. Well Done. Your project is complete! There is nothing else to say other than... it's time to merge it :shipit: Congratulations! πŸŽ‰

    goodjob

    Now you can merge this branch πŸš€

    Optional suggestions Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

    samuelmoiwa

    πŸ’» πŸ‘©πŸ½β€πŸ’» Happy Coding! πŸ‘¨πŸ½β€πŸ’» πŸ–₯️

    Feel free to leave any questions or comments in the PR thread if something is not 100% clear. Please, remember to tag me in your question so I can receive the notification.


    As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

    opened by samuelmoiwa 0
  • To Do list: list structure

    To Do list: list structure

    In this "To-Do-List" project, I created the basic structure of a page single page application with HTML, CSS and javascript, using the webpack bundler to bundle all the source files in the "src" folder into the "dist" folder for distribution. I did the following things:

    • Installed the webpack bundler
    • Generated the index.html file in the dist folder from the source folder using an html plugin
    • Wrote functions function to iterate over the tasks array and populate an HTML list item element for each task.
    • Added CSS styling for the to do list application.
    • Deployed our project on github pages.
    opened by amon-cofie 0
  • peer-to-peer code review

    peer-to-peer code review

    Morning Code to code review

    Nice job πŸ‘ Clean code! Excellent.

    Just a few suggestions to make here

    • What do you think about putting the modules directory into the source directory, we think it would make your repo look better organized.
    • Also try to add a few descriptive comments to your functions to increase its readability. Well done πŸ‘
    opened by Okechukwu-muokwugwo 1
Owner
amon-cofie
I'm a Full Stack Developer with expertise in JavaScript, React, Redux, Ruby and Rails. I play chess in my spare time. I'm open to new opportunities
amon-cofie
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
A simple to-do list web application built with ES6 and bundled with webpack. Checkout the awesome features it offers.

A To-do List Web Application A simple to-do list with amazing features and a great ux. built using ES6 and npm webpack. Check it out to explore its am

Chia Carlyle 9 Apr 15, 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
Esther Udondian 6 Aug 1, 2022
Satyam Sharma 3 Jul 8, 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
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
This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago CΓ‘rdenas 6 Jun 9, 2022
A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 2022
Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Ghazanfar Ali 8 Sep 28, 2022
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.

Awesome books App using Module Awesome books App using Module This book list was built using modules and other ES6 syntax. It allows users to add/remo

Esther Udondian 6 Jul 25, 2022
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.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
JavaScript project for the Leaderboard list app, built using webpack and ES6 features.

Leaderboard List App JavaScript project for the Leaderboard list app, built using webpack and ES6 features. The leaderboard website displays scores su

Samuel Mwape 8 Aug 16, 2022
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

Todo-List 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 s

Duane David 10 Sep 28, 2022