2024 Dec 30 Version 01 Playground introduced

Signed-off-by: Milind Kamat <36366961+milindkamat0507@users.noreply.github.com>

app.py

@@ -1,144 +1,169 @@
 import streamlit as st
 import pandas as pd
 import numpy as np
-from datetime import datetime
 
-# Page Configuration
-st.set_page_config(
-    page_title="MBA Streamlit Tutorial",
-    page_icon="🎓",
-    layout="wide"
-)
+st.set_page_config(page_title="Interactive Streamlit Tutorial", layout="wide")
 
-# Main Title
 st.title("Welcome to Streamlit Development Journey 🚀")
-st.markdown("*An interactive guide for MBA students*")
+st.markdown("*An interactive guide for MBA students - Practice as you learn!*")
 
-# Sidebar
 with st.sidebar:
     st.header("Navigation Panel")
     page = st.radio(
         "Choose your learning path:",
-        ["Basic Elements", "Data Display", "Interactive Widgets", "Charts", "Chat Interface"]
+        ["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!")
     
-    # User Info Collection
-    st.sidebar.markdown("---")
-    student_name = st.text_input("Enter your name:")
-    experience = st.select_slider(
-        "Your coding experience:",
-        options=["Beginner", "Intermediate", "Advanced"]
+    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)}")
 
-# Main Content Based on Selection
-if page == "Basic Elements":
-    st.header("Basic Streamlit Elements")
+elif page == "Input Widgets":
+    st.header("2. Input Widgets Laboratory")
     
-    tab1, tab2, tab3 = st.tabs(["Text Elements", "Input Elements", "Layout Elements"])
+    col1, col2 = st.columns(2)
     
-    with tab1:
-        st.subheader("Text Display Options")
-        st.write("Regular text using st.write()")
-        st.markdown("**Bold text** and *italic text* using markdown")
-        st.code("""
-st.write("Regular text")
-st.markdown("**Bold text**")
-        """)
-        
-    with tab2:
-        st.subheader("Input Elements Demo")
-        user_input = st.text_input("Try typing something:")
-        st.write("You typed:", user_input)
+    with col1:
+        st.subheader("Widget Examples")
+        st.write("Try these interactive widgets:")
         
-        number = st.number_input("Enter a number:", min_value=0, max_value=100)
-        st.write("Selected number:", number)
+        # 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}")
         
-    with tab3:
-        st.subheader("Layout Elements")
+        # 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("Working with Data")
+    st.header("4. Data Display Workshop")
     
-    # Sample DataFrame
+    # Create sample data
     df = pd.DataFrame({
-        'Date': pd.date_range('2024-01-01', periods=5),
-        'Sales': np.random.randn(5) * 100 + 500,
-        'Customers': np.random.randint(50, 100, 5)
+        'Name': ['John', 'Emma', 'Alex', 'Sarah'],
+        'Age': [28, 24, 32, 27],
+        'City': ['New York', 'London', 'Paris', 'Tokyo']
     })
     
-    st.dataframe(df)
-    st.code("""
-# Create and display a DataFrame
-df = pd.DataFrame({
-    'Date': pd.date_range('2024-01-01', periods=5),
-    'Sales': np.random.randn(5) * 100 + 500,
-    'Customers': np.random.randint(50, 100, 5)
-})
-st.dataframe(df)
-    """)
-
-elif page == "Interactive Widgets":
-    st.header("Interactive Elements")
-    
-    option = st.selectbox(
-        'Select your favorite color',
-        ['Red', 'Blue', 'Green', 'Yellow']
-    )
+    st.subheader("Practice with DataFrames")
     
-    if st.button('Show Selected Color'):
-        st.write(f'Your selected color is {option}')
+    # Show data manipulation options
+    st.write("Original DataFrame:")
+    st.dataframe(df)
     
-    st.slider('Select a range', 0, 100, (25, 75))
+    # 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 == "Charts":
-    st.header("Data Visualization")
+elif page == "Interactive Charts":
+    st.header("5. Visualization Lab")
     
-    # Generate sample data
+    # Generate random data
     chart_data = pd.DataFrame(
         np.random.randn(20, 3),
-        columns=['Line A', 'Line B', 'Line C']
+        columns=['A', 'B', 'C']
     )
     
-    st.line_chart(chart_data)
+    # 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 a line chart
-chart_data = pd.DataFrame(
-    np.random.randn(20, 3),
-    columns=['Line A', 'Line B', 'Line C']
-)
+# Create charts
 st.line_chart(chart_data)
+st.bar_chart(chart_data)
+st.area_chart(chart_data)
     """)
 
-elif page == "Chat Interface":
-    st.header("Simple Chatbot Interface")
-    
-    if 'messages' not in st.session_state:
-        st.session_state.messages = []
-
-    # Display chat messages
-    for message in st.session_state.messages:
-        with st.chat_message(message["role"]):
-            st.markdown(message["content"])
-
-    # Chat input
-    if prompt := st.chat_input("What would you like to know about Streamlit?"):
-        # Add user message to chat history
-        st.session_state.messages.append({"role": "user", "content": prompt})
-        
-        # Simple response logic
-        response = f"Thank you for your question about '{prompt}'. This is a demo chatbot interface in Streamlit!"
-        
-        # Add assistant response to chat history
-        st.session_state.messages.append({"role": "assistant", "content": response})
-        
-        # Rerun to display new messages
-        st.rerun()
-
 # Footer
 st.markdown("---")
-st.markdown("Created for MBA Students - Learning Streamlit Development")
+st.markdown("💡 **Pro Tip:** Try modifying the code examples to see how they change the output!")