Solo programming project for week one of module 2 of the Microverse Program

Last update: May 6, 2022

Overview

To-do List

Solo programming project for week one of module 2 of the Microverse Program.

"To-do List" is a simple website that displays a list of books and allows you to add and remove books from that list.

First 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 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 provided by Microverse.

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.

To setup the project on your machine:

Getting Started

Clone the repository and setup the linters

Prerequisites

npm ( Node Package Manager )
git and Github Account

Setup

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

Open terminal
Change the directory you want put the repo
Then run i. Run git clone [email protected]:mengiefen/awesome-books.git ii. cd repo-name/

Install

Webhint linter

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

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

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

Run tests

Webhint linter -npx hint . on the root of your directory of your project.
Stylelint linter
- npx stylelint "**/*.{css,scss}" on the root of your directory of your project.
ESLint linter
- npx eslint . on the root of your directory of your project.

Built With

HTML
CSS
Javascript
Love

Live Demo

Live Demo Link

Author

👤 Ivan Silva

GitHub: @iKuartz
Twitter: @iKuartz01
LinkedIn: Ivan Silva

🤝 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

A big thank you to Microverse, for providing me the knowledge and tools to finish this project.
An even bigger thank you to all my coding partners who helped me get here.

📝 License

Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

Disclaimer: This is a human-readable summary of (and not a substitute for) the license.

You are free to:

Share — copy and redistribute the material in any medium or format
Adapt — remix, transform, and build upon the material

The licensor cannot revoke these freedoms as long as you follow the license terms.

Under the following terms:

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

NonCommercial — You may not use the material for commercial purposes.

No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.

Notices:

You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.
No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.

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

Nov 4, 2022

This project is part of the 2nd Module 2 Block of Microverse curriculum

To-do list is a tool that helps to organize our day. It simply lists the things that you need to do and allows you to mark them as complete by using ES6 and Webpack!

Mar 14, 2022

I Built This project in microverse's second module, in this single web application the user Can add, remove and display the list of books.

Awsome Books I Built This project in microverse's second module, in this single web application the user Can add, remove and display the list of books

Aug 3, 2022

THE PROJECT IDEA is to create a platform where developers can improve on their typing speed and accuracy by playing a coding typing game in their preferred programming language, which will make developers both beginners and pros get more familiar with the syntax of their programming languages.

Typing Game for Developers to Boost their Typing Speed and Accuracy Read Blog Technologies Yarn React JS Html Css Features 🎹 Typing Area 🌟 Ranking ?

Dec 14, 2022

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Dec 28, 2022

Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Nov 15, 2022

Comments

Implemented functions and local storage

For this part, what I did was:

Add a new JavaScript file and import it as a module:
It contains methods related to the status updates (completed: true/false).
Add event listener to the checkbox (change).
Update items object's value for completed key upon user actions.
Implement a function for the "Clear all completed" button (use filter() method).
Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.

opened by iKuartz 2

Project day 1
What I did was:

[ ] 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.

(https://www.youtube.com/watch?v=AcUd-_Yjjqg)
opened by iKuartz 0
Changes to improve the code according to best practices
[ ] Instead of creating loops to iterate with the arrays, use the .map() function.

[ ] Instead of changing the original array, creating a new one is more advisable.
opened by iKuartz 0
Code Review
First of all, great work 💯 you have done an amazing job. As a way to improve your code, we recommend you the following:

To keep your variables updated and organized you can work firstly just with the array object in all your functions and update the local storage whenever is a change in the array.

You can parse the variables to the module functions as parameters, instead of as global objects, and call the functions for the local variables in the index.js.

When populating you can change the p tag that's used to display the description of the task for an input tag and display the description using the 'input.value' property.

Finally, we recommend you to use the Javascript debugger in order to see step by step how the variables are changing in order to recognize if the changes are happening as they are supposed to.
opened by AlejandroNeira98 0