Jvcgoncalves / to-do-list

my first project using angular

Home Page:https://organize-yourself.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Organize yourself (to-do list)

Website to you save your tasks and manage your time, you can add the delivery date to know when you need to finish that task, the site return to you if you are late or don't. So if you need to organize your life, this site will help

techs/libs used on developement

  • Angular 17
  • TypeScript
  • SASS/SCSS
  • Bootstrap
  • Git

Services

  • Github
  • Netlify

Features

  • Register an account
  • Edit profile
  • Delete account
  • Save task
  • Delete task
  • Edit task
  • See task(s)
  • Filter and search tasks

How to use

1 - When you access the main page will be this

image

1.1 - there you can login if you have registered yet, else you can register by clicking on "Não possui conta? cadastre-se!"

1.1.1 - In case of you forgot you password, you can fill with email used to register and click on "Esqueceu sua senha?"

1.2 - On register you need to fill this inputs and have verified data

1.2.1 - Verifications
  • Password size
  • Profile name allows only Letters
  • Email base verification

image

1.3 - After get success on register you will see this and you can click on "Fazer Login" button to return to Login part and login with you registered account

image

2 - Once logged, you don't need to login again (unless you log out of your account or clean browser cache), the inital page of a logged user is the one below

image

2 - ...With some task

image

2.1 - Filter, three filter option,

  • first one don't apply any filter, so show all tasks.
  • Second show all not completed tasks
  • Last one shows all done tasks

image

2.2 - Search input by task name

image

2.3 Navigate menu and your usename, click on "Nova tarefa" to add new task

image

3 - On add new task you will need to fill this input and complete the validations, you also can choose if you want to reset the form when you submit

image

4 - You can click on "Detalhes" button

image

5 - If you click on "Detalhes" button, you will see this page, there you toggle done status, edit task info or delete the current task

5.1 - To delete task you need to confirm an confirm from the browser

image

6 - At edit page you will see this form, that have the same validation from add tasks inputs

image

7 - At profile page you will see this page

image

7.1 - Click on the edit button at the end of input, you can change you profile data

image

7.2 - Changing data you be able to confirm changes ("Editar") button or discart ("Cancelar" button) them

image

7.3 - To confirm changes you need to write your last current password (Case your changing password don't forgot it)

image

8 - Click on "Excluir" button you have to confirm your password to and if you writes the right password, your account and tasks will be deleted. You will be redirected to initial page

image

Links

Versioning

1.0.0.0

Authors

  • João Vitor Gonçalves da Costa

Please follow github and linkdin (link in my profile )! Thanks to visiting me and good coding!

About

my first project using angular

https://organize-yourself.netlify.app/


Languages

Language:TypeScript 41.4%Language:SCSS 37.6%Language:HTML 21.0%