cleanup

src/APIopertaions.svelte

@@ -1,32 +1,29 @@
 <script>
     import { onMount } from 'svelte';
   
-    // Define an array to store the fetched data
+   
     let fetchedData = [];
   
-    // Function to fetch data from the API
+    
     async function fetchData() {
       try {
-        const response = await fetch('https://api.example.com/data'); // Replace with your API endpoint
+        const response = await fetch('https://api.example.com/data'); 
         if (!response.ok) {
           throw new Error('Failed to fetch data');
         }
-        fetchedData = await response.json(); // Parse the JSON response
+        fetchedData = await response.json(); 
       } catch (error) {
         console.error('Error fetching data:', error.message);
       }
     }
   
-    // Call the fetchData function when the component is mounted
     onMount(fetchData);
   </script>
   
   <div class="center-container">
     <div class="container">
         <p>hi</p>
-      <!-- Your existing Svelte code here -->
+    
-  
-      <!-- Display the fetched data -->
       <ul>
         {#each fetchedData as item}
           <li>{item.first} {item.last}</li>

src/App.svelte

@@ -3,23 +3,23 @@
 	import ApIopertaions from "./APIopertaions.svelte";
 	import CRUDoperations from "./CRUDoperations.svelte";
   
-	// Define a variable to track the current route
+	
 	let currentRoute = '';
   
-	// Function to update the current route based on the URL hash
+	
 	function updateRouteFromHash() {
-	  currentRoute = window.location.hash.slice(1); // Remove '#' from the URL hash
+	  currentRoute = window.location.hash.slice(1);
 	}
   
-	// Call the updateRouteFromHash function when the component is mounted
+	
 	onMount(() => {
-	  window.addEventListener('hashchange', updateRouteFromHash); // Listen for hash change events
+	  window.addEventListener('hashchange', updateRouteFromHash); 
-	  updateRouteFromHash(); // Update the current route initially
+	  updateRouteFromHash(); 
 	});
   
-	// Function to navigate to a different route
+
 	function navigateTo(route) {
-	  window.location.hash = route; // Update the URL hash
+	  window.location.hash = route; 
 	}
   </script>
   
@@ -57,23 +57,23 @@
   </style>
   
   <header>
-	<h1>POC</h1>
+	<h1>Svelte</h1>
 	<nav>
 	  <ul>
-		<!-- Define navigation links -->
+		
 		<li><a href="#api">API Operations</a></li>
 		<li><a href="#crud">CRUD Operations</a></li>
 	  </ul>
 	</nav>
   </header>
   
-  <!-- Conditional rendering based on the current route -->
+
   {#if currentRoute === 'api'}
 	<ApIopertaions />
   {:else if currentRoute === 'crud'}
 	<CRUDoperations />
   {:else}
-	<!-- Handle unknown routes or default content -->
+	
 	<p>Page not found</p>
   {/if}
   

src/CRUDoperations.svelte

@@ -82,37 +82,31 @@
 	}
   
 	.container {
-	  width: 500px; /* Increase width for a bigger dialog box */
+	  width: 500px; 
-	  padding: 40px; /* Increase padding for more spacing inside the dialog box */
+	  padding: 40px; 
-	  background-color: #ffffff; /* Change background color to white */
+	  background-color: #ffffff; 
 	  border-radius: 8px;
 	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 	}
   
 	label {
 	  display: block;
-	  margin-bottom: 16px; /* Increase margin bottom for more spacing between elements */
+	  margin-bottom: 16px; 
 	  color: #333;
 	}
   
-	input[type="text"],
+	
 	select {
 	  width: 100%;
-	  padding: 12px; /* Increase padding for larger input fields */
+	  padding: 12px; 
 	  border: 1px solid #ccc;
 	  border-radius: 4px;
 	  box-sizing: border-box;
-	  margin-bottom: 24px; /* Increase margin bottom for more spacing between elements */
+	  margin-bottom: 24px; 
-	  font-size: 16px;
-	}
-  
-	.button-group {
-	  display: flex;
-	  justify-content: space-between;
 	}
   
 	button {
-	  padding: 12px 24px; /* Increase padding for larger buttons */
+	  padding: 12px 24px; 
 	  border: none;
 	  border-radius: 4px;
 	  cursor: pointer;