File size: 4,726 Bytes
1584dfa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import streamlit as st
import pandas as pd
import numpy as np

st.set_page_config(page_title="Interactive Streamlit Tutorial", layout="wide")

st.title("Welcome to Streamlit Development Journey 🚀")
st.markdown("*An interactive guide for MBA students - Practice as you learn!*")

with st.sidebar:
    st.header("Navigation Panel")
    page = st.radio(
        "Choose your learning path:",
        ["Text Elements", "Input Widgets", "Layout & Containers", "Data Display", "Interactive Charts"]
    )

if page == "Text Elements":
    st.header("1. Text Elements Playground")
    
    # Learning Section
    st.subheader("📚 Learn")
    with st.expander("See text formatting examples"):
        st.code("""
# Different ways to display text:
st.write('Regular text')
st.markdown('**Bold** and *italic*')
st.title('Main Title')
st.header('Header')
st.subheader('Subheader')
st.code('print("Hello World")')
        """)
    
    # Practice Section
    st.subheader("🔨 Practice")
    st.write("Try these text elements yourself!")
    
    code_input = st.text_area(
        "Type your Streamlit code here:",
        height=100,
        placeholder="Example: st.write('Hello World')"
    )
    
    if st.button("Run Code"):
        try:
            with st.container():
                st.write("Your Output:")
                exec(code_input)
        except Exception as e:
            st.error(f"Error: {str(e)}")

elif page == "Input Widgets":
    st.header("2. Input Widgets Laboratory")
    
    col1, col2 = st.columns(2)
    
    with col1:
        st.subheader("Widget Examples")
        st.write("Try these interactive widgets:")
        
        # Text input
        name = st.text_input("Enter your name:")
        if name:
            st.write(f"Hello, {name}!")
            
        # Number input
        number = st.number_input("Pick a number", 0, 100)
        st.write(f"Your number squared is: {number**2}")
        
        # Slider
        age = st.slider("Select your age", 0, 100, 25)
        st.write(f"You selected: {age} years")
    
    with col2:
        st.subheader("Code Reference")
        st.code("""
# Text input
name = st.text_input("Enter your name:")
if name:
    st.write(f"Hello, {name}!")

# Number input
number = st.number_input("Pick a number", 0, 100)

# Slider
age = st.slider("Select your age", 0, 100, 25)
        """)

elif page == "Layout & Containers":
    st.header("3. Layout Workshop")
    
    st.write("Experiment with different layouts:")
    
    tab1, tab2, tab3 = st.tabs(["Columns", "Expander", "Container"])
    
    with tab1:
        st.write("Create two columns:")
        col1, col2 = st.columns(2)
        with col1:
            st.write("This is column 1")
            st.button("Column 1 Button")
        with col2:
            st.write("This is column 2")
            st.button("Column 2 Button")
            
    with tab2:
        with st.expander("Click to expand"):
            st.write("This content is hidden until expanded!")
            st.slider("Hidden slider", 0, 100)
            
    with tab3:
        with st.container():
            st.write("This is a container")
            st.metric(label="Temperature", value="24 °C", delta="1.2 °C")

elif page == "Data Display":
    st.header("4. Data Display Workshop")
    
    # Create sample data
    df = pd.DataFrame({
        'Name': ['John', 'Emma', 'Alex', 'Sarah'],
        'Age': [28, 24, 32, 27],
        'City': ['New York', 'London', 'Paris', 'Tokyo']
    })
    
    st.subheader("Practice with DataFrames")
    
    # Show data manipulation options
    st.write("Original DataFrame:")
    st.dataframe(df)
    
    # Let users try filtering
    city_filter = st.selectbox("Filter by city:", ['All'] + list(df['City'].unique()))
    if city_filter != 'All':
        filtered_df = df[df['City'] == city_filter]
        st.write("Filtered DataFrame:")
        st.dataframe(filtered_df)

elif page == "Interactive Charts":
    st.header("5. Visualization Lab")
    
    # Generate random data
    chart_data = pd.DataFrame(
        np.random.randn(20, 3),
        columns=['A', 'B', 'C']
    )
    
    # Let users choose chart type
    chart_type = st.selectbox(
        "Select chart type:",
        ["Line Chart", "Bar Chart", "Area Chart"]
    )
    
    if chart_type == "Line Chart":
        st.line_chart(chart_data)
    elif chart_type == "Bar Chart":
        st.bar_chart(chart_data)
    else:
        st.area_chart(chart_data)
    
    st.code("""
# Create charts
st.line_chart(chart_data)
st.bar_chart(chart_data)
st.area_chart(chart_data)
    """)

# Footer
st.markdown("---")
st.markdown("💡 **Pro Tip:** Try modifying the code examples to see how they change the output!")