Skip to content

This is a single-page website that allows you to create a to-do list. Users can add, modify and delete items. Also it allows to check their tasks and erase all completed ones. Built with HTML, CSS, JavaScript to make the website more user-interactive and Webpack

Notifications You must be signed in to change notification settings

emiliazm/todoList

Repository files navigation

Awesome books with ES6.

Hello! To do list is a single page website that allows you create a to do list. Re-creating this website you will learn how to give some functionality to your sections and make your website more user-interactive. Apart from creating and display a list you will learn how to set and get items from local storage and how to use ES6 and webpack.

Built With

  • HTML
  • CSS
  • JavaScript
  • Webpack
  • Linters

Getting Started

Setting up this project locally: On your terminal: 1- Clone this repository to your computer: git clone git@github.com:emiliazm/Todo-list.git. 2- Open the project on your code editor: "cd Todo-list" and "code ." 3- Install npm package: npm install. 4- Run website: npm run start.

Live Demo (if available)

Live Demo Link

Prerequisites

Re-create your Awesome books app following the rules:

  • 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 appear 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.

    Authors

    👤 Emilia Zambrano

    🤝 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

    • Microverse README template.
    • Figma.

    📝 License

    This project is MIT licensed.

About

This is a single-page website that allows you to create a to-do list. Users can add, modify and delete items. Also it allows to check their tasks and erase all completed ones. Built with HTML, CSS, JavaScript to make the website more user-interactive and Webpack

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published