Web app for adding your daily tasks in todo list

Overview

To Do List

This is an example of a web app for adding your daily tasks in todo list. You can check task when your task is finished and it will be mark as finsih. Also you can delete and change description of tasks.

I as was using Javascript, HTML, CSS and bootstap. I got Webpack for bundling dependencies.

Built With

  • Language: HTML, Javascript
  • Technologies: CSS, Linter, git
  • Framework: Bootstap
  • Packages: Webpack

Live Demo (if available)

Live Demo Link

Getting Started

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

Download it as a ZIP file

or

Clone it in your local machine using GIT

to get a local copy , clone the repository using git clone (https://github.com/Sanja969/To-Do-List.git)

Authors

πŸ‘€ Sanja Mandic

I am an aspiring web developer from Serbia.

🀝 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

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc
Comments
  • Made jest test for update status and change task description

    Made jest test for update status and change task description

    Made jest test for update status and change task description:

    • made new model - update.js and move there confirmChange" and updateStatus functions, in order of cleaner look of code and better-organized code
    • add testing for edit, confirm, and updateStatus functions
    • test if the object is changed after updating and editing the element
    • Tested if storage which is imitating real localStorage was changed after updating and editing the element
    opened by Sanja969 0
  • Jest test for testing class -  Task, add and remove functions

    Jest test for testing class - Task, add and remove functions

    Jest test for testing class - Task, add, and remove functions

    • installed babel plug to transform all ES6 modules into CommonJS notation
    • created mocks folder and add imitating file for addTaksUI
    • installed "jsdom" environment and add created jest.config.js to set that environment
    • created tasks.test.js file for testing
    • tested if created object from class Task is with desired properties
    • tested if add function adding task on the list and on the fake HTML
    • tested if the remove function removes tasks from the list and from fake HTML
    • Mocked a storage object to "imitate" localStorage operations
    opened by Sanja969 0
  • Morning session code review  - Todo List

    Morning session code review - Todo List

    Suggestions from the morning session team

    • :+1: Good job in implementing the todo list project requirements

    Suggestions

    • Please consider clearing the Add to your list... form field on submitting the form this will make it easy for users to add tasks to the list.
    opened by Felix45 0
  • complete

    complete

    Milestone 3: Complete

    It seems that in yesterday's Milestone I finished all functionality, so here I just animated the button when changing the description of the task.

    Check online demo link: https://sanja969.github.io/To-Do-List/

    opened by Sanja969 0
  • Revert

    Revert "Milestone 2: Add, Edit and Remove functionalities"

    I accidentally merged this -https://github.com/Sanja969/To-Do-List/pull/3 and now I'm reverting it: Reverts: Milestone 2: Add, Edit, and Remove functionalities:

    • created class for making objects
    • saved data on local storage in order to save tasks when the page is updated
    • add functionality for edit icons, for remove button, for input, and refresh
    opened by Sanja969 0
  • Milestone 2: Add, Edit and Remove functionalities

    Milestone 2: Add, Edit and Remove functionalities

    Milestone 2: Add, Edit, and Remove functionalities:

    • created class for making objects
    • saved data on local storage in order to save tasks when the page is updated
    • add functionality for edit icons, for remove button, for add input, and refreas
    opened by Sanja969 0
  • Does my coding partner follow JS best practices?

    Does my coding partner follow JS best practices?

    Hi @Sanja969 πŸ‘‹ In this issue I am going to review your code for JavaScript best practices.πŸ™‚

    • [x] Reviewed DRY I have considered your code for DRY( Don't Repeat Yourself ) and it was very clean and there was not extra repetition.🀩

    • [x] Reviewed KISS Dear Sanja I reviewed your code for KISS( Keep It Simple, Smart ) and there are some points that you can improve it and make it better. image in here if you remove === true your code will still work.

    • [x] Reviewed Naming You could use more clear names for your elements that if someone else consider your code, it increase the code readability. for example:

    • instead of 'toDoListUI' you could use 'listsContainer' because it is more clear that it is a container of lists

    • instead of 'endCont' you could use 'deleteCheckedBtn'

    • instead of 'moveImg' you could use editImg,

    • instead of 'check' you could use 'checkBox'

    • [x] Type Checks You have used very strong checks.πŸ€‘

    GOOD LUCK @Sanja969 πŸ†

    opened by Sahar-SE 0
  • Peer-To-Peer code review

    Peer-To-Peer code review

    Your project is perfect but there are just one small issue:

    • Please add some space between arrange, act, and assert parts of the test code so that it becomes clear.
    opened by Terbeche 0
  • Clean Code - Best Practices : Naming

    Clean Code - Best Practices : Naming

    image image

    I didn't use clear naming for elements ❌

    • instead of 'toDoListUI' I could use 'listsContainer' because it is more clear that it is a container of lists
    • instead of 'endCont' I could use 'deleteCheckedBtn'
    • instead of 'moveImg' I could use editImg,
    • instead of 'check' I could use 'checkBox'
    opened by Sanja969 0
Owner
Sanja Mandic
Full-Stack Software Developer and Mechanical Engineer with a love for Javascript, Python, and mathematics. Open to new job opportunities
Sanja Mandic
ToDo list app is a simple web app that helps you organize your day, by adding, checking and deleting daily tasks

TODO List App "To-do list" is a WebApp tool that helps to organize your day. It simply lists the tasks that you need to do and allows you to mark them

Adel Guitoun 8 Oct 18, 2022
Web app for adding your daily tasks in todo list

Web app for adding your daily tasks in todo list. You can check task when your task is finished and it will be mark as finsih. Also you can delete and change description of tasks.

Sanja Mandic 15 Dec 14, 2022
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
A simple to do list app built with HTML, CSS and JavaScript. Users can add daily tasks, edit the tasks, delete the tasks when it's done

To Do List This is a website that allows users to manage the tasks. users can add every task to do and when the task is done users can delete the task

Mustafa Fahimy 8 Jul 21, 2022
A simple JS To Do List bundled using Webpack. You can add new tasks, edit existing tasks, check completed tasks, and delete tasks from the list. It is built mainly with Javascript.

To-Do-List A simple HTML list of To Do built using webpack and served by a webpack dev server. Live Link See Demo Built With HTML, CSS, Javascript To

Michael Ugochukwu 3 May 10, 2022
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 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
Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Ghazanfar Ali 9 Sep 28, 2022
This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago CΓ‘rdenas 6 Jun 9, 2022
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To Do list: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

IBRAHIM AHMAT 7 Aug 4, 2022
In this project I have build a To Do List app that you can list, add, delete and manage your daily tasks better. Build with HTML, CSS, JS, ES6, JSON

ToDo List This project is build by javascript web packages which can add and remove daily tasks. Built With Html Css Javascript Sublime Text Author ??

Sahar Saba Amiri 7 Oct 25, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 2022
JOSE ZEPEDA 10 Nov 18, 2022