Updated module 3

2-dynamic-rendering/0-introduction.md

@@ -16,5 +16,5 @@ Upon completion of this module you will understand the following:
 - Knowledge of JavaScript
 - Familiarity with Vue.js and directives
 - [Git](https://git-scm.com/)
-- A code editor, such as [Visual Studio Code](https://code.visualstudio.com)
+- [Visual Studio Code](https://code.visualstudio.com)
   - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension

3-data-events/0-introduction.md

@@ -1,4 +1,16 @@
-- event handlers
-- updating state
-- forms
-- computed properties??
+Users typically modify data in a web application through a form. Since Vue.js is about working with dynamic data, it has a robust mechanism for binding data to forms. We can also manage events, performing different operations when a user clicks on a button or otherwise interacts with the page. And we even have the ability to add in values which are computed dynamically, allowing us to minimize the amount repeated code.
+
+In this module you will learn how to:
+
+- bind model data to a form
+- add event handlers
+- create computed values
+
+Prerequisites
+
+- Knowledge of HTML and CSS
+- Knowledge of JavaScript
+- Familiarity with Vue.js and directives
+- [Git](https://git-scm.com/)
+- [Visual Studio Code](https://code.visualstudio.com)
+  - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension

3-data-events/2-forms.md

@@ -0,0 +1,70 @@
+The data returned by the `data()` function in a Vue app or component is generically referred to as state. State is any information your application needs to track to perform the necessary operations. Users typically modify state through HTML forms. Vue.js allows us to bind data to a form, allowing users to update state.
+
+## v-model
+
+The `v-model` directive creates a *two-way* binding between an HTML control and the associated data. This means whenever the value is updated in the form it is updated inside your application's state. `v-model` supports binding to any form control, including checkboxes, textboxes and dropdown lists.
+
+> ![NOTE]
+> `v-bind` creates a one-way binding, meaning any changes the user might make in the form would not be stored in state.
+
+For all of our examples below, we will use the following Vue application:
+
+```javascript
+Vue.createApp({
+    data() {
+        return {
+            name: 'Cheryl',
+            status: -1,
+            active: true,
+            benefitsSelected: 'yes',
+            statusList: [
+                'full-time',
+                'part-time',
+                'contractor'
+            ]
+        }
+    }
+})
+```
+
+## Binding to textboxes
+
+To bind to a textbox, you use the `v-model` directive.
+
+```html
+<input type="text" v-bind="name" />
+```
+
+The `name` property will be updated whenever the textbox value changes. If you wish to use a `textarea` instead, the syntax is the same; you use `v-bind="name"` just as before.
+
+## Binding to checkboxes
+
+Typically Boolean values are bound to checkboxes, as they allow for the option to be toggled. To bind the `active` option we can use `v-model` as we've done before:
+
+```html
+<input type="checkbox" v-bind="active" /> Is active
+```
+
+However, there may be times when the toggle isn't a Boolean value, but maybe two choices such as *yes*/*no*. In this case, we can use `true-value` and `false-value` to indicate the associated value for the checkbox being checked (true) or unchecked (false).
+
+```html
+<input type="checkbox" v-bind="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}
+```
+
+## Dropdown lists
+
+Dropdown lists are created in HTML by using `select` to create the list, and `option` to add options. The `select` tag stores the selected value of the dropdown list, so we will use it to bind to our model. To create the list of `option`s, we will use `v-for` to loop through the array.
+
+Let's say we want to create a dropdown list for the `statusIndex` in our model. We bind the model to the select tag by using `v-model`.
+
+We create the list of options by using `v-for`, which loops through a list of items. Because we want to set the value to be the index of the item in the array rather than the value, we use `v-for(status, index) in statusList`, which will provide the index for each item. We then set the `:value` of each option to the `index`, and display `status` as the option for the user.
+
+```html
+<select v-model="statusIndex">'
+    <!-- Create a message to select one -->
+    <option disabled value="">Please select one</option>
+    <!-- Use v-for to create the list of options -->
+    <option v-for="(status, index) in statusList" :value="index">
+        {{ status }}
+    </option>
+</select>

3-data-events/3-exercise-forms.md

@@ -0,0 +1,88 @@
+Let's update a fictitious application for allowing people to book cruises into space. We will add a form to allow someone to book a trip to the moon.
+
+## Exploring the starter code
+
+The starter application already contains the core data model we will use. The `product` has information about the cruise itself, including the list of available `cabins`. The `booking` object is what we will use to store the options the user selects for their reservation. You can see the setup inside **index.js**.
+
+## Create the form
+
+Let's create the form the user will use to setup their reservation.
+
+1. Inside Visual Studio Code, open *index.html*
+1. Below the comment which reads `TODO: Add booking form`, add the following HTML
+
+    ```html
+    <!-- TODO: Add booking form -->
+    <form v-show="!booking.completed">
+        <h2>Book now!</h2>
+        <div class="row">
+            <label for="product-cabin">Select class:</label>
+            <select id="product-cabin" v-model="booking.cabinIndex">
+                <option v-for="(cabin, index) in product.cabins" :value="index">
+                    {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
+                </option>
+            </select>
+        </div>
+        <div class="row">
+            <label for="notes">Notes:</label>
+            <textarea v-model="booking.notes" rows="3"></textarea>
+        </div>
+        <div class="row">
+            <!--TODO: Add button later -->
+
+
+        </div>
+    </form>
+    ```
+
+## Breaking down the code
+
+Let's walk through HTML code you added to the page.
+
+### form element
+
+```html
+<form v-show="!booking.completed">
+```
+
+The `form` element is a normal HTML form element. The key attribute we have added is `v-show`, which allows you to toggle the display of an item in Vue.js. If `booking.completed` is false we will display the form (making note of the `!` at the beginning of our string), otherwise we will hide it.
+
+### select element for cabin
+
+```html
+<select id="product-cabin" v-model="booking.cabinIndex">
+    <option v-for="(cabin, index) in product.cabins" :value="index">
+        {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
+    </option>
+</select>
+```
+
+We display the list of available cabins by using a `select` element. We want to bind the selected value, which will be the index, to `booking.cabinIndex`. The list of available cabins is in `product.cabins`, so we use `v-for` to create the list of options for the dropdown. We set the `value` of each one to the `index`, and create a display of the `name` of the cabin and its `price`.
+
+### textarea for notes
+
+```html
+<textarea v-model="booking.notes" rows="3"></textarea>
+```
+
+ We bind the `booking.notes` option to a `textarea`. We set the size by setting the `rows` attribute to *3*.
+
+ ### The todo comment
+
+ You will notice we added a `TODO` comment for ourselves to add in a button. We will see how to create event handlers a little later in this module. We want to make sure we know where to place it when the time comes.
+
+ > ![NOTE]
+ > `TODO` comments are a great way to make notes in your code of tasks you need to complete in the future.
+
+ ## Test the results
+
+ Let's see our updated page!
+
+ 1. Save all files by clicking *File* > *Save all*
+ 1. Ensure *Live Server* is running by pressing *Ctl-Shift-P* (or *Cmd-Shift-P* on a Mac), typing *Live Server* in the command pallet, and selecting *Live Server: Open with Live Server*
+ 1. Open your browser and navigate to **http://localhost:5500**
+ 1. The page now displays
+
+    ![Screenshot of the newly created form](media/form-created.png)
+
+You have now bound Vue data to a form.