Practice and reinforce the concepts from Lesson 8
Total Time: 30-40 minutes
Time: 5 minutes
:information_source: Info Prerequisites
Time: 5 minutes
What you'll do: Open the project and familiarize yourself with the interface
academic-telebort/Web-3-Concept-9-Application-Programming-Interface
src/lib
folder to create your componentstip Alternative Option You can download the source code template as a zip file from Telebort GitHub if you prefer using your own IDE.
:warning: 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.
Time: 20 minutes
Time: 5 minutes
src/lib
folder in your projectItem.svelte
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>
Time: 5 minutes
src/lib
folder, create a new file called Brand.svelte
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>
Time: 10 minutes
src/routes/index.svelte
filetip 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:
Your completed project must include:
$lib/
prefix$lib/
not ./lib/
or ../lib/
<Item />
not <item />
)src/lib/
folder, not elsewhere<ol>
, <ul>
, <li>
)tip Quick Tips
$lib/ComponentName.svelte
<ol>
for ordered (numbered) lists and <ul>
for unordered (bulleted) listssrc/routes/index.svelte
becomes your homepage:warning: Important: Test Before Submitting Before submitting, make sure:
- Both components display correctly
- The imports work properly
- Your lists are properly formatted
- Items and brands correspond logically
When you have completed your "SvelteKit Exercise" project, submit it using the link below: