Skip to content

GeorgeDeyneka/to-do-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

To Do List

Get Started

If you want to see the project without deploying it locally, you can follow this link to GitHub Pages: https://georgedeyneka.github.io/to-do-list

So, if you want to look at the project's code and deploy it, follow the steps below in the "Installation" section.

Installation

  1. Clone the repo
git clone https://github.com/GeorgeDeyneka/to-do-list.git
  1. Install NPM packages
npm install
  1. Run this command for a dev server. Navigate to http://localhost:7070/. The application will automatically reload if you change any of the source files.
npm run watch

About project

This is a simple task list. I wrote it back in November in pure JavaScript and SCSS, but later I changed my mind about writing code.

So, in March, I built this project with Gulp, translated it to TypeScript, and completely refactored the code. I rewrote the code into classes and divided them into understandable methods.

When refactoring, I used the principles of KISS, DRY and the Single Responsibility principle.

Built With

  • HTML5
  • SASS
  • TypeScript
  • NPM
  • Gulp
  • GitHub

Usage

Main Page

  • When you open the application, you see the main page.

main-page-demo


Add tasks

  • You can add tasks by entering text and clicking the "Add Task" button.

  • So, at the moment you have formed several tasks. Marking completed tasks, they will be crossed out and sent to the bottom of the list.

task-list-demo


Edit task

  • By clicking on the edit button next to the task you need, you will see the button change to "Edit Task", and the old task text will be automatically inserted into the input field. When you edit a task, the other edit and delete buttons are disabled and the edited issue is highlighted.

  • After you finish editing, just confirm it by clicking on the button. The edited task will remain in the list in the same place where it was before.

edit-task-demo


Delete task

  • If you need to delete a task, you can also do so by clicking the delete button next to the relevant task.

delete-task-demo

  • And even if you close the tab and return to the application later, your tasks will be saved because they are stored in local storage.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

If you want to improve the project code, you need to:

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Don't forget to give the project a star! Thanks again!

My Contacts (Links)