Deployed link: https://todo-app-p4.herokuapp.com/login/?next=/

Just a simple to do app! Once you sign up you can add tasks that you need to get done.

A first time user will se this page:

If you have an account just sign in if you dont have one press on sign up. It will look like this:

When you press sign up you will se this page:

Fill in the form to create an account and press on register:

When you press on register you will automatically sign in on your new account:

When you are signed in press on add task +:

When you press on add task + you will be redirected to the task form:

When you're done filling in the form press on submit:

When you press on submit your task will be added to your task list and it will show you how many incompleted tasks you have like this:

How it looks when you add more tasks:

When you complete a task to mark it as complete or when you want to edit a task press on that task you want to complete/edit and you will be redirected to the task form:

After you press on submit when you have edited/completed a task it will look like this:

If you need to delete a task press on the red "X":

When you press on the red "X" to delete a task you will be redirected to this page:

Now it's only two tasks left:

If you have many tasks and it's hard to find one search for it in the search bar:

Sign out is located in the top right corner:

Time and date:

First I started with starting a project and then an app in django. After that I connected my views and urls file for url routing.

I created one model as my database table with the attributes: user, title (for task titles), description(for task discriptions), complete(for if a task is complete or not)

and create(for the time and date).

I used db.sqlite3 while in development.

started with the task list page wich displays your tasks, search bar, add task button, delete task button, logout button and time.

the detail page just showed your task. I removed it later because it was a unnecessary.

The create page to create your tasks and mark your tasks as complete.

The delete page shows up when you want to delete a task. It asks you if you are sure.

restricted pages: If a user is not logged in it will be redirected to the log in page.

user specific data: A user only sees their own tasks when signed in.

set up the static folder and added necessary logic to link it to my html pages.

static folder is linked to main.html and all other html pages inherit from main.html.

Did not migrate the data from dbsqlite to heroku postgress since the project wasn't deployed when i used dbsqlite.

I want to be able to add, edit and delete tasks. (completed)

I want to be able to tell the time. (completed)

I want to be able to se how many tasks I have left to do. (completed)

I want to be able set a time and date for my tasks. (incomplete)

I want to be able to get notifications when its time for me to do a task (incomplete)

I want to be able to create an account. (completed)

I want to be redirected to the correct page (completed)

I want to be able to delete a user(can be done)

I want to be able to se, edit, add and delete users tasks. (can be done)

I want to be able to create a new user (can be done)

All features are explained and shown in the "how it works section (2.)

Will add a way for a user to add time and date to their tasks and so they can get notified in some way

Red/orange in the header with all the text inside white so anyone can se it clearly.

Text in the body is black. The circle wich shows if a task is incomplete is gray. the one that shows if its completed is green.

button text is red/orange.

Text font used is Raleway. (link in credits)

Django, python, javascript ,html and css.

asgiref==3.5.2 cloudinary==1.29.0 dj-database-url==0.5.0 dj3-cloudinary-storage==0.0.6 Django==3.2.14 gunicorn==20.1.0 psycopg2==2.9.3 pytz==2022.1 sqlparse==0.4.2

Python validation: https://www.pythonchecker.com/

The model:

views.py :

I have some linter problems and very small pep8 issues. Atleast everything works :)!

Lighthouse:

CSS validation:

Javascript validation:

Don't know what to do with line 36 semicolon is there and code works so renderTime should be defined.

(confused and don't have time before the deadline to check with tutor assistance)

while in development before i got the logout to work I tested if the redirect worked by deleting my session id in dev tools.

This was very helpfull because I could also test different accounts while my logout wasn't working.

Manual testing was done many times. Same procedure as in the "how it works section"(2.) everything works as intended.

I haven't tested the Javascript in anyway except for implementing it on every page and made sure to not get any errors in the console.

I used javascript to display the time and date in real time and it works as intended.

only "bug" I had was that I got a JS error in the console on every page that didint have the date and time implemented

To solve this easy I just added it to every page. fortunately it still looked good.

Tested the app in google chrome, microsoft edge, on my android phone with google chrome and on a couple of iphones.

The app seems to work on every device and browser I've tested it on

Go to resources and chose heroku postgres as a add on.

After that I pressed on settings and reveal config vars

Copied the database url and created env.py file.

Made the necessary imports in the env.py and set the necessary environment variables.

Hid the secret key and added it to heroku config vars.

After I referenced the env.py file in my settings.py

Commented out the db.sqlite database logic and added the logic to connect to postgres

To test if the database is working i ran python3 manage.py migrate in the terminal and all the migrates happened again in heroku postgres.

Create an account and copy the api environment variable that's on your dashboard.

add this to your env.py file

add a new config var in heroku for cloudinary and post the link in there aswell

have to add cloudinary_storage and cloudinary to installed apps.

Added STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage' to line 133 aswell to tell django to use cloudinary.

I also have to tell were the templates will be stored so added logic for that on line 21 in settings.py.

Need to change the dirs key aswell to point towards our new templates directory variable.

Added heroku host name aswell to allowed hosts in settings.py

After this I created a procfile and added: web: gunicorn todo_app.wsgi in it.

after this go back to heroku and press on the deploy tab and press on github and search for your project and press on connect and after that on deploy branch.

Make sure to have all pip installs that are listed in the technology section.

https://www.youtube.com/watch?v=llbtoQTt4qw&t=3511s https://www.dennisivy.com/post/django-class-based-views/ https://ccbv.co.uk/ https://docs.djangoproject.com/en/3.1/ref/class-based-views/mixins-single-object/#django.views.generic.detail.SingleObjectMixin.get_context_data https://fonts.google.com/specimen/Raleway https://www.toptal.com/designers/htmlarrows/ https://www.youtube.com/watch?v=RE0HlKch_3U&t=0s https://www.youtube.com/watch?v=5zNR3E6WRLE https://docs.djangoproject.com/en/1.11/ref/models/fields/ https://docs.google.com/document/d/1P5CWvS5cYalkQOLeQiijpSViDPogtKM7ZGyqK-yehhQ/edit https://docs.google.com/document/d/1P5CWvS5cYalkQOLeQiijpSViDPogtKM7ZGyqK-yehhQ/edit