Scribd
Upload
12 views4 pages

# Creating The Directory and Necessary Files For The Svelte Project Structuren

Uploaded by

satyadeepikakoneti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views4 pages

# Creating The Directory and Necessary Files For The Svelte Project Structuren

Uploaded by

satyadeepikakoneti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

# Creating the directory and necessary files for the Svelte project structure

import os

# Define the project directory structure


project_name = "jarurat_care"
dirs = [
f"{project_name}/src",
f"{project_name}/public",
]

files = {
f"{project_name}/src/App.svelte": """<script>
import { onMount } from "svelte";
let services = [];
let newService = { name: "", description: "", price: "" };
let selectedService = null;

// Function to add a new service


const addService = () => {
if (newService.name && newService.description && newService.price) {
services = [...services, { ...newService }];
newService = { name: "", description: "", price: "" };
}
};

// Function to update an existing service


const updateService = () => {
services = services.map(service =>
service === selectedService ? { ...selectedService } : service);
selectedService = null;
};

// Function to delete a service


const deleteService = (service) => {
services = services.filter(s => s !== service);
};

onMount(() => {
// Sample services to populate the list initially
services = [
{ name: "General Checkup", description: "Basic health checkup", price: "50" },
{ name: "Blood Test", description: "Complete blood count test", price: "30" },
];
});
</script>

<style>
.service-list, .form {
max-width: 600px;
margin: 20px auto;
}
.form input {
display: block;
margin-bottom: 10px;
padding: 8px;
width: 100%;
}
.service-list table {
width: 100%;
border-collapse: collapse;
}
.service-list th, td {
padding: 10px;
border: 1px solid #ddd;
}
button {
margin-right: 5px;
}
</style>

<main>
<div class="form">
<h2>{selectedService ? "Update Service" : "Add New Service"}</h2>
<input type="text" bind:value={selectedService ? selectedService.name :
newService.name} placeholder="Service Name" />
<input type="text" bind:value={selectedService ? selectedService.description :
newService.description} placeholder="Description" />
<input type="number" bind:value={selectedService ? selectedService.price :
newService.price} placeholder="Price" />
{#if selectedService}
<button on:click={updateService}>Update Service</button>
<button on:click={() => (selectedService = null)}>Cancel</button>
{:else}
<button on:click={addService}>Add Service</button>
{/if}
</div>

<div class="service-list">
<h2>Service List</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{#each services as service (service.name)}
<tr>
<td>{service.name}</td>
<td>{service.description}</td>
<td>{service.price}</td>
<td>
<button on:click={() => (selectedService = service)}>Edit</button>
<button on:click={() => deleteService(service)}>Delete</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</main>
""",
f"{project_name}/public/index.html": """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jarurat Care</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/build/bundle.js"></script>
</body>
</html>
""",
f"{project_name}/README.md": """# Jarurat Care - Svelte Healthcare Service Management

## Overview

This Svelte application allows users to manage healthcare services (add, update, and delete
services). The state is handled using Svelte's built-in reactivity.

### Features

1. Display a list of healthcare services.


2. Add new services to the list.
3. Edit and update existing services.
4. Delete services from the list.
5. State management using Svelte's reactive features.

## How to Run the Project

### Prerequisites

- Node.js (v12 or higher)


- NPM
### Setup Instructions

1. Clone the repository or download the project zip.


2. Navigate to the project folder.
3. Install dependencies by running:

```bash
npm install

You might also like