Go Back

Todo List

Updated on 2018-02-28 21:32:45

Python

Description:

A todo list application is like a checklist, where you add items to a list, usually an action. When you have done what you put on the list, you check it off, meaning you have done the task.

An example would be a work todo list, as you would put tasks you would need to complete work in a certain timeframe. So an example of this would be, finish a report, or write up a contract. Once you have finished the report, you just tick it off, then the list would just look like:

Before finishing the report:

Tick Todo App
  Finish Report
  Create a Contract

After finishing the report:

Tick Todo App
X Finish Report
  Create a Contract
  1. Installation
  2. Setup
  3. Creating the app
    1. Creating the window
      1. Window
      2. Mac
    2. Creating inputs
    3. Creating the backend
  4. Conclusion
  5. External resources 

 

Installation

Installing on Windows

If you wish to install on windows either in 32-bit or 64-bit, you will need to go to Pythons download page:

Click Here

Once the download is complete, you will need to find the installer and click on it. 

Afterward, a window will appear and ask you, if you wish to install Python for all users or yourself (you can pick accordingly), once choosing you can press next.

After that, the window will ask you where you would like to install it, following your selection you can press next and choose what features you wish to be installed and press next, then press finish. 

Finally, just to make sure that Python has been installed and is the correct version, open the command prompt by typing cmd in your menu tab. After the window appears, type the command python -v and it will display with the response of Python (current version number will appear here).

Installing on Mac

If you wish to install on a Mac, you will need to go to Pythons download page:

Click Here

Once you have downloaded the .pkg file, double-click on it, to launch it, which should open an installer window asking if you wish to install, just press continue, agree and install buttons as they appear. 

After Python has been installed, open the Terminal and enter python --version and it will display the response of Python (the version that has been installed).

Setup

To setup, you will need a text editor like Atom, Visual Studios Code, or you can use the Python code editor you get from installing Python.

Creating the app

First, to create a window, we will be using Tkinter module, which is a toolkit for an interface that has a Graphical User Interface, to implement the module, you need to type:

from tkinter import*

After that, we want to create a window object, to do this you need to type:

window = Tk()

Once you have typed this, and run the program, the window will open briefly and then close, which is not what we want, to combat this, we need to tell the program to keep running, like a loop, so we type:

window.mainloop()

Now if you launch the program, you should get a plain window that won't close unless you close it.

However, this window needs a title, to add a custom window title, you need to type:

window.title('Todo List')

Finally, if you wish to disable the resizing feature of the window, you will need to add this:

window.resizable(0,0)

Now, you have a window with a title, but it is bland and has no interactivity, to make the program more like a todo list, we will create a text input so that users can type their tasks, a tick box so that the user can have a visual, that tells them that they have done the task, and finally a submit button so that they can add the tasks to the list.

First, we need to create a title to the program, to do this we need to write this:

Title = Label(window, text="Todo List")​​​​​​

So, what does this piece of code mean?

Basically, we are calling the label Title and stating that we are creating a Label. In the brackets, we are stating where to display it, which of course it in our program window, and then stating what properties the Label has, which we put text, and the value of the property which was Todo List, we can also add other properties like the background colour of the label, which you can add within the brackets by typing,

bg="white"

However, in this instance, I have decided to avoid it and told the program to pack it in the parent, which is the window. by writing:

Title.pack()

Now we need to create another label that will act as a display for what our user's input, to do this we need to follow the same pattern as we did for the title, so it would look something like this:

Display = Label(window, text=" ")

So basically we are making a blank label, that the user won't be able to see. However, it will act as a placeholder, until the user submits a task, which will then display the user's inputted task.

Next, we will need to add it to its parent to display it in the program, which in our case is the window, so we just repeat the same line of code that we wrote for the Title label, but change it so it does it for the Display label, so it should look something like this:

Display.pack()

Now we are going to make the text input so that users can add their tasks to the list. 

To do this, you will need to type the following:

UserInput = Entry ( window )

So basically we are calling the text input/textbox UserInput. however, you can call it whatever you want, after calling the text UserInput, we actually need to say that we want a text input assigned with this variable name, so we type Entry, which is the text input, to tell the program that is the item we want, then we have to type inside some brackets where we want the Entry component, so for this example I said I wanted it placed in the main window. So once you have written that line of code, you will need to do the same thing you did for the Title component, which is to type:

UserInput.pack() 

I would actually recommend doing this with every component you make within your program.

The front-end of your Todo app should look something like this:

Front-end of Todo List App

Now that the front-end of the app is done, let's get into the back-end of the app.

The first thing we need to do is create an Add function, which will allow the user's inputted task be displayed in the Display label that we had made earlier, to do this we need to define it, so the code should look like this:

def Add() :

So basically what we are saying is that we are defining a function which in our case is called Add, but you can name it whatever you want.

The next thing we need to do is actually, give this function some instructions so that when it is called by a button, for example, it can actually do something, which is displaying the user's input in our situation.

The first line of code we will write is:

Conclusion

In conclusion, your code should look a little like this if you were following the tutorial step by step: 

from tkinter import*

window = Tk()
window.title('Todo List')

Title = Label(window, text="Todo List")
Title.pack()

Display = Label(window, text=" ")
Display.pack()

UserInput= Entry( window )
UserInput.pack()

window.mainloop()

Take a quick recap quiz

External Resources 

HTML, CSS, JS

Coming Soon

C#

Coming Soon


Written on 2017-11-21 05:35:37

Some of our Sponsers

Want to become a sponser, and help BitBulb grow?