ivonnebenitesrodriguez / todo-list-project

📗 Table of Contents

• 📗 Table of Contents
• 📖 todo-list-project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 todo-list-project

todo-list-project This project is about a Todo List app. The website displays the user's input and gives the functionality to add, remove and mark user's input.
This project is mostly build in JavaScript.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• JavaScript
• Webpack

Key Features

• Set up files and dependencies to configure Linters 📍
• Create a featured branch to store all the changes before doing the merge to main branch 📍
• Create a .gitignore file to store hidden files 📍
• Understand the usage of JavaScript: Events, DOM manipulation, syntax, and Objects to store data📍
• Understand the usage of ES6 JS Modules and its syntax how to import and export pieces of code to our index.js file 📍
• Understand the set up of Webpack and its dependencies in our project 📍

(back to top)

🚀 Live Demo

This is the live demo to awesome-books-ES6:

• Live Demo Link

(back to top)

💻 Getting Started

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

Prerequisites

📍 In order to run this project you need:

1. Verify if you have node.js installed in your system

 node -v

If you have installed it, it will output the version of node.

2. If you do not have it installed, go to the page : https://nodejs.org/en and download it.

3. Upload this file: linters.yml to use ESLint JavaScript analytic tool.

4. Copy .eslintrc.json to the root directory of your project.

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone [email protected]:myaccount/IvonneBenitesRodriguez/todo-list-list-structure

Create a featured branch besides main branch :

   git checkout -b nameofyournewbranch

Install

Install this project with:

a) Enter to your repo's folder:

  cd awesome-books-ES6

b) For Webhint tool, install this command :

     npm install --save-dev hint@7.

c) For StyleLint tool, install this command:

   npm install --save-dev [email protected] [email protected] [email protected] [email protected]

d) For ESLint tool, install this command:

  npm install --save-dev [email protected] [email protected] [email protected] [email protected]

Usage

To run this project, execute the following command:

a) For Webhint tool:

  npx hint .

b) For StyleLint tool:

    npx stylelint "**/*.{css,scss}"

c) For ESLint tool:

    npx eslint .

d) For Webpack set up:

     npm install --save-dev webpack

Run tests

To run tests, run the following command:

   npx hint .
   npx stylelint "**/*.{css,scss}"
   npx eslint .
   npx webpack

Deployment

You can deploy this project using:

• Github pages
• Netlify

(back to top)

👥 Authors

👩🏽‍💻🌸 Author

• GitHub: @IvonneBenitesRodriguez
• Twitter: @IvonneBenitesR
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• - I will add a functionality to display timeDisplay section.
• - I will add a images.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project, and consider this information useful to you, you can give me a ⭐️ so I can be highly motivated by your support.

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for giving me the opportunity to make real my dreams.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

todo-list-project's Issues

todo-list-list-structure

Issue: todo-list-list-structure

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

  Goal:
  The goal is to understand the usage of ES6 modular Js and ES6 syntax, as well as Webpack.

add-remove-section

Issue: add & remove section

• I will remove all hardcoded items from the tasks array.
• I will create a new JavaScript file for the new functionality
• I will Implement a function for adding a new task (add a new element to the array).
• I wil Implement a function for deleting a task (remove an element from the array).
• I will Implement a function for editing task descriptions.
• I will save the data in the localstorage.

Goal

• the goal of the project is to understand how works ES6 syntax and JavaScript modular