2024 Dec 30 : New code added for playground

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

app.py

@@ -1,6 +1,4 @@
 import streamlit as st
-import pandas as pd
-import numpy as np
 
 st.set_page_config(page_title="Learn Streamlit", layout="wide")
 
@@ -10,205 +8,123 @@ with st.sidebar:
     selected_topic = st.radio(
         "Choose a Topic:",
         [
-            "1. Basic Text Elements",
-            "2. Input Widgets",
-            "3. Layouts & Containers", 
-            "4. Data Display",
-            "5. Charts & Plots",
-            "6. Interactive Components",
-            "Try It Yourself"
+            "Basic Text Elements",
+            "Input Widgets",
+            "Layouts & Containers", 
+            "Data Display",
+            "Charts & Plots",
+            "Interactive Components",
+            "Playground"
         ]
     )
 
-if selected_topic == "1. Basic Text Elements":
+if selected_topic == "Basic Text Elements":
     st.title("Basic Text Elements in Streamlit")
     
-    # Example & Output side by side
+    # Create two equal columns
     col1, col2 = st.columns(2)
     
     with col1:
-        st.header("Code Examples")
-        st.code("""
-# Title
-st.title('Main Title')
+        st.markdown("### 📝 Code Examples")
+        # Code section with comments
+        st.markdown("#### Title")
+        st.code("st.title('Main Title')")
+        st.markdown("↳")  # Arrow pointing to output
+        
+        st.markdown("#### Header")
+        st.code("st.header('Header')")
+        st.markdown("↳")
+        
+        st.markdown("#### Subheader")
+        st.code("st.subheader('Subheader')")
+        st.markdown("↳")
+        
+        st.markdown("#### Normal text")
+        st.code("st.write('Normal text')")
+        st.markdown("↳")
+        
+        st.markdown("#### Markdown text")
+        st.code("st.markdown('**Bold** and *italic*')")
+        st.markdown("↳")
+        
+        st.markdown("#### Colored text")
+        st.code("st.markdown(':blue[Blue text]')")
+        st.markdown("↳")
 
-# Header
-st.header('Header')
-
-# Subheader
-st.subheader('Subheader')
-
-# Normal text
-st.write('Normal text')
-
-# Markdown text
-st.markdown('**Bold** and *italic*')
-
-# Colored text
-st.markdown(':blue[Blue text]')
-        """)
-    
     with col2:
-        st.header("Live Output")
+        st.markdown("### 🎯 Live Output")
         st.title('Main Title')
+        st.markdown("---")  # Separator
+        
         st.header('Header')
+        st.markdown("---")
+        
         st.subheader('Subheader')
+        st.markdown("---")
+        
         st.write('Normal text')
+        st.markdown("---")
+        
         st.markdown('**Bold** and *italic*')
+        st.markdown("---")
+        
         st.markdown(':blue[Blue text]')
 
-elif selected_topic == "2. Input Widgets":
-    st.title("Input Widgets")
+elif selected_topic == "Playground":
+    st.title("💻 Streamlit Playground")
     
-    col1, col2 = st.columns(2)
+    # Split screen for code and output
+    col1, col2 = st.columns([1, 1])
     
     with col1:
-        st.header("Code")
-        st.code("""
-# Text input
-name = st.text_input('Enter your name')
-
-# Number input
-age = st.number_input('Enter age', 
-    min_value=0, max_value=120)
-
-# Slider
-value = st.slider('Select value', 
-    0, 100)
-
-# Checkbox
-agree = st.checkbox('I agree')
-
-# Selectbox
-option = st.selectbox(
-    'Choose option',
-    ['A', 'B', 'C'])
-        """)
-    
-    with col2:
-        st.header("Try these widgets")
-        name = st.text_input('Enter your name')
-        if name:
-            st.write(f'Hello {name}!')
-            
-        age = st.number_input('Enter age', min_value=0, max_value=120)
-        value = st.slider('Select value', 0, 100)
-        agree = st.checkbox('I agree')
-        option = st.selectbox('Choose option', ['A', 'B', 'C'])
-
-elif selected_topic == "3. Layouts & Containers":
-    st.title("Layouts & Containers")
+        st.markdown("### ✍️ Write Your Code")
+        code = st.text_area(
+            "Try Streamlit commands here:",
+            height=400,
+            placeholder="""Examples to try:
+
+st.title('My Title')
+st.write('Hello World!')
+st.markdown('**Bold** and *italic*')
+st.markdown(':blue[Colored text]')
+            """
+        )
+        
+        # Add helpful snippets
+        st.markdown("#### 📚 Quick Snippets")
+        snippets = {
+            "Title": "st.title('My Title')",
+            "Header": "st.header('My Header')",
+            "Colored Text": "st.markdown(':blue[Blue text]')",
+            "Bold & Italic": "st.markdown('**Bold** and *italic*')",
+        }
+        
+        selected_snippet = st.selectbox("Insert a snippet:", list(snippets.keys()))
+        if st.button("Insert Snippet"):
+            if code:
+                code += "\n" + snippets[selected_snippet]
+            else:
+                code = snippets[selected_snippet]
     
-    st.header("1. Columns")
-    st.code("col1, col2 = st.columns(2)")
-    col1, col2 = st.columns(2)
-    with col1:
-        st.write("This is column 1")
     with col2:
-        st.write("This is column 2")
-    
-    st.header("2. Tabs")
-    st.code("tab1, tab2 = st.tabs(['Tab 1', 'Tab 2'])")
-    tab1, tab2 = st.tabs(['Tab 1', 'Tab 2'])
-    with tab1:
-        st.write("Content of tab 1")
-    with tab2:
-        st.write("Content of tab 2")
-    
-    st.header("3. Expander")
-    with st.expander("Click to expand"):
-        st.write("Hidden content revealed!")
-
-elif selected_topic == "4. Data Display":
-    st.title("Working with Data")
-    
-    # Create sample dataframe
-    df = pd.DataFrame({
-        'Name': ['John', 'Anna', 'Peter'],
-        'Age': [25, 30, 35],
-        'City': ['New York', 'Paris', 'London']
-    })
-    
-    st.header("Display DataFrame")
-    st.code("""
-# Create DataFrame
-df = pd.DataFrame({
-    'Name': ['John', 'Anna', 'Peter'],
-    'Age': [25, 30, 35],
-    'City': ['New York', 'Paris', 'London']
-})
-
-# Display as table
-st.dataframe(df)
-
-# Display as static table
-st.table(df)
-    """)
-    
-    st.dataframe(df)
-    st.table(df)
-
-elif selected_topic == "5. Charts & Plots":
-    st.title("Creating Charts")
-    
-    # Generate sample data
-    chart_data = pd.DataFrame(
-        np.random.randn(20, 3),
-        columns=['A', 'B', 'C']
-    )
-    
-    st.header("Line Chart")
-    st.code("st.line_chart(chart_data)")
-    st.line_chart(chart_data)
-    
-    st.header("Bar Chart")
-    st.code("st.bar_chart(chart_data)")
-    st.bar_chart(chart_data)
-    
-    st.header("Area Chart")
-    st.code("st.area_chart(chart_data)")
-    st.area_chart(chart_data)
-
-elif selected_topic == "6. Interactive Components":
-    st.title("Interactive Components")
-    
-    st.header("Form Example")
-    with st.form("my_form"):
-        st.write("Inside the form")
-        name = st.text_input("Name")
-        age = st.slider("Age", 0, 100, 25)
-        submitted = st.form_submit_button("Submit")
-        if submitted:
-            st.write(f"Name: {name}, Age: {age}")
-    
-    st.header("File Uploader")
-    uploaded_file = st.file_uploader("Choose a file")
-    if uploaded_file:
-        st.write("File uploaded!")
-
-elif selected_topic == "Try It Yourself":
-    st.title("Practice Zone")
-    
-    st.write("Try writing some Streamlit code below!")
-    
-    code = st.text_area("Your code:", height=200,
-        placeholder="Example:\nst.write('Hello World!')")
-    
-    if st.button("Run Code"):
-        try:
-            exec(code)
-        except Exception as e:
-            st.error(f"Error: {str(e)}")
-
-# Footer with helpful tips
+        st.markdown("### 🎯 Live Output")
+        with st.container(border=True):
+            if code:
+                try:
+                    exec(code)
+                except Exception as e:
+                    st.error(f"Error: {str(e)}")
+
+# Tips & Documentation
 with st.expander("💡 Tips & Tricks"):
     st.markdown("""
-    - Use `st.write()` for quick output
-    - Columns help organize content
-    - Forms batch multiple inputs
-    - Always handle errors in user inputs
-    - Use expanders for additional info
+    ### Helpful Tips:
+    - Start with basic text elements (`st.write`, `st.markdown`)
+    - Use markdown for formatting (`**bold**`, `*italic*`)
+    - Try colored text with `:blue[text]`, `:red[text]`, etc.
+    - Experiment with different header levels
+    - Watch the live output as you type
     """)
 
 st.markdown("---")
-st.caption("Learn more at streamlit.io/docs")
+st.caption("📚 Learn more at streamlit.io/docs")