Basic Window Setup

First, import the tkinter package to create and define the window:

import tkinter as tk

# Create window instance
app_window = tk.Tk()
# Set window title
app_window.title('Number Accumulator')
# Set window dimensions
app_window.geometry('300x300')
# Render the window
app_window.mainloop()

This code creates a basic window with no content. Now let's add GUI components.

Adding GUI Components

# Create left frame
left_frame = tk.Frame(app_window)
left_frame.grid(row=0, column=0, padx=10)

• tk.Frame(app_window): Creates a new frame container within the main window.
• left_frame.grid(row=0, column=0, padx=10): Positions the frame at row 0, column 0 with 10 pixels of horizontal padding.

# Create label for input field
input_label = tk.Label(left_frame, text="Enter Number")
input_label.grid(row=0, pady=2)

• tk.Label(left_frame, text="Enter Number"): Creates a label widget with the specified text.
• input_label.grid(row=0, pady=2): Places the label at row 0 with 2 pixels of vertical padding.

# Create input field
number_input = tk.Entry(left_frame, bd=5, width=10)
number_input.grid(row=1, pady=20)

• tk.Entry(left_frame, bd=5, width=10): Creates an entry feild with 5-pixel border width and 10-character width.
• number_input.grid(row=1, pady=20): Positions the input field at row 1 with 20 pixels of vertical padding.

# Create result label
result_label = tk.Label(left_frame, text="Accumulated Sum")
result_label.grid(row=3, pady=7)

# Create result display
result_display = tk.Text(left_frame, bg='lightblue', state="normal", width=10, height=10)
result_display.grid(row=4)

# Create right frame
right_frame = tk.Frame(app_window)
right_frame.grid(row=0, column=1)

# Create number sequence display
sequence_display = tk.Text(right_frame, state="normal", width=20, height=15)
sequence_display.grid(row=0, column=1, pady=10)

Implementing the Accumulation Function

def calculate_sum():
    # Get input value and convert to integer
    input_value = int(number_input.get())
    total = 0
    
    # Clear previous results
    sequence_display.delete(1.0, tk.END)
    result_display.delete(1.0, tk.END)
    
    # Calculate and display sequence
    for i in range(0, input_value + 1):
        sequence_display.insert('end', f"{i}\n")
        total += i
    
    # Display final result
    result_display.insert('end', f"{total}")

• input_value = int(number_input.get()): Retrieves user input and converts it to an integer.
• total = 0: Initializes the accumulator variable.
• for i in range(0, input_value + 1): Iterates through numbers from 0 to the input value.
• sequence_display.insert('end', f"{i}\n"): Adds each number to the sequence display with a newline.
• total += i: Adds each number to the running total.
• result_display.insert('end', f"{total}"): Inserts the final sum into the result display.

Adding the Calculation Button

# Create calculation button
calculate_button = tk.Button(right_frame, text="Calculate", command=calculate_sum, bd=3, width=17, height=2)
calculate_button.grid(row=2, column=1, padx=5, pady=20)

• tk.Button(right_frame, text="Calculate", command=calculate_sum, ...): Creates a button that triggers the calculation function when clicked.
• calculate_button.grid(...): Positions the button with specified padding.

Complete Code

import tkinter as tk

# Create window instance
app_window = tk.Tk()
# Set window title
app_window.title('Number Accumulator')
# Set window dimensions
app_window.geometry('300x300')

# Create left frame
left_frame = tk.Frame(app_window)
left_frame.grid(row=0, column=0, padx=10)

# Create input label
input_label = tk.Label(left_frame, text="Enter Number")
input_label.grid(row=0, pady=2)

# Create input field
number_input = tk.Entry(left_frame, bd=5, width=10)
number_input.grid(row=1, pady=20)

# Create result label
result_label = tk.Label(left_frame, text="Accumulated Sum")
result_label.grid(row=3, pady=7)

# Create result display
result_display = tk.Text(left_frame, bg='lightblue', state="normal", width=10, height=10)
result_display.grid(row=4)

# Create right frame
right_frame = tk.Frame(app_window)
right_frame.grid(row=0, column=1)

# Create number sequence display
sequence_display = tk.Text(right_frame, state="normal", width=20, height=15)
sequence_display.grid(row=0, column=1, pady=10)

def calculate_sum():
    # Get input value and convert to integer
    input_value = int(number_input.get())
    total = 0
    
    # Clear previous results
    sequence_display.delete(1.0, tk.END)
    result_display.delete(1.0, tk.END)
    
    # Calculate and display sequence
    for i in range(0, input_value + 1):
        sequence_display.insert('end', f"{i}\n")
        total += i
    
    # Display final result
    result_display.insert('end', f"{total}")

# Create calculation button
calculate_button = tk.Button(right_frame, text="Calculate", command=calculate_sum, bd=3, width=17, height=2)
calculate_button.grid(row=2, column=1, padx=5, pady=20)

# Start the application
app_window.mainloop()