https://github.com/m0rrighan/to-do-list

A simple yet powerful to-do list, inspired by the minimalist website. It allows the user to add tasks, edit and remove tasks, clear all completed tasks.
https://github.com/m0rrighan/to-do-list

css html javascript webpack

Last synced: about 1 year ago
JSON representation

A simple yet powerful to-do list, inspired by the minimalist website. It allows the user to add tasks, edit and remove tasks, clear all completed tasks.

• Host: GitHub
• URL: https://github.com/m0rrighan/to-do-list
• Owner: M0rrighan
• License: mit
• Created: 2021-09-22T13:19:39.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-02T21:39:02.000Z (over 4 years ago)
• Last Synced: 2025-01-14T17:52:07.742Z (over 1 year ago)
• Topics: css, html, javascript, webpack
• Language: JavaScript
• Homepage: https://radmila-to-do-list.netlify.app/
• Size: 2.2 MB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# To-do-list

A simple yet powerful to-do list, inspired by the minimalist website.

## Live Demo

[Live Demo Link](https://m0rrighan.github.io/To-do-list/)

## Built With

- HTML

- CSS

- JS

- WEBPACK

## 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 (`
` or `
` 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:

  - description [string].

  - completed [bool].

  - 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 apear in order of the index values for each task.

- Create 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. [link to video](https://www.youtube.com/watch?v=AcUd-_Yjjqg)

- All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.


## Getting Started

**To clone this project**

**Run command: $git clone https://github.com/M0rrighan/To-do-list.git**

**or press the green Code button in the upper right corner and choose to download from the Download ZIP link.**

## Prerequisites

- Code editor (VS Code, Sublime, Atom)

## Authors

👤 **Author1**

- GitHub: [@M0rrighan](https://github.com/M0rrighan)

- Twitter: [@RadmilaStojceva](https://twitter.com/RadmilaStojceva)

## Show your support

Give a ⭐️ if you like this project!

## 📝 License

This project is [MIT](./MIT.md) licensed.