chore(curriculum): add quotes to string/texts in Build a Cash Register Project (#53924)
parent
02c4e90893
commit
8ba5783aa1
|
@ -18,9 +18,9 @@ If you'd like to test your application with different values for `price` and `ci
|
|||
|
||||
Your application should show different messages depending on the price of the item, the amount of cash provided by the customer, and the amount of cash in the drawer:
|
||||
|
||||
- `Status: INSUFFICIENT_FUNDS`: if `cash-in-drawer` is less than the change due, or if you cannot return the exact change.
|
||||
- `Status: CLOSED`: if `cash-in-drawer` is equal to the change due.
|
||||
- `Status: OPEN`: if `cash-in-drawer` is greater than the change due and you can return change, with the change due in coins and bills sorted in highest to lowest order.
|
||||
- `"Status: INSUFFICIENT_FUNDS"`: if `cash-in-drawer` is less than the change due, or if you cannot return the exact change.
|
||||
- `"Status: CLOSED"`: if `cash-in-drawer` is equal to the change due.
|
||||
- `"Status: OPEN"`: if `cash-in-drawer` is greater than the change due and you can return change, with the change due in coins and bills sorted in highest to lowest order.
|
||||
|
||||
| Currency Unit | Amount |
|
||||
|:-------------------:|:------------------:|
|
||||
|
@ -38,43 +38,43 @@ Your application should show different messages depending on the price of the it
|
|||
|
||||
**User Stories:**
|
||||
|
||||
1. You should have an `input` element with an `id` of `cash`
|
||||
1. You should have a `div` element with an `id` of `change-due`
|
||||
1. You should have a `button` element with an `id` of `purchase-btn`
|
||||
1. When the value in the `#cash` element is less than `price`, an alert should appear with the text `Customer does not have enough money to purchase the item`
|
||||
1. When the value in the `#cash` element is equal to `price`, the value in the `#change-due` element should be `No change due - customer paid with exact cash`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: OPEN QUARTER: $0.5`
|
||||
1. When `price` is `3.26`, the value in the `#cash` element is `100`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: INSUFFICIENT_FUNDS`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: INSUFFICIENT_FUNDS`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: CLOSED PENNY: $0.5`
|
||||
1. You should have an `input` element with an `id` of `"cash"`
|
||||
1. You should have a `div` element with an `id` of `"change-due"`
|
||||
1. You should have a `button` element with an `id` of `"purchase-btn"`
|
||||
1. When the value in the `#cash` element is less than `price`, an alert should appear with the text `"Customer does not have enough money to purchase the item"`
|
||||
1. When the value in the `#cash` element is equal to `price`, the value in the `#change-due` element should be `"No change due - customer paid with exact cash"`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: OPEN QUARTER: $0.5"`
|
||||
1. When `price` is `3.26`, the value in the `#cash` element is `100`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: INSUFFICIENT_FUNDS"`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: INSUFFICIENT_FUNDS"`
|
||||
1. When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: CLOSED PENNY: $0.5"`
|
||||
|
||||
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `input` element with an `id` of `cash`.
|
||||
You should have an `input` element with an `id` of `"cash"`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('cash');
|
||||
assert.strictEqual(el?.nodeName?.toLowerCase(), 'input');
|
||||
```
|
||||
|
||||
You should have a `div` element with an `id` of `change-due`.
|
||||
You should have a `div` element with an `id` of `"change-due"`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('change-due');
|
||||
assert.strictEqual(el?.nodeName?.toLowerCase(), 'div');
|
||||
```
|
||||
|
||||
You should have a `button` element with an `id` of `purchase-btn`.
|
||||
You should have a `button` element with an `id` of `"purchase-btn"`.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('purchase-btn');
|
||||
assert.strictEqual(el?.nodeName?.toLowerCase(), 'button');
|
||||
```
|
||||
|
||||
When the value in the `#cash` element is less than `price`, an alert should appear with the text `Customer does not have enough money to purchase the item`.
|
||||
When the value in the `#cash` element is less than `price`, an alert should appear with the text `"Customer does not have enough money to purchase the item"`.
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
@ -89,7 +89,7 @@ purchaseBtn.click();
|
|||
assert.strictEqual(alertMessage.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'customer does not have enough money to purchase the item');
|
||||
```
|
||||
|
||||
When the value in the `#cash` element is equal to `price`, the value in the `#change-due` element should be `No change due - customer paid with exact cash`.
|
||||
When the value in the `#cash` element is equal to `price`, the value in the `#change-due` element should be `"No change due - customer paid with exact cash"`.
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
@ -103,7 +103,7 @@ purchaseBtn.click();
|
|||
assert.strictEqual(changeDueDiv.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'no change due - customer paid with exact cash');
|
||||
```
|
||||
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: OPEN QUARTER: $0.5`.
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: OPEN QUARTER: $0.5"`.
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
@ -119,7 +119,7 @@ purchaseBtn.click();
|
|||
assert.isTrue(expected.every(str => changeDueDiv.innerText.trim().toLowerCase().includes(str.toLowerCase())));
|
||||
```
|
||||
|
||||
When `price` is `3.26`, the value in the `#cash` element is `100`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04`.
|
||||
When `price` is `3.26`, the value in the `#cash` element is `100`, `cid` is `[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"`.
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
@ -135,7 +135,7 @@ purchaseBtn.click();
|
|||
assert.isTrue(expected.every(str => changeDueDiv.innerText.trim().toLowerCase().includes(str.toLowerCase())));
|
||||
```
|
||||
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: INSUFFICIENT_FUNDS`
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: INSUFFICIENT_FUNDS"`
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
@ -150,7 +150,7 @@ purchaseBtn.click();
|
|||
assert.strictEqual(changeDueDiv.innerText.trim().toLowerCase(), 'status: insufficient_funds');
|
||||
```
|
||||
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: INSUFFICIENT_FUNDS`.
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: INSUFFICIENT_FUNDS"`.
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
@ -165,7 +165,7 @@ purchaseBtn.click();
|
|||
assert.strictEqual(changeDueDiv.innerText.trim().toLowerCase(), 'status: insufficient_funds');
|
||||
```
|
||||
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `Status: CLOSED PENNY: $0.5`.
|
||||
When `price` is `19.5`, the value in the `#cash` element is `20`, `cid` is `[["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]`, and the `#purchase-btn` element is clicked, the value in the `#change-due` element should be `"Status: CLOSED PENNY: $0.5"`.
|
||||
|
||||
```js
|
||||
const cashInput = document.getElementById('cash');
|
||||
|
|
Loading…
Reference in New Issue