chore(curriculum): add quotes to strings in OOP shopping cart (#54023)

This commit is contained in:
James 2024-03-13 13:45:28 +11:00 committed by GitHub
parent 9c20069eb2
commit 4c84362b4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 15 additions and 15 deletions

View File

@ -9,7 +9,7 @@ dashedName: step-6
You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product.
Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`.
Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to the string `"Vanilla Cupcakes (6 Pack)"`, a `price` property set to the number `12.99`, and a `category` property set to the string `"Cupcake"`.
# --hints--
@ -31,7 +31,7 @@ Your products array should have an object with an `id` property set to the numbe
assert.equal(products[0].id, 1);
```
Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
Your products array should have an object with a `name` property set to the string `"Vanilla Cupcakes (6 Pack)"`.
```js
assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
@ -43,7 +43,7 @@ Your products array should have an object with a `price` property set to the num
assert.equal(products[0].price, 12.99);
```
Your products array should have an object with a `category` property set to `Cupcake`.
Your products array should have an object with a `category` property set to the string `"Cupcake"`.
```js
assert.equal(products[0].category, 'Cupcake');

View File

@ -7,7 +7,7 @@ dashedName: step-12
# --description--
After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category: ` followed by the value of the `category` variable.
After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `"Category: "` followed by the value of the `category` variable.
# --hints--
@ -44,7 +44,7 @@ Your second `p` element should have a `class` of `product-category`.
assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category');
```
Your second `p` element should have the text `Category: ` followed by the value of the `category` variable.
Your second `p` element should have the text `"Category: "` followed by the value of the `category` variable.
```js
assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');

View File

@ -7,7 +7,7 @@ dashedName: step-13
# --description--
Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text.
Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `"Add to cart"` for the text.
# --hints--
@ -37,7 +37,7 @@ assert.include(document.querySelector('.dessert-card button')?.className, 'btn')
assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn');
```
Your `button` element should have the text `Add to cart`.
Your `button` element should have the text `"Add to cart"`.
```js
assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');

View File

@ -7,7 +7,7 @@ dashedName: step-33
# --description--
You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`.
You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `"add-to-cart-btn"`.
# --hints--
@ -23,7 +23,7 @@ You should call the `getElementsByClassName()` method on the `document` object.
assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/);
```
You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method.
You should pass the string `"add-to-cart-btn"` to the `getElementsByClassName()` method.
```js
assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/);

View File

@ -7,7 +7,7 @@ dashedName: step-39
# --description--
Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`.
Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `"Hide"`, otherwise set it to `"Show"`.
# --hints--
@ -23,13 +23,13 @@ You should use ternary syntax to check if `isCartShowing` is true.
assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/)
```
You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true.
You should set the `textContent` of the `showHideCartSpan` variable to `"Hide"` if `isCartShowing` is true.
```js
assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/)
```
You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false.
You should set the `textContent` of the `showHideCartSpan` variable to `"Show"` if `isCartShowing` is false.
```js
assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/)

View File

@ -7,7 +7,7 @@ dashedName: step-40
# --description--
Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`.
Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `"block"`, otherwise set it to `"none"`.
Now you should be able to see your cart and add items to it.
@ -31,13 +31,13 @@ You should use ternary syntax to check if `isCartShowing` is true.
assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/)
```
You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true.
You should set the `display` property of the `style` property of the `cartContainer` variable to `"block"` if `isCartShowing` is true.
```js
assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/)
```
You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false.
You should set the `display` property of the `style` property of the `cartContainer` variable to `"none"` if `isCartShowing` is false.
```js
assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/)