In this Python TKinter Tutorial we are going to learn about Build GUI in Python With TKinter, we will learn that how you can create your first Python GUI window in TKinter, and also how you can work with different widgets in Python TKinter.
What is TKinter ?
Python is very powerful programming language. It ships with the built-in tkinter module. In only a few lines of code (four, to be precise) we can build our first Python GUI. the IDE that we are using is Pycharm Community Edition IDE. OK we have said that TKinter is a built in library in Python it means that when you have installed Python, TKinter will be installed by default so now we are going to create our first window in TKinter.
- PyQt5 Tutorial – Build GUI in Python with PyQt5
- Working with Python Pyglet Library
- Python Speech Recognition For Beginners
- PyQtGraph Tutorial in Python
How to Create Window in TKinter
This is the code for creating window in python tkinter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import tkinter as tk # Create Instance Of Tkinter win = tk.Tk() win.title("Geekscoders.com - Window") #win.configure(background='#4D4D4D') win.minsize(640, 400) win.iconphoto(False, tk.PhotoImage(file = 'geekscoders.png')) # Prevent Window From Resizing #win.resizable(False, False) #Start GUI win.mainloop() |
First you need to create the instance of TKinter.
1 |
win = tk.Tk() |
If you want to add title for the window, you can use this code.
1 |
win.title("Geekscoders.com - Window") |
Also you can give color for your window.
1 |
win.configure(background='#4D4D4D') |
This is used for adding icon to the window.
1 |
win.iconphoto(False, tk.PhotoImage(file = 'geekscoders.png')) |
You can use this code for preventing window resize.
1 |
win.resizable(False, False) |
Run the code and this is the result.

Create TKinter Window Using OOP
OK now we want to create our window using Python Object Oriented Programming, now this is the complete code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import tkinter as tk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - Tkinter OOP Window") self.minsize(400,350) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) window = Window() window.mainloop() |
In the above code we have created main class for our Window, this class extends from tkinter.Tk.
“__init__” is a reserved method in python classes. It is called as a constructor in object oriented programming. This method is called when an object is created from a class and it allows the class to initialize the attributes of the class.
The super() function is used to give access to methods and properties of a parent class. And the super() function makes class inheritance more manageable.
The word ‘self’ is used to represent the instance of the class. By using the “self” keyword we can access the attributes and methods of the class in python.
Run the complete code and this is the result.

How to Create Label in TKinter
In this section we want to learn creating of label in python tkinter, so using label you can create and add text in your tkinter window. now this is the complete code for creating of label in python.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
from tkinter import * import tkinter as tk #ttk stands for themed tk class Root(Tk): def __init__(self): super(Root, self).__init__() self.title("Geekscoders.com - Tkinter Label") self.minsize(500, 400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.creat_label() def creat_label(self): self.label = Label(self, text = "Welcome to Geekscoders.com",background='#101010', foreground="#D6D6D6") self.label.config(font=("Courier", 20)) self.label.grid(column = 0, row = 0) root = Root() root.mainloop() |
In this code we have Object Oriented Programming in Python, first we have created a class, after that our class extends from TK.
For creating of the label you can use Label class, and you can pass the text for the label, foreground and also background of the label.
1 2 |
self.label = Label(self, text = "Welcome to Geekscoders.com",background='#101010', foreground="#D6D6D6") |
You can se the font in here.
1 |
self.label.config(font=("Courier", 20)) |
Also you can use layout management in tkinter, there are different layouts in tkinter, we will talk about this in the later part, in here we use grid layout, and we want to add our label in the grid layout, you need to specify the row and column in the grid.
1 |
self.label.grid(column = 0, row = 0) |
At the end create the object of your Root class and start your main loop.
1 2 |
root = Root() root.mainloop() |
Run the code and this is the result.

How to Create Button in TKinter
OK now let’s create button in tkinter, also we will learn how you can interact with buttons in tkinter and how you can add commands for the buttons. this is the code for creating button in tkinter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
from tkinter import ttk import tkinter as tk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("GeeksCoders.com - Button") self.minsize(350,300) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.label = ttk.Label(self, text = "Welcome to GeeksCoders") self.label.grid(column = 1, row = 0) self.button = ttk.Button(self, text = "Click Me", command = self.click_me) self.button.grid(column=0, row=0) def click_me(self): self.label.configure(text = "GeeksCoders - Text is Changed") self.label.configure(foreground = 'white', background = 'green') self.label.config(font=("Courier", 20)) self.button.configure(text = "Button Changed") window = Window() window.mainloop() |
Using this code we have created a label, also we have added the button in the grid layout.
1 2 |
self.label = ttk.Label(self, text = "Welcome to GeeksCoders") self.label.grid(column = 1, row = 0) |
In here we have created our button, you need to give text for the button and you can see that we have given command for the button and this command is connected with click_me() method.
1 2 |
self.button = ttk.Button(self, text = "Click Me", command = self.click_me) self.button.grid(column=0, row=0) |
This is the method that we have already connected in the command section, basically in here when a user clicks the button iam going to change the text of the label with the button text. and for that you can use configure() method with the respected widgets.
1 2 3 4 5 |
def click_me(self): self.label.configure(text = "GeeksCoders - Text is Changed") self.label.configure(foreground = 'white', background = 'green') self.label.config(font=("Courier", 20)) self.button.configure(text = "Button Changed") |
Run the code and this is the result.

How to Create TextBox in Python TKinter
In this part we want to create TextBox in TKinter, this is the complete code for creating the TextBox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import tkinter as tk from tkinter import ttk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("GeeksCoders.com - TextBox") self.minsize(500,400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.text_entry() def click_me(self): self.label.configure(text = "Hello " + self.name.get()) self.label.config(font=("Courier", 20)) def text_entry(self): self.name = tk.StringVar() self.label = ttk.Label(self, text = "Enter Your Name") self.label.grid(column = 0, row = 0) self.textbox = ttk.Entry(self, width = 20, textvariable = self.name) self.textbox.focus() self.textbox.grid(column=0, row=1) self.button = ttk.Button(self, text = "Click ME", command = self.click_me) self.button.grid(column=0, row=2) #self.button.configure(state = "disabled") window = Window() window.mainloop() |
You can use tkinter.Entry() for creating of the TextBox or EntryBox in tkinter, also you can give the width of the textbox.
1 |
self.textbox = ttk.Entry(self, width = 20, textvariable = self.name) |
This is used for focusing on the textbox.
1 |
self.textbox.focus() |
You can add your textbox in the grid layout using this code.
1 |
self.textbox.grid(column=0, row=1) |
In here we have created our button , we have added a command in the button, because we want to connect this command with the click_me() method, also you need to add your button in the grid layout, specifying the row and column number.
1 2 |
self.button = ttk.Button(self, text = "Click ME", command = self.click_me) self.button.grid(column=0, row=2) |
If you want to disable a button in tkinter than you can use this code.
1 |
self.button.configure(state = "disabled") |
And this is the method that we have already connected with the command button, basically in this method we are printing the textbox input in the label.
1 2 3 |
def click_me(self): self.label.configure(text = "Hello " + self.name.get()) self.label.config(font=("Courier", 20)) |
Run the code and this is the result.

How to Create SpinBox in TKinter
You can use SpinBox() class for creating of spinbox in tkinter, so now this is the complete code for this section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import tkinter as tk from tkinter import scrolledtext class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - TextBox") self.minsize(500,400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.spin_box() def spin_callback(self): value = self.spin.get() self.controlText.insert(tk.INSERT, value) def spin_box(self): self.spin = tk.Spinbox(self, from_ = 0, to = 10, command = self.spin_callback) self.spin.grid(column = 0, row = 0) scroll_w = 30 scroll_h = 10 self.controlText = scrolledtext.ScrolledText(self, width = scroll_w, height = scroll_h, wrap = tk.WORD) self.controlText.grid(column = 1, row = 2) window = Window() window.mainloop() |
In here we have created our SpinBox, and you can add the spinbox value, for example we have added from 0 up to 10, also we have added a command to the spinbox, we have connected that with spin_callback() method.
1 |
self.spin = tk.Spinbox(self, from_ = 0, to = 10, command = self.spin_callback) |
Also we are using ScrolledText, you need to add the width and height for the ScrolledText.
1 2 3 4 5 |
scroll_w = 30 scroll_h = 10 self.controlText = scrolledtext.ScrolledText(self, width = scroll_w, height = scroll_h, wrap = tk.WORD) self.controlText.grid(column = 1, row = 2) |
And this is our method for the spinbox, we have already connected this method with the command of spinbox. in this method first we are going to get the value from the spinbox and after that we insert the value in the ScrolledText.
1 2 3 |
def spin_callback(self): value = self.spin.get() self.controlText.insert(tk.INSERT, value) |
Run the code and this is the result.

How to Create RadioButton in TKinter
Now we want to create RadioButton in TKinter, you can use RadiButton class, this is the complete code for tkinter radiobutton, basically in this code we want to change the window background based on user selection value from the radio items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import tkinter as tk from tkinter import ttk COLOR1 = "Blue" COLOR2 = "Red" COLOR3 = "Gold" class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("GeeksCoders.com - RadioButton ") self.minsize(500,400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.create_radio() def rad_event(self): radSelected = self.radValues.get() if radSelected == 1: self.configure(background = COLOR1) elif radSelected == 2: self.configure(background=COLOR2) elif radSelected == 3: self.configure(background=COLOR3) def create_radio(self): self.radValues = tk.IntVar() self.rad1 = ttk.Radiobutton(self, text = COLOR1, value = 1, variable = self.radValues, command = self.rad_event) self.rad1.grid(column = 0, row = 0, sticky = tk.W, columnspan = 3) self.rad2 = ttk.Radiobutton(self, text=COLOR2, value=2, variable=self.radValues,command = self.rad_event) self.rad2.grid(column=0, row=1, sticky=tk.W, columnspan=3) self.rad3 = ttk.Radiobutton(self, text=COLOR3, value=3, variable=self.radValues,command = self.rad_event) self.rad3.grid(column=0, row=2, sticky=tk.W, columnspan=3) window = Window() window.mainloop() |
In here we want to get the value from tkinter radiobutton.
1 |
self.radValues = tk.IntVar() |
After that we are going to create our RadioButton, and we add the value for the radiobutton, also you can add the command for the radiobutton, and we have connected the command with rad_event() method. and at the end add the radiobutton in to grid layout.
1 2 |
self.rad1 = ttk.Radiobutton(self, text = COLOR1, value = 1, variable = self.radValues, command = self.rad_event) self.rad1.grid(column = 0, row = 0, sticky = tk.W, columnspan = 3) |
And this is our method, we have connected this method with command of radiobutton, basically in this method we want to change our window color based on user selection.
1 2 3 4 5 6 7 8 9 10 11 |
def rad_event(self): radSelected = self.radValues.get() if radSelected == 1: self.configure(background = COLOR1) elif radSelected == 2: self.configure(background=COLOR2) elif radSelected == 3: self.configure(background=COLOR3) |
Run the code and this is the result.

How to Create MessageBox in TKinter
In this part we want to create MessageBox in TKinter, there are different types of messagebox that you can use in tkinter, so we have Information, Warning and Error MessageBox. this is the complete code for MessageBox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import tkinter as tk from tkinter import ttk from tkinter import messagebox as msg class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - MessageBox") self.minsize(500,400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.create_button() def create_button(self): self.btn = ttk.Button(self, text = "Info MessageBox", command = self.info_msg) self.btn.grid(column = 1, row = 1) self.btn1 = ttk.Button(self, text="Error MessageBox", command=self.error_msg) self.btn1.grid(column=2, row=1) self.btn2 = ttk.Button(self, text="Warn MessageBox", command=self.warn_msg) self.btn2.grid(column=3, row=1) def info_msg(self): msg.showinfo("TKinter Info Message Box", "This GUI Is Build In Python TKinter") def warn_msg(self): msg.showwarning("Warning Message Title", "This is a warning") def error_msg(self): msg.showerror("Error Message Title", "This is an error message box") window = Window() window.mainloop() |
This is the button, basically we want to create three buttons for three messagebox, also we have connected the command of button with the specific messagebox method.
1 2 |
self.btn = ttk.Button(self, text = "Info MessageBox", command = self.info_msg) self.btn.grid(column = 1, row = 1) |
And these are the three types of messagebox method that we have already connected with the command of buttons.
1 2 3 4 5 6 7 8 9 10 |
def info_msg(self): msg.showinfo("TKinter Info Message Box", "This GUI Is Build In Python TKinter") def warn_msg(self): msg.showwarning("Warning Message Title", "This is a warning") def error_msg(self): msg.showerror("Error Message Title", "This is an error message box") |
Run the code and this is the result.

How to Create MultiChoiceBox in TKinter
In this part we want to create MultiChoiceBox in Python TKinter, so this is the complete code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import tkinter as tk from tkinter import ttk from tkinter import messagebox as msg class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - MultiChoiceBox") self.minsize(350,350) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.create_button() def create_button(self): self.btn = ttk.Button(self, text = "Open Choice Box", command = self.choice_box) self.btn.grid(column = 1, row = 1) def choice_box(self): answer = msg.askyesnocancel("Multi Choice Box Title", "Do You Want To Quite!") if answer == True: self.quit() window = Window() window.mainloop() |
This is the create_button() method, because i want when a user clicks the button iam going to show a MultiChoiceBox with different choices. you can see that we have connected this method with our choiceBox() method.
1 2 3 |
def create_button(self): self.btn = ttk.Button(self, text = "Open Choice Box", command = self.choice_box) self.btn.grid(column = 1, row = 1) |
This is the process of MultiChoiceBox creation.
1 2 3 4 5 |
def choice_box(self): answer = msg.askyesnocancel("Multi Choice Box Title", "Do You Want To Quite!") if answer == True: self.quit() |
Run the complete code and this is the result.

How to Create ProgressBar in TKinter
In this part we want to learn creating or ProgressBar in TKinter, this is the complete code for creating of TKinter ProgressBar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import tkinter as tk from tkinter import ttk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - ProgressBar") self.minsize(400,350) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.label_frame = ttk.LabelFrame(self, text = "ProgrressBar Example") self.label_frame.grid(column = 0, row = 0) self.create_progressbar() def create_progressbar(self): self.button1 = ttk.Button(self.label_frame, text = "Start ProgressBar", command = self.start_progress) self.button1.grid(column = 0, row = 0) self.button2 = ttk.Button(self.label_frame, text="Stop ProgressBar", command = self.stop_progress) self.button2.grid(column=0, row=2) self.progress_bar = ttk.Progressbar(self, orient = 'horizontal', length = 280, mode = 'determinate') self.progress_bar.grid(column = 0, row = 3, pady = 10) def start_progress(self): self.progress_bar.start() def stop_progress(self): self.progress_bar.stop() window = Window() window.mainloop() |
In here we have created two buttons, one for starting of the progressbar and the second for stopping the progressbar, we have connected buttons command with the specific methods of start_progress() and stop_progress(), these are the method for starting and stopping of the ProgressBar. also add these buttons in a grid layout.
1 2 3 4 5 |
self.button1 = ttk.Button(self.label_frame, text = "Start ProgressBar", command = self.start_progress) self.button1.grid(column = 0, row = 0) self.button2 = ttk.Button(self.label_frame, text="Stop ProgressBar", command = self.stop_progress) self.button2.grid(column=0, row=2) |
This is our ProgressBar in TKinter, you can use ProgressBar from ttk, eventough we have the progressbar in tkinter but it is old style, you need to add the orientation for the progressbar also the lenght. and at the end add the ProgressBar in the GridLayout.
1 2 |
self.progress_bar = ttk.Progressbar(self, orient = 'horizontal', length = 280, mode = 'determinate') self.progress_bar.grid(column = 0, row = 3, pady = 10) |
And these are the two method for starting and stopping of the Tkinter ProgressBar, we have already connected these methods with the specific button.
1 2 3 4 5 6 |
def start_progress(self): self.progress_bar.start() def stop_progress(self): self.progress_bar.stop() |
Run the complete code and this is the result.

How to Create LabelFrame in TKinter
In this part we want to learn creating LabelFrame in TKinter, so a labelframe is a simple container widget. Its primary purpose is to act as a spacer or container for complex window layouts. this is the complete code for creating LabelFrame in Python GUI (TKinter).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import tkinter as tk from tkinter import ttk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - LabelFrame") self.minsize(350,350) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.labelFrame = ttk.LabelFrame(self, text = "TKinter Label Frame") self.labelFrame.grid(column = 0, row = 7, padx = 20, pady = 40) self.create_labels() def create_labels(self): ttk.Label(self.labelFrame, text = "Python").grid(column = 0, row = 0) ttk.Label(self.labelFrame, text="Java").grid(column=0, row=1) ttk.Label(self.labelFrame, text="C++").grid(column=0, row=2) window = Window() window.mainloop() |
Using this code we have created LabelFrame, also we have added the LabelFrame in the GridLayout.
1 2 |
self.labelFrame = ttk.LabelFrame(self, text = "TKinter Label Frame") self.labelFrame.grid(column = 0, row = 7, padx = 20, pady = 40) |
As i have already said that LabelFrame acts as a container for widgets, so now we need to add some widgets in the LabelFrame, iam goint to add three labels.
1 2 3 |
ttk.Label(self.labelFrame, text = "Python").grid(column = 0, row = 0) ttk.Label(self.labelFrame, text="Java").grid(column=0, row=1) ttk.Label(self.labelFrame, text="C++").grid(column=0, row=2) |
Run the complete code and this is the result.

How to Create ListBox in TKinter
In this part we want to create ListBox in TKinter, so a list box is a graphical control element that allows the user to select one or more items from a list contained within a static, multiple line text box. this is the complete code for tkinter listbox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import tkinter as tk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - ListBox") self.minsize(400,250) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.create_listbox() def create_listbox(self): listbox = tk.Listbox(self) listbox.insert(1, "PyQt5") listbox.insert(2, "TKinter") listbox.insert(3, "wxPython") listbox.insert(4, "Pyside2") listbox.insert(5, "Kivy") listbox.pack() window = Window() window.mainloop() |
You can use ListBox class from tkinter for creating listbox, and after that you need to insert items to the listbox, make sure that you have specified the index of the items.
1 2 3 4 5 6 |
listbox = tk.Listbox(self) listbox.insert(1, "PyQt5") listbox.insert(2, "TKinter") listbox.insert(3, "wxPython") listbox.insert(4, "Pyside2") listbox.insert(5, "Kivy") |
Also you need to pack the listbox, so pack is another kinds of layouts that you can use in tkinter.
1 |
listbox.pack() |
Run the complete code and this is the result.

How to Create ColorChooser in TKinter
In this part we want to learn creating ColoChooser in Python TKinter, so using ColoChooser you can chose a color that you want. this is the complete code for TKinter ColorChooser.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import tkinter as tk from tkinter import colorchooser from tkinter import ttk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - ColorChooser") self.minsize(500,400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.create_button() def create_button(self): btn = ttk.Button(self, text = "Open Color Chooser", command = self.color_chooser) btn.grid(column = 0, row = 0) def color_chooser(self): (rgbx, hx) = colorchooser.askcolor() window = Window() window.mainloop() |
This is our button and we have connected this button with the color_chooser() method.
1 2 |
btn = ttk.Button(self, text = "Open Color Chooser", command = self.color_chooser) btn.grid(column = 0, row = 0) |
And this is our method, basically it create a color dialog for us.
1 2 |
def color_chooser(self): (rgbx, hx) = colorchooser.askcolor() |
Run the code and this is the result.

How to Create Canvas in TKinter
In this part we want to create Canvas in TKinter, so Canvas is a rectangular area intended for drawing pictures or other complex layouts. You can place graphics, text,widgets or frames on a Canvas. we can create Different shapes like arc, polygon, image, line.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import tkinter as tk class Window(tk.Tk): def __init__(self): super(Window, self).__init__() self.title("Geekscoders.com - TKinter") self.minsize(500,400) self.iconphoto(False, tk.PhotoImage(file='geekscoders.png')) self.create_canvas() def create_canvas(self): canvas = tk.Canvas(self, bg = "red", height = 250, width = 300) coord = 10,50, 240, 210 #canvas.pack(expand = YES, fill=BOTH) arc = canvas.create_arc(coord, start = 0, extent = 150, fill = "yellow") canvas.pack() window = Window() window.mainloop() |
You can use tkinter.Canvas() class for creating canvas in tkinter, you can give the color for the canvas, also the width and height for the canvas.
1 |
canvas = tk.Canvas(self, bg = "red", height = 250, width = 300) |
We are going to create an arc in the canvas.
1 |
arc = canvas.create_arc(coord, start = 0, extent = 150, fill = "yellow") |
Run the code and this is the result.
