The project focused on creating To do list structure for organising the daily completed or non-completed activities.

Overview

To-Do-List

The project focused on creating To do list structure for organising the daily completed or non-completed activities.

Built With

  • HTML
  • CSS -JAVASCRIPT -Webpack ​

Live Demo (if available)

Getting Started

#To get a local copy up and running follow these simple steps:

-Open terminal and navigate to the folder you would like to put these files. -Type these commands into the terminal: -git clone [email protected]:AlphaNtihinduka/To-Do-List.git -cd todo -npm install -To build the project with webpack -npm run build -Open dist/index.html in you web browser. -To run the webpack dev server -npm run start -Web browser will open on localhost:8080

Authors

👤 Author1

.gitignore

node_modules/ test.md

Comments
  • Add remove test part 1

    Add remove test part 1

    • This is a pair-programming project. Please decide whose project will you use for testing.
    • 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.
    • Take a look at each of these functions. Are they pure functions? If the answer is "yes" then writing tests for them should be straightforward. Some of those functions however will update localStorage and manipulate the DOM. For those, you will need to use mocks:
    • Mock a storage object to "imitate" localStorage operations (only if you are using jest < 24.x, in newer versions localStorage is mocked automatically).
    • Mock HTML to test if add/delete functions add or remove exactly one
    • element to/from the list in the DOM.
    • Make sure you group your tests using the describe() method.
    opened by AlphaNtihinduka 0
  • Interactive list branch

    Interactive list branch

    "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

    This PR includes the following requirements:

    • Add a new JavaScript file and import it as a module:
    • it will contain 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 AlphaNtihinduka 0
  • Add remove

    Add remove

    "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

    This PR includes the following requirements:

    • Remove all hardcoded items from the tasks array.
    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for deleting a task (remove an element from the array).
    • Implement a function for editing task descriptions.
    • By default, new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal 5).
    • Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should be set to 1).
    • All changes to the To-Do List should be saved in local storage.
    opened by AlphaNtihinduka 0
  • Js best practice

    Js best practice

    https://github.com/AlphaNtihinduka/To-Do-List/blob/94e2a4388d42f28bc14db60fb2d771690071da80/src/modules/function.js#L31-L88

    Kindly avoid executing multiple actions inside a single function. This may prevent other actions from firing.

    https://github.com/AlphaNtihinduka/To-Do-List/blob/94e2a4388d42f28bc14db60fb2d771690071da80/src/modules/function.js#L31 For best practice, put the declaration of a variable into consideration. This enables you to avoid repetition use of elements. https://github.com/AlphaNtihinduka/To-Do-List/blob/94e2a4388d42f28bc14db60fb2d771690071da80/src/modules/function.js#L51 For best practice, put the declaration of a variable into consideration. This enables you to avoid repetition use of elements. https://github.com/AlphaNtihinduka/To-Do-List/blob/94e2a4388d42f28bc14db60fb2d771690071da80/src/modules/function.js#L63 For best practice, put the declaration of a variable into consideration. This enables you to avoid repetition use of elements.

    https://github.com/AlphaNtihinduka/To-Do-List/blob/94e2a4388d42f28bc14db60fb2d771690071da80/src/modules/function.js#L8 Kindly make use of the arrow function for best practice.

    opened by AlphaNtihinduka 0
  • Code review Todo list

    Code review Todo list

    • Your application interface is very good.
    • Your code is very organized

    Improvements

    • Add more modules and separate functionalities
    • Please use the change event listener
    opened by wayungi 0
Owner
NTIHINDUKA ALPHA
I am a full-stack web software developer ( front-end and back-end) open to new job opportunities and available for hire.
NTIHINDUKA ALPHA
zieeco 12 Jul 8, 2022
A simple app that helps a user monitor daily activities by adding, storing and deleting activities.Built with HTML,CSS and JavaScript

To-do-list A simple list app that allows a user to add and remove tasks. Built With HTML CSS JS Webpack Live Demo Click To-do-list to see the page. Ge

Catherine K 7 Apr 8, 2022
A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Francis Wayungi 6 Dec 23, 2022
A daily activity tracking application that helps to organize your daily tasks and keep track of tasks that have been completed, or yet to be completed.

To-Do-List This is my To-Do List project in the Microverse curriculum. Built With HTML CSS Javascript (Webpack) GitHub Live Demo Live Demo Link Gettin

Hammed Adisa 8 May 7, 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
A To-Do-List app designed to help users organise their daily activities

A To-Do-List app designed to help users organise their daily activities. it simply creates a list of things you want to do and allows you to mark them as complete. It was built with HTML, CSS and JavaScript.

Eshetu Melaku 10 Jun 9, 2022
To Do list app. Very useful to keep track of daily activities. Made with ❤️, JavaScript and bundle with Webpack

To Do List ⚙️ This is a To Do list App to practice Javascript and Webpack deployment. Live Demo ⚙️ GitHub Pages: DEMO Tech ⌘⇧ HTML & CSS best practice

Raul Ospina 11 Oct 17, 2022
A todo list app where one can create activities to do, and delete them when completed. Created with JavaScript.

My ToDo List project ToDo List: setup the structure. Built With HTML, CSS, JS ESLint, Stylelint, Web Hint, Lighthouse Online Version Link This project

John Nduati Kagiri 8 Jul 21, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
📝 Application to help you focus on your daily activities.

INFOCUS-API Focus on your tasks! ?? ?? Topics: about the project methodology and design libs and tools authors ?? About the Project: ?? Infocus: Is a

Marcos Guilherme Goulart Moraes Campos 2 Nov 1, 2022
The website which can help you to organize your daily or weekly activities and review them when you need them. you can add, remove and delete an activity

To Do list To do project is webpack project that list activities someone can do at a specific time In this TO-DO list, you can add or remove you activ

Joffrey NKESHIMANA 5 Jul 21, 2022
To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed.

To Do App To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed. Users c

Ishpaul Singh 6 Jul 21, 2022
Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed

Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed. It provides an option to edit activities and also delete them. The clear all applies to those that are marked as completed by selecting the checkbox.

Oscar Bermudez 8 Apr 8, 2022
The project is a To-Do list project to help plan daily, weekly or monthly activity. I used Html, CSS and JavaScript Technology to execute the project.

<<<<<<< HEAD To Do List This project is geared towards applying acguired skills for development of my porfolio through the following practices: Create

Victor Efosa Osagie 6 Dec 19, 2022
A simple project to keep track of your activities. It allows basic CRUD operations to organize your to do list.

todo-list A simple project to keep track of todo list. Built With HTML CSS Javascript Webpack Live Demo You can checkout the live version here Getting

Abdelmejid Oumer Ali 9 Jul 20, 2022
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v

divine charlotte 25 Jan 3, 2023