Forms and mutations in Deno - Mini Project: Build & Apply

Simple Contact Form with Data Mutation in Deno

📖 Scenario: You are building a simple contact form for a website using Deno. Visitors can enter their name and message. When they submit the form, the data is saved in a list on the server.

🎯 Goal: Create a Deno server that shows a contact form. When the form is submitted, the server saves the data in a list and shows the updated list of messages.

📋 What You'll Learn

Create an empty list called messages to store contact form entries.

Create a variable called formHtml containing the HTML form as a string.

Write a function called handleRequest that reads form data from POST requests and adds it to messages.

Start a Deno HTTP server that uses handleRequest to respond with the form and the list of messages.

💡 Why This Matters

🌍 Real World

Contact forms are common on websites to collect user feedback or questions. Handling form data and updating server state is a basic web development skill.

💼 Career

Understanding how to handle forms and mutate data on the server is essential for backend and full-stack developers working with modern web servers like Deno.

1

Create the initial data structure

Create an empty list called messages to store contact form entries.

Deno

# Create an empty list called messages
# Your code here

Hint

Use const messages = [] to create an empty array.

2

Add the HTML form as a string

Create a variable called formHtml that contains this exact HTML form as a string:

<form method="POST">
  <label for="name">Name:</label>
  <input id="name" name="name" required>
  <br>
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <br>
  <button type="submit">Send</button>
</form>

Deno

const messages = []
# Create a variable formHtml with the contact form HTML string
# Your code here

Hint

Use backticks ` to create a multi-line string for the form HTML.

3

Write the request handler function

Write an async function called handleRequest that takes a Request object. If the request method is POST, read the form data from the request, extract name and message, and add an object with these to the messages list. Then return a response with the form HTML and a list of all messages in simple text.

Deno

const messages = []
const formHtml = `
  Name:
  
  
  Message:
  
  
  Send
`

// Write async function handleRequest(request) here
// Your code here

Hint

Use await request.formData() to get form data. Then add the data to messages. Finally, build a response with the form and messages.

4

Start the Deno HTTP server

Use Deno.serve to start an HTTP server on port 8000 that uses the handleRequest function to handle requests.

Deno

const messages = []
const formHtml = `
  Name:
  
  
  Message:
  
  
  Send
`

async function handleRequest(request) {
  if (request.method === "POST") {
    const formData = await request.formData();
    const name = formData.get("name");
    const message = formData.get("message");
    if (typeof name === "string" && typeof message === "string") {
      messages.push({ name, message });
    }
  }

  const messagesList = messages.map(m => `${m.name}: ${m.message}`).join("");
  const body = `${formHtml}Messages:${messagesList}`;
  return new Response(body, { headers: { "content-type": "text/html; charset=utf-8" } });
}

// Start the server on port 8000 using Deno.serve and handleRequest
// Your code here

Hint

Use Deno.serve with an options object specifying port: 8000 and pass handleRequest as the handler.

Practice

1. What does the req.formData() method do in a Deno server context?

easy

A. It reads and returns the submitted form data from the request.

B. It sends form data back to the client.

C. It validates the form data automatically.

D. It clears the form data from the request.

Solution

1. Step 1: Understand the purpose of req.formData()

   This method is designed to extract form data sent by the client in a POST request.

2. Step 2: Identify what the method returns

   It returns a FormData object containing key-value pairs from the submitted form.

3. Final Answer:

   It reads and returns the submitted form data from the request. -> Option A

4. Quick Check:

   Form data reading = It reads and returns the submitted form data from the request. [OK]

Hint: Remember: formData() reads input, it doesn't send or clear it [OK]

Common Mistakes:

• Thinking formData() sends data to client
• Assuming formData() validates data automatically
• Believing formData() clears data from request

2. Which of the following is the correct way to asynchronously get form data from a request in Deno?

easy

A. const data = await req.formData();

B. const data = req.getFormData();

C. const data = req.formData();

D. const data = await req.getFormData();

Solution

1. Step 1: Recall the method signature for formData()

   In Deno, req.formData() returns a Promise, so it must be awaited.

2. Step 2: Identify the correct syntax

   The correct syntax uses await req.formData(); to get the form data asynchronously.

3. Final Answer:

   const data = await req.formData(); -> Option A

4. Quick Check:

   Async form data retrieval = const data = await req.formData(); [OK]

Hint: Always await formData() since it returns a Promise [OK]

Common Mistakes:

• Forgetting to use await with formData()
• Using a non-existent method getFormData()
• Calling formData() without async context

3. Given this Deno server code snippet handling a POST request:

const formData = await req.formData();
const name = formData.get('name');
return new Response(`Hello, ${name}!`);

What will be the response if the form submitted has name=Alice?

medium

A. Hello, !

B. Hello, undefined!

C. Hello, null!

D. Hello, Alice!

Solution

1. Step 1: Extract the 'name' value from formData

   The code uses formData.get('name') which returns the string 'Alice' from the submitted form.

2. Step 2: Construct the response string

   The response template string inserts 'Alice' correctly, resulting in 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   formData.get('name') = 'Alice' [OK]

Hint: formData.get('key') returns the submitted value or null if missing [OK]

Common Mistakes:

• Assuming get() returns undefined instead of null
• Not using await with formData() causing errors
• Misreading template string interpolation

4. Identify the error in this Deno code snippet handling form submission:

const formData = req.formData();
const email = formData.get('email');
return new Response(email);

medium

A. Response cannot return a string directly.

B. formData.get() is not a valid method on FormData.

C. Missing await before req.formData() causing a Promise error.

D. The variable email is not declared.

Solution

1. Step 1: Check how formData() is called

   The method req.formData() returns a Promise and must be awaited.

2. Step 2: Identify the error caused by missing await

   Without await, formData is a Promise, so calling get() on it causes a runtime error.

3. Final Answer:

   Missing await before req.formData() causing a Promise error. -> Option C

4. Quick Check:

   Always await formData() to get FormData object [OK]

Hint: Always await async calls like formData() before using results [OK]

Common Mistakes:

• Calling get() on a Promise instead of FormData
• Assuming formData() is synchronous
• Ignoring async/await syntax rules

5. You want to update a user's profile using a form in Deno. The form sends username and age. Which code correctly reads the form and updates a user object, ensuring age is stored as a number?

hard

A. const formData = await req.formData(); const user = { username: formData.get('username'), age: formData.get('age') };

B. const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) };

C. const formData = req.formData(); const user = { username: formData.get('username'), age: parseInt(formData.get('age')) };

D. const formData = await req.formData(); const user = { username: formData.get('username'), age: parseFloat(formData.get('username')) };

Solution

1. Step 1: Await formData() to get the form data object

   Using await req.formData() correctly retrieves the form data asynchronously.

2. Step 2: Convert the 'age' string to a number properly

   Using Number(formData.get('age')) converts the age string to a number safely.

3. Step 3: Check the username assignment

   Assigning username: formData.get('username') correctly stores the username string.

4. Final Answer:

   const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; -> Option B

5. Quick Check:

   Await + Number conversion = const formData = await req.formData(); const user = { username: formData.get('username'), age: Number(formData.get('age')) }; [OK]

Hint: Always await formData() and convert numeric strings with Number() [OK]

Common Mistakes:

• Not awaiting formData() causing errors
• Storing age as string without conversion
• Parsing wrong field for age