This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

---
title: A Guide to Handling DOM Events and Input Binding with Svelte
description: Using Svelte to handle DOM events and bind inputs
privateVideoUrl: https://fullstack.wistia.com/medias/olsgpdnl6b
codeFolder: course/code/module_03/lesson_03/school-lunch/frontend
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code_postgres_(author_original)/module_03/lesson_03/App/frontend
---

### Input Binding

JavaScript frameworks have come a long way in helping developers handle **input binding**.

When we say input binding, we mean taking the value from an HTML input and updating an underlying reference variable in JavaScript and inversely, taking values from JavaScript variables and displaying them in inputs. This is sometimes called **two-way binding**.

Svelte makes input binding easy with the `bind:value="{<varname>}"` directive on the relevant HTML element.

Let's add value bindings to our `Home.svelte` components. We need two variables to bind to: `emailAddress` and `schoolName`. Then we need to update the markup with `bind:value`.

First add a `<script>` section with the two variables to the top of the file:



```js
<script>
  let emailAddress 
  let schoolName
</script>
```

Then, in the markup section, find the Email Address and School Name inputs and add the `bind:value={var}` directives:

```html { actualFilename=../../../code/module_03/lesson_03/school-lunch/frontend/src/views/public/Home.svelte endLine=52 startLine=31 statedFilename=Home.svelte url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_04/lesson_04.03/.../../code/module_03/lesson_03/school-lunch/frontend/src/views/public/Home.svelte#L31 }
          <div class="control">
            
            <input
              bind:value="{emailAddress}"
              type="text"
              placeholder="Enter your email address"
              class="input" />
          </div>
        </div>
        <div class="field">
          <label class="label">School Name</label>
          <div class="control">
            
            <input
              bind:value="{schoolName}"
              type="text"
              placeholder="Enter your school's name"
              class="input" />
          </div>
        </div>
        <div class="field is-grouped">
          <div class="control">
```

Now, any time a user updates those inputs, the underlying `emailAddress` and `schoolName` variables will be updated.

Using Svelte to handle DOM events and bind inputs