Svelte Coding Challenge

What you'll learn

In this coding challenge, you will:

• Implement two-way data binding with Svelte
• Create reactive calculations and toggle functionality
• Build components with props and imports
• Integrate Firebase for real-time data operations
• Work with arrays, conditionals, and loops in Svelte

Get your materials ready 💻

Time estimate: 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 here: academic-telebort/Web-3-Svelte-Coding-Challenge-Challenge3
   • Navigate to the src/lib folder to create your components
   • Make sure you understand the SvelteKit folder structure
   • Once you are done, Commit & Fork it
3. Alternative option: Download the source code template as a zip file from Telebort GitHub if you want to use your local 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.

In this coding challenge, you will combine multiple Svelte concepts including data binding, logic blocks, reactivity, and Firebase integration. These challenges will test your ability to create complete, interactive applications using advanced Svelte features.

Challenge Projects

Challenge One: Student Result Display 💻

Time estimate: 20-25 minutes
Svelte REPL (Remove all the codes before doing exercise)

Objective: Create an output that displays a student's name, ranking and score immediately when you type their name in the text input.

Sample Output: Video Demo

Steps to complete:

1. Copy and paste the provided code in App.svelte with the students array and card structure.

2. Create an input field with data binding to search for student names:

   • Use bind:value={studentName} for two-way data binding
   • Place input in a section with text-center class

3. Implement Svelte logic to display student results when name matches:

   • Use {#each students as student} to iterate through the array
   • Use {#if student.name === studentName} to match the input
   • Replace question marks with correct syntax for displaying ranking and score

💡 Tip Helpful hint: Make sure the name matching is case-sensitive. You might want to consider adding .toLowerCase() for case-insensitive search!

<script>
let studentName;

let students = [ 
    \{ranking:1, name:"Sharvin", score: 89.6\},
    \{ranking:2, name:"Yong Sheng", score: 80.5\},
    \{ranking:3, name:"Mai", score: 79.9\},
    \{ranking:4, name:"Ravan", score: 79.5\},
    \{ranking:5, name:"Jia Sheng", score: 75.0\},
    \{ranking:6, name:"Ammar", score: 65.7\}
]
</script>

<section class="text-center">
    <input type="text" bind:value=\{studentName\} placeholder="Enter student name">
</section>

\{#each students as student\}
    \{#if student.name === studentName\}
        <section class="text-center mt-5">
            <div class="card">
                <div class="card-header">
                    Telebort Student Result
                </div>
                <div class="card-body">
                    <h4 class="card-title">\{student.name\}</h4>
                    <p class="card-text">Ranking : \{student.ranking\}</p>
                    <p class="card-text">Score : \{student.score\}</p>
                </div>
            </div>
        </section>
    \{/if\}
\{/each\}

<style>
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");
</style>

Bonus Challenge (Optional):

• Create Input.svelte component for the search input
• Create Result.svelte component for the result card
• Use component props and imports to organize the code

ℹ️ Time for bonus: Add 10-15 minutes if attempting the bonus challenge

Challenge 2: Cylinder Calculator 💻

Time estimate: 15-20 minutes
Svelte REPL (Remove all the codes before doing exercise)

Objective: Build a calculator that calculates a cylinder's volume and surface area with toggle functionality.

Sample Output: Video Demo

Surface Area:

Volume:

Steps to complete:

1. Create changeFormula() function to toggle between formulas
2. Use reactive statements to calculate results based on the clicked state
3. Implement both formulas:
   • Surface Area: 2πrh + 2πr²
   • Volume: πr²h

<script>
let radius, height, result, formula;
let clicked = false;

function changeFormula() \{
    clicked = !clicked;
\}

$: if (clicked) \{
    formula = "Surface Area";
    result = (2*Math.PI*radius*height)+(2*Math.PI*radius*radius);
\} else \{
    formula = "Volume";
    result = Math.PI * radius * radius * height;
\}
</script>

<section class="text-center">
    <h1>Calculate Volume and Surface Area of Cylinder</h1>
    <p>Radius</p>
    <input type="number" bind:value=\{radius\}>
    <p>Height</p>
    <input type="number" bind:value=\{height\}>
</section>

<section class="text-center mt-2">
    <button on:click=\{changeFormula\}>
        \{formula\}
    </button>
    <h4>
        \{formula\}: \{result\}
    </h4>
</section>

<style>
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");
</style>

💡 Tip Common issue: If you see NaN (Not a Number), make sure both radius and height have values before calculating!

Bonus Challenge (Optional):

• Fix the answer to 2 decimal places using .toFixed(2)
• Add input validation to prevent negative numbers

Challenge 3: Book Inventory with Firebase 💻

Time estimate: 45-60 minutes
Use StackBlitz SvelteKit Template: academic-telebort/telebort-web-series-W3-SvelteCodingChallenge-C3

Objective: Create a Book Inventory Table using Firebase with add and delete functionality.

Sample Output: Video Demo

Setup Requirements:

1. Create new Firebase project named "Book Inventory"
2. Setup Firebase Authentication and Firestore
3. Add Firebase configuration to Firebase.js file

⚠️ Warning Important: Make sure your Firebase project has Authentication and Firestore enabled before starting!

Step One: Create inventoryModal.svelte (15 minutes)

1. Import Firebase functions: auth, getFirestore, collection, addDoc
2. Create saveBookDetails() function to add books to Firestore
3. Bind form inputs to variables: title, genre, author, publishedYear, quantity

<script>
import \{auth\} from '../firebase';
import \{ onMount\} from 'svelte';
import \{onAuthStateChanged \} from "firebase/auth";
import \{getFirestore,collection,addDoc\} from 'firebase/firestore';

let title, genre, author, publishedYear, quantity, uid;
let db = getFirestore();

onMount(() => \{
    onAuthStateChanged(auth, async (user) => \{
      uid = user.uid;
    \});
\});

async function saveBookDetails() \{
    try\{
        await addDoc(collection(db, "books"),\{
            title: title,
            genre: genre,
            author: author,
            publishedYear: publishedYear,
            quantity: quantity,
            uid: uid
        \});
    \}catch(error)\{
        console.log(error);
    \}
    location.reload();
\}
</script>

<!-- Modal HTML with form inputs bound to variables -->

💡 Tip Firebase tip: Remember to handle errors gracefully using try-catch blocks when working with Firestore operations!

Step 2: Create showBooksList.svelte (20 minutes)

1. Import Firebase functions for reading and deleting data
2. Create fetchBookList() function to retrieve books from Firestore
3. Create deleteBook() function to remove books from the collection
4. Use {#each} block to display books in table format

<script>
import \{onAuthStateChanged\} from 'firebase/auth';
import \{getFirestore,collection,onSnapshot, doc,deleteDoc\} from 'firebase/firestore';
import \{auth\} from '../firebase';
import \{onMount\} from 'svelte';

let bookList = [];
let db = getFirestore();
let uid;

onMount(() => \{
    onAuthStateChanged(auth, async (user) => \{
        uid = user.uid;    
        fetchBookList(); 
    \}); 
\});

async function fetchBookList()\{
    try\{
        let unsubscribe = onSnapshot(collection(db, "books"),(querySnapshot)=>\{
            let bookLists = [];
            querySnapshot.forEach((doc)=>\{
                let item = \{...doc.data(),id: doc.id\}
                bookLists = [item,...bookLists];
            \});
            bookList = bookLists;
        \}); 
    \}catch(error)\{
        console.log(error);
    \}
\}

async function deleteBook(id) \{
    try \{
        await deleteDoc(doc(db, "books", id));
    \}catch(error)\{
        console.log(error);
    \}
\}
</script>

<!-- Table HTML with book data display -->

Step 3: Main Page Setup (10 minutes)

1. Import both components into index.svelte
2. Add buttons for sign out and new book entry
3. Include both components in the page layout
4. Test the complete functionality

Required Elements ✅

Make sure your Coding Challenge projects include:

Challenge 1 Requirements:

• ✅ Data binding with bind:value
• ✅ Array iteration using {#each}
• ✅ Conditional display with {#if}
• ✅ Proper component structure

Challenge 2 Requirements:

• ✅ Toggle functionality between formulas
• ✅ Reactive calculations using $:
• ✅ Both mathematical formulas implemented correctly
• ✅ Real-time updates when inputs change

Challenge 3 Requirements:

• ✅ Firebase Authentication integration
• ✅ Firestore CRUD operations (Create, Read, Delete)
• ✅ Component organization (modal and list components)
• ✅ Proper error handling
• ✅ User-specific data filtering

Troubleshooting Common Issues 🔧

Challenge One:

• Nothing shows up when typing: Check if the name matches exactly (case-sensitive)
• All results show at once: Make sure your {#if} condition is inside the {#each} block

Challenge 2:

• NaN appears: Initialize your variables or add checks for undefined values
• Button doesn't toggle: Verify the changeFormula() function is properly called with on:click

Challenge 3:

• Firebase errors: Double-check your Firebase configuration and ensure services are enabled
• Books not showing: Verify the onSnapshot listener is properly set up
• Can't delete books: Check if the document ID is being passed correctly to deleteDoc()

Project Submission 📤

ℹ️ Info

Ready to submit? Follow these steps:

1. Test all functionality thoroughly
2. Ensure all three challenges are complete
3. Commit and push your code if using GitHub
4. Submit your projects using the form below

Submit Your Projects Here

⚠️ Warning Before submitting: Make sure all features work correctly and your code follows Svelte best practices!