Update pages/hari.py

pages/hari.py

@@ -196,15 +196,104 @@ for i, chunk in enumerate(chunks):
 
 # Semi-Structured Data - JSON Page
 def json_details_page():
-    st.title("Semi-Structured Data - JSON Details")
-    st.markdown("""
-    **JSON** (JavaScript Object Notation) is a lightweight data-interchange format.
 
-    - Represents data as key-value pairs.
-    - Widely used for APIs and configuration files.
-    - Readable and writable using Python's `json` module.
-    """)
-    st.code('import json\ndata = json.load(open("file.json"))', language="python")
+    import pandas as pd
+    import requests
+    
+    # Page configuration
+    st.set_page_config(page_title="JSON & API Tutorial", layout="wide")
+    
+    # Define colors
+    main_heading_color = "blue"
+    sub_heading_color = "green"
+    bullet_point_color = "black"
+    
+    # Main Title
+    st.markdown(f"<h1 style='color:{main_heading_color};'>JSON and API Tutorial</h1>", unsafe_allow_html=True)
+    
+    # Section 1: Handling JSON Files
+    st.markdown(f"<h2 style='color:{sub_heading_color};'>Handling JSON Files</h2>", unsafe_allow_html=True)
+    st.markdown(f"<h3 style='color:{sub_heading_color};'>Introduction</h3>", unsafe_allow_html=True)
+    st.markdown(
+        f"<ul style='color:{bullet_point_color};'>"
+        f"<li>JSON (JavaScript Object Notation) is the second most commonly used data format after CSV.</li>"
+        f"<li>It is widely used, especially in APIs.</li>"
+        f"<li>JSON data can be either structured or semi-structured.</li>"
+        f"</ul>",
+        unsafe_allow_html=True,
+    )
+    
+    st.markdown(f"<h3 style='color:{sub_heading_color};'>Default JSON Format</h3>", unsafe_allow_html=True)
+    st.code('{"Name": ["P1", "P2"], "Age": [23, 24]}', language="json")
+
+    # Code example for reading JSON
+    st.markdown(f"<h3 style='color:{sub_heading_color};'>Reading JSON Files in Python</h3>", unsafe_allow_html=True)
+    st.code(
+        """
+    import pandas as pd
+    data = '{"Name": ["P1", "P2"], "Age": [23, 24]}'
+    df = pd.read_json(data)
+    print(df)
+    """,
+        language="python",
+    )
+    
+    # Section 2: JSON Formats in Pandas
+    st.markdown(f"<h2 style='color:{sub_heading_color};'>JSON Formats in Pandas</h2>", unsafe_allow_html=True)
+    st.markdown(
+        f"<ul style='color:{bullet_point_color};'>"
+        f"<li><b>Orient = 'index':</b> Indices become main keys and column names become subkeys.</li>"
+        f"<li><b>Orient = 'columns':</b> Column names become main keys and indices become subkeys.</li>"
+        f"<li><b>Orient = 'values':</b> JSON is converted as a list of values.</li>"
+        f"<li><b>Orient = 'split':</b> Stores data along with columns and indices.</li>"
+        f"</ul>",
+        unsafe_allow_html=True,
+    )
+    
+    # Section 3: Collecting Data from APIs
+    st.markdown(f"<h2 style='color:{sub_heading_color};'>Collecting Data from APIs</h2>", unsafe_allow_html=True)
+    st.markdown(
+        f"<ul style='color:{bullet_point_color};'>"
+        f"<li>API (Application Programming Interface) is a bridge that enables communication between two applications.</li>"
+        f"<li>It uses HTTP protocols to exchange data securely.</li>"
+        f"<li>If the response code is <b>200</b>, the request was successful.</li>"
+        f"<li>For accessing secure data, you may need an API key.</li>"
+        f"</ul>",
+        unsafe_allow_html=True,
+    )
+    
+    # Code example for using an API
+    st.markdown(f"<h3 style='color:{sub_heading_color};'>Example: Fetching Data from an API</h3>", unsafe_allow_html=True)
+    st.code(
+        """
+    import requests
+    import pandas as pd
+    
+    url = "https://api.example.com/data"
+    response = requests.get(url)
+    
+    if response.status_code == 200:
+        data = response.json()
+        df = pd.json_normalize(data)
+        print(df)
+    else:
+        print(f"Failed to fetch data. Status code: {response.status_code}")
+    """,
+        language="python",
+    )
+    
+    # Google Colab Link
+    st.markdown(f"<h2 style='color:{main_heading_color};'>Try It on Google Colab</h2>", unsafe_allow_html=True)
+    colab_link = "https://colab.research.google.com/"
+    st.markdown(f'<a href="{https://colab.research.google.com/drive/1pIg_zmj04lVmPTdiTU2bU9BLAR2mS5wi?usp=sharing}" target="_blank"><button style="background-color:{main_heading_color}; color:white;">Open Google Colab</button></a>', unsafe_allow_html=True)
+    
+    # Back Button
+    if st.button("Back"):
+        st.experimental_rerun()
+    
+    # Footer
+    st.markdown("---")
+    st.markdown(f"<h3 style='color:{sub_heading_color};'>Happy Learning!</h3>", unsafe_allow_html=True)
 
     if st.button("Back to Home"):
         st.session_state['page'] = "home"