From 6b834cdb822731dfcd533253ed4bc79d7fd4f2fb Mon Sep 17 00:00:00 2001 From: Christopher Harrison Date: Mon, 4 Jan 2021 09:54:24 -0800 Subject: [PATCH 1/4] Review --- .../includes/2-list-rendering.md | 1 + .../3-event-handling-using-methods.md | 10 +---- .../includes/2-styles-and-bindings.md | 18 +-------- .../3-change-behaviors-with-class-bindings.md | 4 +- .../includes/2-computed-properties.md | 21 +++------- m08-components-props/includes/2-components.md | 38 ++++++------------- m08-components-props/includes/3-props.md | 7 ---- 7 files changed, 22 insertions(+), 77 deletions(-) diff --git a/m04-list-rendering/includes/2-list-rendering.md b/m04-list-rendering/includes/2-list-rendering.md index dba991b..b4feff9 100644 --- a/m04-list-rendering/includes/2-list-rendering.md +++ b/m04-list-rendering/includes/2-list-rendering.md @@ -3,6 +3,7 @@ If you completed the prior exercises, your HTML file should look like the image Before users decide to book a cruise, they will want to know how much it costs. So the next thing we need to do is add information about pricing. ![Screenshot showing the HTML page with a selected product image on the left; product name and description are shown on the right, followed by two paragraphs that read "Sold out! Please check back for our next available shuttle." and "Bookings for our next cruise shuttle will be available in February, 2051.](../media/m4-html-start.png) + - If the `data()` property for `numSeatsAvailable` is set to `0`, the text in the product detail section will inform users that this cruise is "Sold out!" - An additional paragraph will be displayed that asks users to check back in February, 2051 to book seats on the next cruise shuttle. diff --git a/m05-event-handling/includes/3-event-handling-using-methods.md b/m05-event-handling/includes/3-event-handling-using-methods.md index 07d0920..1eb5f9a 100644 --- a/m05-event-handling/includes/3-event-handling-using-methods.md +++ b/m05-event-handling/includes/3-event-handling-using-methods.md @@ -11,7 +11,6 @@ Open **index.html** either from the [starter code](link), or your existing proje - Increment the value of cart by 1 ```javascript -... //TODO: Add a comma }, //TODO: Increment value of cart @@ -33,10 +32,8 @@ Now change the button in your HTML file to use the `addToCart` method instead of - Add `v-on:click` directive to Book a Cruise button below the comment that reads `TODO: Add item to cart` ```html -... -... ``` If you render the HTML file now, the cart should behave the same way it did when using the data expression. Clicking the "Book a Cruise" button should increment the number in the cart by 1 every time you click it because the `v-on` directive is still listening for that click event. @@ -46,9 +43,7 @@ If you render the HTML file now, the cart should behave the same way it did when You should also be aware that Vue allows a shorthand notation when using the `v-on` directive. You can use the "at" symbol (@) in place of `v-on:`, as shown below. ```html -... -... ``` ## Change selected product image when thumbnail is clicked @@ -64,7 +59,6 @@ Then use the `v-on:click` directive in your **index.html** file to execute the a - Apply `v-on:click` directive in **index.html** below the comment `TODO: Change selected image` ```javascript -... //TODO: Change selected image featureBookCruise() { this.selectedProdImg = './assets/images/space-4888643_1284x856.jpg'; @@ -78,11 +72,9 @@ featureBulletTrain() { featureAlienShip() { this.selectedProdImg = './assets/images/spaceship-5730066_1284x856.jpg'; }, -... ``` ```html -...
@@ -90,13 +82,13 @@ featureAlienShip() {
-... ``` > [!TIP] > If you want to have this method execute whenever a user hovers the mouse over a thumbnail image you could use the Vue @mouseover directive instead of @click. ![Screenshot showing the HTML page with a selected produce image on the left and 4 thumbnail images below it. Product name and description are displayed on the right, with two paragraphs of text. Below this are unordered lists for Passenger Rates and Group Discounts](../media/thumbnails_cart_button.png) + - Change the selected product image when a thumbnail image is clicked - Increment the value of cart when "Book a Cruise" button is clicked diff --git a/m06-class-and-style-binding/includes/2-styles-and-bindings.md b/m06-class-and-style-binding/includes/2-styles-and-bindings.md index 0315e16..69b61c5 100644 --- a/m06-class-and-style-binding/includes/2-styles-and-bindings.md +++ b/m06-class-and-style-binding/includes/2-styles-and-bindings.md @@ -12,16 +12,10 @@ We can use the `v-bind` directive for this purpose. Vue provides special enhance - Set the background color to light yellow ```css -... -li { - font-size: 18px; -} - /* TODO: Add a highlight class */ .highlight { background-color: rgb(250, 250, 133); } -... ``` In our **main.js** file we will set a boolean data property that lets us tell Vue when to apply our highlight style. We need to establish separate properties for each thumbnail object, because at any given time we want only one property to evaluate to `true` while the other three properties evaluate to `false`. That way only one thumbnail will have a yellow background highlight at any given time. We set the first image property to `true` in the data declaration section so that the default thumbnail image will be highlighted as soon as the HTML page loads. @@ -36,14 +30,6 @@ Next we need a way to trigger a change in the status of all 4 properties based o - Set the data property to `false` for all other features in that method ```Javascript -... -//TODO: create boolean data property for each thumbnail -isSelectedCruise: true, -isSelectedAsteroid: false, -isSelectedBullet: false, -isSelectedAlien: false, -... - //TODO: set boolean values for all thumbnails featureBookCruise() { this.selectedProdImg = './assets/images/space-4888643_1284x856.jpg'; @@ -73,7 +59,6 @@ featureAlienShip() { this.isSelectedBullet = false; this.isSelectedAlien = true; }, -... ``` ## Add style bindings to thumbnail images @@ -84,7 +69,6 @@ The last step of this process is to add the appropriate directives to each ` @@ -92,11 +76,11 @@ The last step of this process is to add the appropriate directives to each ` -... ``` Notice that we are able to use several types of Vue directives on each `` tag. We have applied a `v-on:click` directive to call a method that executes multiple actions on different element tags in our HTML page. We are also using the `v-bind:class` directive to dynamically change the background style of each image based on a condition. In addition, we are able to simultaneously apply several inline style settings to each `` tag. ![Screenshot showing the HTML page with a selected product image on the left and 4 thumbnail images below it. The thumbnail on the far left is highlighted with a yellow background. Product name and description are displayed on the right, with two paragraphs of text. Below this are unordered lists for Passenger Rates and Group Discounts. At the bottom are two buttons labeled "Book a Cruise" and "Remove Item".](../media/m06-thumbnail-highlight.png) + - The selected product image is indicated by the highlight on the matching thumbnail image - Clicking a thumbnail will change the large image to match the thumbnail image, and the highlight background will be moved to the clicked thumbnail image diff --git a/m06-class-and-style-binding/includes/3-change-behaviors-with-class-bindings.md b/m06-class-and-style-binding/includes/3-change-behaviors-with-class-bindings.md index 4bcc239..a0bc0d8 100644 --- a/m06-class-and-style-binding/includes/3-change-behaviors-with-class-bindings.md +++ b/m06-class-and-style-binding/includes/3-change-behaviors-with-class-bindings.md @@ -9,11 +9,9 @@ We already have a `disabledButton` class in our **styles.css** file that sets th - Use the `v-bind:class` directive to apply the `disabledButton` class style when the value of cart is 0 ```html -... -... ``` When viewed in a live browser your HTML page should look like the image below. @@ -23,4 +21,4 @@ When viewed in a live browser your HTML page should look like the image below. - Clicking the "Book a Cruise" button will increment the value of cart by 1 - Clicking the "Remove Item" button will decrement the value of cart by 1 (unless the value is 0) - "Remove Item" button will be active if the value of cart is 1 or higher -- "Remove Item" button will be inactive (and appear disabled) if the value of cart is 0 \ No newline at end of file +- "Remove Item" button will be inactive (and appear disabled) if the value of cart is 0 diff --git a/m07-computed-properties/includes/2-computed-properties.md b/m07-computed-properties/includes/2-computed-properties.md index a9814ed..6913e4b 100644 --- a/m07-computed-properties/includes/2-computed-properties.md +++ b/m07-computed-properties/includes/2-computed-properties.md @@ -7,10 +7,10 @@ We currently have our application interface working so that clicking any of the ## Add feature information Start by adding a new class to the **styles.css** file in the `assets` folder. Then add an `

` tag in your **index.html** file for display of a Feature Header. + - Add a class named `featureHeader` below the comment that reads `/* TODO: Add featureHeader class */` ```css -... /* TODO: Add featureHeader class */ .featureHeader { margin-top: 44px; @@ -22,17 +22,15 @@ Start by adding a new class to the **styles.css** file in the `assets` folder. T border-top-color: #fc810e; border-bottom-color: #fc810e; } -... ``` + - Add an `

` tag below the comment that reads `` - Style the `

` tag with class `featureHeader` - Show the `

` tag only when the bookingType is `feature` ```html -...

Add Trip Feature

-... ``` The new `

` tag should be displayed now if you view your **index.html** page in a browser and then click any of the 3 feature images to the right of the main thumbnail image. The problem is that we still have information for the main cruise displayed below the new header, so let's clear out that area so we can use that space for feature information when a feature is selected. @@ -41,7 +39,6 @@ The new `

` tag should be displayed now if you view your **index.html** page - Do not add this setting to the buttons because they are being managed independently with other application variables. ```html -...

Reservations available

Almost Sold Out!

@@ -56,7 +53,6 @@ The new `

` tag should be displayed now if you view your **index.html** page -... ``` If you display your HTML page now and click any of the feature thumbnails, you should see only the new **Add Trip Feature** heading, the product name, and the product description for any selected feature. Now it's time to add a few more details that are specific to each trip feature so that passengers will want to add these attractions to their basic cruise package. @@ -64,17 +60,15 @@ If you display your HTML page now and click any of the feature thumbnails, you s - Add new properties in the `data()` section of your **main.js** file below the comment that reads `//TODO: Add feature properties`. ```javascript -... //TODO: Add feature properties featurePrice: 0, featureQty: 0, onSale: false, -... ``` + - Add new settings to each of the three feature methods below the comment that reads `//TODO: update feature methods` ```javascript -... //TODO: update feature methods featureBookCruise() { this.productName = 'Book a Cruise to the Moon'; @@ -133,7 +127,6 @@ featureAlienShip() { this.isSelectedBullet = false; this.isSelectedAlien = true; }, -... ``` ## Display new information using computed properties @@ -150,14 +143,12 @@ In your **main.js** file, make sure the `featureQty` is set to `0` for the `feat - Add the text " Tickets remaining" ```javascript -... //TODO: Add computed properties computed: { featureDetails() { return '$' + this.featurePrice + ' (each person) - ' + this.featureQty + ' Tickets remaining'; }, } -... ``` Finally, add the following new content to your **index.html** file below the comment that reads ``. @@ -170,7 +161,6 @@ Finally, add the following new content to your **index.html** file below the com - Else display "Tickets Sold Out!" ```html -...

Cost and Availability

@@ -179,7 +169,6 @@ Finally, add the following new content to your **index.html** file below the com

Tickets Sold Out!

{{ sale }}

-... ``` You may be wondering why we don't use another computed property to represent whether tickets are available for each feature rather using the inline expression `featureQty > 0`. This is because a computed property cannot change the value of a piece of data. When we need to change data, we must use a method, and a method would need to be fired whenever the data for `featureQty` changes. A computed property is a good choice when you need to change the output display for "existing" data. @@ -187,9 +176,11 @@ You may be wondering why we don't use another computed property to represent whe Your final rendered interface should look like the screenshots displayed below. ![Screenshot showing the HTML page with a selected feature image on the left and 4 thumbnail images below it. The second thumbnail from the left is highlighted with a yellow background. Feature name, description, cost and number of tickets remaining are displayed on the right for the "Asteroid Fireworks Display." "Tickets Available" is displayed in green text. At the bottom are two buttons labeled "Add Feature" and "Remove Item". The "Remove Item" button is disabled](../media/m07-asteroid-fireworks.png) + - Asteroid Fireworks Display description, price and tickets remaining when thumbnail #2 is clicked - "Tickets available" is displayed because `featureQty` computed value is greater than 0. ![Screenshot showing the HTML page with a selected feature image on the left and 4 thumbnail images below it. The second thumbnail from the left is highlighted with a yellow background. Feature name, description, cost and number of tickets remaining are displayed on the right for the "Alien Spaceship Ride-a-long." "Tickets Sold Out!" is displayed in red text. At the bottom are two buttons labeled "Add Feature" and "Remove Item". The "Remove Item" button is disabled](../media/m07-alien-spaceship.png) + - **Alien Spaceship Ride-a-long** description, price and tickets remaining when thumbnail #4 is clicked - - "Tickets Sold Out!" is displayed because `featureQty` is 0. \ No newline at end of file + - "Tickets Sold Out!" is displayed because `featureQty` is 0 diff --git a/m08-components-props/includes/2-components.md b/m08-components-props/includes/2-components.md index c1e95a2..270ad12 100644 --- a/m08-components-props/includes/2-components.md +++ b/m08-components-props/includes/2-components.md @@ -1,17 +1,16 @@ -## Components - Components are blocks of code that you can create as separate Javascript files. A parent component can have child components nested within it. You can assemble the components together into a full Vue application interface like the one we have been building in this training, and the assembled components could look like the image we have already created. ![Screenshot showing the HTML page with the main product image on the left and 4 thumbnail images below it. Product name and description are displayed on the right. Below this are unordered lists for Passenger Rates and Group Discounts. At the bottom are two buttons labeled "Book a Cruise" and "Remove Item". The "Remove Item" button is currently disabled because there are 0 items in the cart.](../media/m08-components.png) The real value of components lies in their reusability. If you have a snippet of content that you might want to use in more than one application or on multiple HTML pages, that is when you might want to create the content as a separate component. In this learning module we will leave our existing content in the **index.html** file and create a small component that we will add to the lower left corner of our existing page. -An app can contain multiple components, so it may be wise to create a components folder to keep these "like items" together. Let's create a simple component. -- Create a folder named `components`. -- Create a file in the `components` folder named `FoodPrefs.js`. +An app can contain multiple components, so it may be wise to create a components folder to keep these "like items" together. Let's create a component. + +- Create a folder named **components**. +- Create a file in the **components** folder named **FoodPrefs.js**. - In the **FoodPrefs.js** file create an app component named `food-prefs`. - Add the `template` property, which allows you to create the HTML components to be displayed in your application interface. -- Add an HTML comment on the next line if you are using **VS Code** as your code editor. This activates the `es-6-string-html` extension for VS Code, which displays your HTML code with syntax highlighting. Without this extension your HTML code will look like the code snippet shown below, where all HTML content is displayed in the same color within your Javscript file. +- Add an HTML comment on the next line if you are using **VS Code** as your code editor. This activates the `es-6-string-html` extension for VS Code, which displays your HTML code with syntax highlighting. Without this extension your HTML code will look like the code snippet shown below, where all HTML content is displayed in the same color within your JavaScript file. - Create a `
` tag with a class named `componentBox`. Notice that the HTML components are surrounded with a backtick at the beginning and end of the `template` contents - Add an `

` tag with a centered heading that reads `Food Preferences`. - Add two additional `

` tags as shown in the code snippet below. @@ -24,7 +23,7 @@ app.component('food-prefs', {

Food Preferences

Room Service Fee{{ roomService }}

Please fill out this form to let us know your food preferences.

-
`, + ` }) ``` @@ -35,10 +34,9 @@ If you are using VS Code and you installed the `es-6-string-html` extension, you - Add two `componentBox` classes to your **styles.css** file (in the **assets** folder) below the comment that reads `/* TODO: Add componentBox classes*/`, as shown below. ```css -... /* TODO: Add componentBox classes*/ .componentBox { - margin-top: 0; + margin-top: 0; width: 66%; margin-left: 40px; padding-left: 20px; @@ -52,39 +50,27 @@ If you are using VS Code and you installed the `es-6-string-html` extension, you .componentBox p, li { font-size: 18px; } -... ``` Now we are ready to add this component to our **index.html** file. The first step is to import the new component Javascript file into our application interface. + - Add the following code below the comment that reads `TODO: Import Vue components`. ```html -... - - - - - - - - - - + + ``` Now that the content of the component has been imported, we need to tell our HTML page where to display that content. We essentially create a set of opening and closing tags that use the name of the app component we created in the Javascript file (in this case, **food-prefs**). + - Add the `` tags below the comment that reads `TODO: Add component`. ```html -... -... ``` -If you render the HTML file now you should see an image like the one shown below, where the new component is displayed in the bottom left corner of the screen below the thumbnail images. +If you refresh the page in your browser you should see an image like the one shown below, where the new component is displayed in the bottom left corner of the screen below the thumbnail images. ![Screenshot showing the HTML page with the main product image on the left and 4 thumbnail images below it. Product name and description are displayed on the right. A new component is displayed within a bordered box that is titled "Food Preferences."](../media/m08-comp-food-prefs.png) diff --git a/m08-components-props/includes/3-props.md b/m08-components-props/includes/3-props.md index 17800b4..7450e89 100644 --- a/m08-components-props/includes/3-props.md +++ b/m08-components-props/includes/3-props.md @@ -1,5 +1,3 @@ -## Props - Props are custom attributes for passing data into a component. The `prop` must be defined within the same Javascript file where the `component` is defined, because all components are limited to the scope of the isolated component. ![Screenshot showing the HTML page with the main product image on the left and 4 thumbnail images below it. Product name and description are displayed on the right. A new component is displayed at bottom left within a bordered box that is titled "Food Preferences."](../media/m08-comp-food-prefs.png) @@ -9,10 +7,8 @@ Suppose we need this component to have access to a data property that is outside - Add `berth` as a boolean data property in **main.js** below the comment that reads `//TODO: Add berth property`. ```javascript -... //TODO: Add berth property berth: true, -... ``` Now we need to add a `prop` that will allow our `component` to have access to the `berth` data property. Add this in our component Javascript file so the component can receive that value from the main application. We can even add some validation for the prop, such as the `type` of value it should be passing and whether or not the value is `required`. @@ -31,7 +27,6 @@ app.component('food-prefs', { }, template: /*html*/ -... ``` To generate a specific case for use of the `berth` property within this particular `component` we can create a custom data property that is specific to our needs. We will accomplish this by defining a `computed` property in our **FoodPrefs.js** file. @@ -56,10 +51,8 @@ To generate a specific case for use of the `berth` property within this particul Back in our **index.html** file we are going to add the shorthand for `v-bind` to our `component` tag to ensure that it will reactively receive the new value of `berth` when that property is updated within our application. ```html -... -... ``` Now our Vue application should render as shown in the image below if the passenger making reservations has booked a cruise at the rate for "First class with sleeping berth" (i.e., the data property for `berth` in **main.js** is true). From dd4952fd3b71fec6f3d0e0c4ac2647b6e264ab82 Mon Sep 17 00:00:00 2001 From: maryt Date: Mon, 11 Jan 2021 16:28:05 -0800 Subject: [PATCH 2/4] started changes to m08 by creating a FoodPrefsForm.vue file for the component --- .../m08_end/components/FoodPrefsForm.vue | 33 ++++++ code/module-08/m08_end/package.json | 12 ++ .../m09_end/components/FoodPrefsForm.vue | 97 +++++++++++++++++ code/module-09/m09_end/index.html | 2 +- m10-animations/includes/0-overview.md | 16 +++ .../includes/1-select-a-code-editor.md | 33 ++++++ m10-animations/includes/2-animations.md | 4 + m10-animations/media/m10_start.png | Bin 0 -> 453370 bytes .../includes/0-overview.md | 10 ++ .../includes/1-select-a-code-editor.md | 33 ++++++ .../includes/2-vue-cli.md | 103 ++++++++++++++++++ .../media/Vue-CLI_01.png | Bin 0 -> 22517 bytes .../media/Vue-CLI_02.png | Bin 0 -> 18906 bytes .../media/Vue-CLI_03.png | Bin 0 -> 18400 bytes .../media/Vue-CLI_04.png | Bin 0 -> 40511 bytes .../media/Vue-CLI_05.png | Bin 0 -> 28886 bytes .../media/Vue-CLI_06.png | Bin 0 -> 23732 bytes .../media/Vue-CLI_07.png | Bin 0 -> 111981 bytes .../media/Vue-CLI_08.png | Bin 0 -> 44419 bytes 19 files changed, 342 insertions(+), 1 deletion(-) create mode 100644 code/module-08/m08_end/components/FoodPrefsForm.vue create mode 100644 code/module-08/m08_end/package.json create mode 100644 code/module-09/m09_end/components/FoodPrefsForm.vue create mode 100644 m10-animations/includes/0-overview.md create mode 100644 m10-animations/includes/1-select-a-code-editor.md create mode 100644 m10-animations/includes/2-animations.md create mode 100644 m10-animations/media/m10_start.png create mode 100644 m11-vue-cli-and-developer-tools/includes/0-overview.md create mode 100644 m11-vue-cli-and-developer-tools/includes/1-select-a-code-editor.md create mode 100644 m11-vue-cli-and-developer-tools/includes/2-vue-cli.md create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_01.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_02.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_03.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_04.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_05.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_06.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_07.png create mode 100644 m11-vue-cli-and-developer-tools/media/Vue-CLI_08.png diff --git a/code/module-08/m08_end/components/FoodPrefsForm.vue b/code/module-08/m08_end/components/FoodPrefsForm.vue new file mode 100644 index 0000000..6ebb678 --- /dev/null +++ b/code/module-08/m08_end/components/FoodPrefsForm.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/code/module-08/m08_end/package.json b/code/module-08/m08_end/package.json new file mode 100644 index 0000000..ca58f82 --- /dev/null +++ b/code/module-08/m08_end/package.json @@ -0,0 +1,12 @@ +{ + "dependencies": { + "vue": "^3.0.2", + }, + "devDependencies": { + "snowpack": "^2.17.1" + }, + "scripts": { + "build": "npx snowpack build", + "start": "npx snowpack dev" + } +} diff --git a/code/module-09/m09_end/components/FoodPrefsForm.vue b/code/module-09/m09_end/components/FoodPrefsForm.vue new file mode 100644 index 0000000..1f1fa30 --- /dev/null +++ b/code/module-09/m09_end/components/FoodPrefsForm.vue @@ -0,0 +1,97 @@ + + + /* TODO: Add form data properties and methods */ + data() { + return { + passenger: '', + allergies: '', + allergydesc: '', + glutenfree: '', + vegan: '', + } + }, + /* TODO: Add methods */ + methods: { + onSubmit() { + if (this.passenger === '' || this.allergies === '' || this.allergydesc === '' || this.glutenfree === '' || this.vegan === '') { + alert('Form is incomplete. Please fill out every field.') + return + } + + let foodprefanswers = { + passenger: this.passenger, + allergies: this.allergies, + allergydesc: this.allergydesc, + glutenfree: this.glutenfree, + vegan: this.vegan, + } + + this.$emit('foodpref-submitted', foodprefanswers); + + this.passenger = ''; + this.allergies = ''; + this.allergydesc = ''; + this.glutenfree = ''; + this.vegan = ''; + + }, + }, + computed: { + roomService() { + if (this.berth) { + return `: No charge`; + } + return `: $24.99`; + } + }, +}) diff --git a/code/module-09/m09_end/index.html b/code/module-09/m09_end/index.html index c8dcd31..4d7fd8a 100644 --- a/code/module-09/m09_end/index.html +++ b/code/module-09/m09_end/index.html @@ -71,7 +71,7 @@

{{ featureDetails }}

- +