Awesome books with ES6

Overview

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 [email protected]: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.

Comments
  • List structure

    List structure

    Hello!

    These are the changes that I implemented:

    • Remove all hardcoded items from the tasks array.
    • Create a new JavaScript file for the new functionality.
    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for editing task descriptions.
    • Implement a function for deleting a task (remove an element from the array).
    • By default new tasks have the property completed set to false and the property index set to the value of the new array length
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.
    • All changes to the To-Do List are saved in local storage.
    opened by emiliazm 1
  • Edit clear status

    Edit clear status

    Hello!

    These are the features that we implemented:

    • Use jest framework for testing.
    • Create a test file(s) ([..].test.js) for a file(s) containing the following functions:
      • a function for editing the task description.
      • a function for updating an item's 'completed' status.
      • the "Clear all completed" function.
    • Mock the HTML elements to test DOM manipulation functions.
    • Group our tests using the describe() method.
    opened by emiliazm 0
  • Test add delete

    Test add delete

    Hello!

    These are the features that we implemented:

    • Use jest framework for testing.
    • Create a test file ([..].test.js) for a file containing the add item and delete item functions that you want to test.
    • Mock HTML to test if add/delete functions add or remove exactly one
    • element to/from the list in the DOM.
    • Use the describe() method to group the tests.
    opened by emiliazm 0
  • DRY, KISS, and YAGNI rules.

    DRY, KISS, and YAGNI rules.

    • Clean code: There are some attributes that I am not using it. (id, classes) https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/ui.js#L73-L77
    • Create a variable for set local storage to use it over the code: https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/methods.js#L29 https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/methods.js#L35 https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/methods.js#L43 https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/methods.js#L49 https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/methods.js#L55
    • DRY: (same const declare in several functions (like liElement, lblElement, taElement) https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/ui.js#L7-L64
    opened by emiliazm 0
  • JavaScript best practices

    JavaScript best practices

    • Give a more clear name to variables: https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/ui.js#L8-L38 https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/ui.js#L91-L93 https://github.com/emiliazm/todoList/blob/17c7503b00e4c71196fd8ecc4082f7d116e7dbea/src/ui.js#L33
    opened by emiliazm 0
  • Interactive list

    Interactive list

    Hello!

    These are the features that I implemented:

    • Implement a function related to the status updates.
    • 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 with the filter() method.
    • Store the updated array of items in local storage.
    opened by emiliazm 0
  • List structure

    List structure

    Hello!

    These are the feature that I implemented:

    • Set up a new project with webpack.
    • Create an index.html file and write your HTML .
    • Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object contains three keys: (description, completed, index).
    • Create 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 appears in order of the index values for each task.
    • Create a style.css and set rules for the To Do List.
    opened by emiliazm 0
  • Morning session peer-to-peer code review

    Morning session peer-to-peer code review

    Ideally, we use a singular function in our unit tests. Using addTask and then getTask using two or more functions in the same test is not recommended. Aside from this, the tests look great.

    opened by Danie12345 0
Owner
Emilia Zambrano
Full-Stack Software Developer. Certified in HTML and CSS and JavaScript. Open to new opportunities.
Emilia Zambrano
Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

Project Name Awsome books Description the project. adding books daynamiclly Built With Major languages Frameworks Technologies used Live Demo (if avai

Alzubair Alqaraghuli 5 Jul 25, 2022
In this project, I restructure my previous Awesome books app code. The goal is to practice ES6 syntax and also make the code more organized by using ES6 modules.

Awesome Books In this project, I will restructure my previous Awesome books app code. The goal is to make it more organized by using modules. I will a

Sidney Kaguli 9 Aug 23, 2022
This project is about the awesome books we did during Microverse to build a website for adding and removing the books.Done using HTML and ES6 JAVASCRIPT and modules

Awesome-books-with-ES6 Description the project. this project is about the awesome books we did during Microverse to build a website for adding and rem

Ilham Bouaik 5 May 28, 2022
Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. built with modern JavaScript and uses SPA technology.

Aniekan udo 9 Mar 29, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Fatima Ezzahra elmenoun 5 Jan 28, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

Roberto A. Baños Alvarez 8 May 9, 2022
Esther Udondian 6 Aug 1, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application with JavaScript, the website is more interactive!

Awesome-books Description "Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By

Cindy Dorantes 11 Oct 18, 2022
Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has threee different sections: 1. books list, 2. add new book, 3. contact.

awesomeBooks-modules Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has three

Juan Diaz 6 Aug 26, 2022
Awesome books with ES6

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

Emilia Zambrano 6 May 20, 2022
Microverse Awesome Books ES6

This is a Microverse (@microverseinc) project which aims at creating a books library in which we can add/remove books, and view the available books.

Manel Hammouche 10 Aug 3, 2022
This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built with HTML, CSS, JavaScript.

Awesome Books with ES6 This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built

Dino Ronald Quispe Arias 7 Jul 21, 2022
The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules.

Awesome-Books-ES6 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules.

Favour Ezeugwa 15 Aug 18, 2022
Great web App to make a list of awesome books to read. Made with ❤️, JavaScript ES6 Modules.

Awesome Books A basic app project built with HTML, CSS and JS to keep track of awesome books. Built With HTML/CSS & JS best practices: Correct use of

Raul Ospina 10 Sep 20, 2022
This is the awesome books project, refactored to use ES6 syntax and modules

Awesome Books ES6 This is the Awesome Books ES6 project for the second week of the second module in the microverse program. Built With HTML/CSS Javasc

Lucas Costa Rodrigues 6 Aug 4, 2022
Restructure my Awesome books app code. The goal is to make it more organized by using modules and also practice the ES6 syntax.

Awesome Book In this project, I rebuild a basic website that allows users to add/remove books from a list using ES6 Built With HTML CSS Javascript Get

Chrispaix Kaze 8 Aug 15, 2022
This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Karla Delgado 10 Aug 27, 2022
In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules and also practice the ES6 syntax.

Awesome-books-with-ES6 In this project, I restructured Awesome books app code. The goal is to make it more organized by using modules and also practic

David Kasilia Mwanzia 6 Sep 16, 2022
this project's main aim is to restructure Awesome books app code to make it more organized by using modules and also practicing the ES6 syntax.

Awesome Books ES6 this project's main aim is to restructure Awesome books app code to make it more organized by using modules. also practicing the ES6

PRATAP PANABAKA 7 Sep 6, 2022