Update app.py

app.py

@@ -13,46 +13,48 @@ def update_progress_bar_color(progress):
 # Function to demonstrate a for loop with colorful output
 def demonstrate_for_loop(n):
     result = ""
+    progress_bar = st.progress(0)  # Initialize the progress bar
+    st.markdown('<h3 style="color:#1E90FF;">For Loop Executing...</h3>', unsafe_allow_html=True)
+
     for i in range(1, n + 1):
         color = "teal" if i % 2 == 0 else "orange"
         result += f'<span style="color:{color}; font-size:24px; font-weight:bold;">{i} </span>'
         
-        # Update the progress bar
+        # Update the progress
         progress = i / n
+        progress_bar.progress(progress)
         progress_color = update_progress_bar_color(progress)
 
-        # Progress bar
-        st.progress(progress)
-        st.markdown(f'<style>.stProgress {{"background-color": "{progress_color}";}}</style>', unsafe_allow_html=True)
-
+        # Display results at the end
+        if i == n:
+            st.markdown(f'<div style="background-color:#fffacd; padding:20px; border-radius:10px; box-shadow: 0px 4px 12px rgba(0,0,0,0.1);">'
+                         f'<strong>For Loop result:</strong> {result}</div>', unsafe_allow_html=True)
+        
         time.sleep(0.5)  # Simulate execution time
-    
-    # Display final results
-    st.markdown(f'<div style="background-color:#fffacd; padding:20px; border-radius:10px; box-shadow: 0px 4px 12px rgba(0,0,0,0.1);">'
-                 f'<strong>For Loop result:</strong> {result}</div>', unsafe_allow_html=True)
 
 # Function to demonstrate a while loop with colorful output
 def demonstrate_while_loop(n):
     result = ""
     i = 1
+    progress_bar = st.progress(0)  # Initialize the progress bar
+    st.markdown('<h3 style="color:#1E90FF;">While Loop Executing...</h3>', unsafe_allow_html=True)
+
     while i <= n:
         color = "teal" if i % 2 == 0 else "orange"
         result += f'<span style="color:{color}; font-size:24px; font-weight:bold;">{i} </span>'
         
-        # Update the progress bar
+        # Update the progress
         progress = i / n
+        progress_bar.progress(progress)
         progress_color = update_progress_bar_color(progress)
 
-        # Progress bar
-        st.progress(progress)
-        st.markdown(f'<style>.stProgress {{"background-color": "{progress_color}";}}</style>', unsafe_allow_html=True)
+        # Display results at the end
+        if i == n:
+            st.markdown(f'<div style="background-color:#fffacd; padding:20px; border-radius:10px; box-shadow: 0px 4px 12px rgba(0,0,0,0.1);">'
+                         f'<strong>While Loop result:</strong> {result}</div>', unsafe_allow_html=True)
 
         time.sleep(0.5)  # Simulate execution time
         i += 1
-    
-    # Display final results
-    st.markdown(f'<div style="background-color:#fffacd; padding:20px; border-radius:10px; box-shadow: 0px 4px 12px rgba(0,0,0,0.1);">'
-                 f'<strong>While Loop result:</strong> {result}</div>', unsafe_allow_html=True)
 
 # Streamlit app layout
 st.title("Loop Demonstrator App")