Request parsing in Svelte - Mini Project: Build & Apply

Request Parsing in Svelte

📖 Scenario: You are building a simple Svelte app that receives user input from a form and parses the request data to display it on the page.

🎯 Goal: Create a Svelte component that parses form input data from a user request and displays the parsed values dynamically.

📋 What You'll Learn

Create a Svelte component with a form containing two inputs: name and age.

Add a variable to hold the parsed request data.

Write a function to parse the form submission event and extract the name and age values.

Display the parsed name and age below the form dynamically.

💡 Why This Matters

🌍 Real World

Parsing user input from forms is a common task in web apps to handle requests and update UI dynamically.

💼 Career

Understanding request parsing in frameworks like Svelte is essential for frontend developers building interactive user interfaces.

1

Create the form inputs

Create a Svelte component with a form containing two input fields: name with type text and age with type number. Add a submit button with the text Submit.

Svelte

Hint

Use the <input> tag with id, name, and type attributes for each field.

2

Add a variable to hold parsed data

Add a reactive variable called parsedData initialized to an object with name and age properties set to empty string and zero respectively.

Svelte

  Name:
  

  Age:
  

  Submit



  // Add reactive variable parsedData here

Hint

Use let parsedData = { name: "", age: 0 } inside the <script> tag.

3

Write a function to parse form submission

Inside the <script> tag, write a function called handleSubmit that takes an event e, prevents the default form submission, and sets parsedData.name and parsedData.age from the form inputs using e.target.name.value and Number(e.target.age.value).

Svelte

  Name:
  

  Age:
  

  Submit



  let parsedData = { name: "", age: 0 };

  // Write handleSubmit function here

Hint

Use function handleSubmit(e) { ... } and update parsedData properties from e.target.

4

Display the parsed data

Below the form, add markup to display the parsed name and age from the parsedData variable inside <p> tags with labels Name: and Age:.

Svelte

  Name:
  

  Age:
  

  Submit





  let parsedData = { name: "", age: 0 };

  function handleSubmit(e) {
    parsedData.name = e.target.name.value;
    parsedData.age = Number(e.target.age.value);
  }

Hint

Use curly braces {} to insert parsedData.name and parsedData.age inside <p> tags.