💻 SvelteKit Exercise

What you'll learn

• Create and organize components in SvelteKit's lib folder
• Import and use Svelte components in route files
• Work with ordered and unordered lists in Svelte
• Understand SvelteKit's file-based routing system
• Practice using StackBlitz for online development

Total Time: 30-40 minutes

Guide on How to use Stackblitz

Time: 5 minutes

ℹ️ Info Prerequisites

• GitHub Account Required: You must have a GitHub account to use StackBlitz's GitHub integration
• If you don't have one, sign up for GitHub first

Step One: Access StackBlitz

1. Go to StackBlitz.com
2. Click "Continue with GitHub" (red highlighted button)
3. Authorize StackBlitz to access your GitHub account

Step 2: Save Your Work (Fork)

1. When ready to save, click the "Fork" button
2. StackBlitz will:
   • Fork the repository to your GitHub account
   • Create a new branch with your modifications
3. Submit your stackblitz link to the form

Step 3: Get your material

Time: 5 minutes

What you'll do: Open the project and familiarize yourself with the interface

1. Open StackBlitz and click "Open GitHub repository"
2. Use the repository: academic-telebort/Web-3-Concept-8-Sveltekit
3. Navigate to the src/lib folder to create your components
4. Make sure you understand the SvelteKit folder structure
5. Once you are done, Commit & Fork it

tip Alternative Option You can download the source code template as a zip file from

⚠️ IMPORTANT: Before You Start DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files as instructed below.

💻 Create Your SvelteKit Components

Time: 20 minutes

Step One: Create Item.svelte Component

Time: 5 minutes

1. Navigate to the src/lib folder in your project
2. Create a new file called Item.svelte
3. Add an ordered list with 5 items you can see around you
4. Use your creativity - list real items in your environment

tip Hint Use <ol> and <li> tags for ordered (numbered) lists

Example Item.svelte:

<ol>
    <li>Laptop</li>
    <li>Water Bottle</li>
    <li>Smartphone</li>
    <li>Notebook</li>
    <li>Pen</li>
</ol>

Step 2: Create Brand.svelte Component

Time: 5 minutes

1. In the same src/lib folder, create a new file called Brand.svelte
2. Add an unordered list with brands corresponding to your items
3. Make sure each brand matches the item in the same position from Step 1
4. Keep the same order (first brand matches first item, etc.)

tip Hint Use <ul> and <li> tags for unordered (bulleted) lists

Example Brand.svelte:

<ul>
    <li>Dell</li>
    <li>Contigo</li>
    <li>Apple</li>
    <li>Moleskine</li>
    <li>Pilot</li>
</ul>

Step 3: Import Components into index.svelte

Time: 10 minutes

1. Navigate to src/routes/index.svelte file
2. Import both Item and Brand components from the lib folder
3. Add headings to organize your content
4. Display both components on the page

tip Important Import Syntax In SvelteKit, always import from $lib/ for components in the lib folder. This is a special alias that SvelteKit provides.

Example src/routes/index.svelte:

<script>
    import Item from '$lib/Item.svelte';
    import Brand from '$lib/Brand.svelte';
</script>

<h1>My Items and Brands</h1>

<h2>Items I Can See:</h2>
<Item />

<h2>Brands:</h2>
<br />and />

Expected Output:

✅ Required Elements

Your completed project must include:

• Item.svelte: Component in lib folder with ordered list of 5 items
• Brand.svelte: Component in lib folder with unordered list of corresponding brands
• index.svelte: Route file that imports and displays both components
• Proper SvelteKit import syntax using $lib/ prefix
• Items and brands that logically correspond to each other
• Clean, functional list formatting

🔧 Troubleshooting

Common Issues and Solutions:

1. Import errors: Make sure you're using $lib/ not ./lib/ or ../lib/
2. Component not displaying: Check that you've used the correct component tags (e.g., <Item /> not <item />)
3. File not found: Ensure your components are in src/lib/ folder, not elsewhere
4. Lists not showing: Verify you're using proper HTML list tags (<ol>, <ul>, <li>)

tip Quick Tips

• Components in the lib folder can be imported using $lib/ComponentName.svelte
• Use <ol> for ordered (numbered) lists and <ul> for unordered (bulleted) lists
• Make sure your items and brands match logically (e.g., if you list "Laptop", the brand could be "Dell" or "HP")
• SvelteKit uses file-based routing, so src/routes/index.svelte becomes your homepage
• Test your components individually before importing them

📤 Project Submission

⚠️ Important: Test Before Submitting Before submitting, make sure:

1. Both components display correctly
2. The imports work properly
3. Your lists are properly formatted
4. Items and brands correspond logically

When you have completed your "SvelteKit Exercise" project, submit it using the link below:

Submit Your Projects Here