diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
index c307be4357d..bedd8588343 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -9,7 +9,7 @@ dashedName: step-36
هذا هو نوعا ما مما تريده، ولكن الآن سيكون من الجيد أن تكون flavor و price على نفس السطر. عناصر `p` هي block-level ، لذا فهي تأخذ كامل عرض العنصر الأساسي (parent element).
-لجعلهم على نفس السطر، تحتاج إلى تطبيق بعض التصميمات على عناصر `p` ، لكي يتصرفون مثل العناصر الـ inline . أضف سمة `class` مع قيمة `item` إلى عنصر `article` الأول تحت عنوان `Coffee`.
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 30ef65666c3..20aab7d27ca 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
塊級 元素，因此它們佔據了其父元素的整個寬度。
-要將它們放在同一行，你需要對 `p` 元素應用一些樣式，因此它們更像內聯 元素。 將值爲 `item` 的 `class` 屬性添加到 `Coffee` 標題下的第一個 `article` 元素。
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index de543cc72b4..fce3bcb85e8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
块级 元素，因此它们占据了其父元素的整个宽度。
-要将它们放在同一行，你需要对 `p` 元素应用一些样式，因此它们更像内联 元素。 将值为 `item` 的 `class` 属性添加到 `Coffee` 标题下的第一个 `article` 元素。
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 6e0d95083af..6feae0128cc 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
block-level (elementos de bloque), esto quiere decir que ocupan todo el ancho de su elemento padre.
-Para colocarlos en la misma línea, necesitas aplicar un estilo a los elementos `p` y que así se comporten más como elementos inline (en línea). Añade un atributo `class` (clase) con el valor `item` al primer elemento `article` debajo del título `Coffee`.
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 11feb990a9d..0122cf53fe5 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ Tu cuarto `tr` debe tener un elemento `th`.
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
block-level elements, so they take up the entire width of their parent element.
-Um sie auf die gleiche Zeile zu bringen, musst du die `p`-Elemente ein wenig gestalten, damit sie sich mehr wie inline -Elemente verhalten. Füge ein `class`-Attribut mit dem Wert `item` zum ersten `article`-Element unter der `Coffee`-Überschrift hinzu.
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index a5c1853fab5..9df92b0a789 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ Your fourth `tr` should have a `th` element.
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
elementi di blocco , quindi occupano l'intera larghezza dell'elemento genitore.
-Per averli sulla stessa riga, devi agire sullo stile degli elementi `p` e far sì che si comportino come elementi inline . Aggiungi un attributo `class` con il valore `item` al primo elemento `article` sotto l'intestazione `Coffee`.
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 66f28193d43..6551bcc8052 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ Il quarto `tr` dovrebbe avere un elemento `th`.
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
ブロックレベル 要素なので、親要素の幅全体に広がっています。
-これを一直線上に配置するには、`p` 要素にとあるスタイルを適用してインライン 要素のように動作させる必要があります。 `class` 属性と値 `item` を、`Coffee` という見出しの下にある最初の `article` 要素に追加してください。
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
index a4be2d1225d..450f8261d9a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
@@ -7,10 +7,10 @@ dashedName: step-3
# --description--
-`title` 要素はページに関する追加情報を検索エンジンに提供するということを覚えておきましょう。 It also displays the content of that `title` element in two more ways:
+`title` 要素はページに関する追加情報を検索エンジンに提供するということを覚えておきましょう。 また、その `title` 要素の内容が次の 2 箇所に表示されます。
-* in the title bar when the page is open
-* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed.
+* ページが開いているときに、タイトルバーに表示されます。
+* ページにカーソルを合わせたときに、ブラウザーのタブに表示されます。 そのタブがアクティブでない場合でも、タブにカーソルを合わせると、`title` のテキストが表示されます。
`head` 要素内に `title` 要素をネストし、テキストを `Colored Markers` としてください。
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index c48f037f76d..027cd17afc9 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
em nível de bloco , então eles ocupam toda a largura do seu elemento pai.
-Para fazer com que fiquem na mesma linha, você precisa aplicar algum tipo de estilo aos elementos `p`, de forma que eles comecem a se comportar mais como elementos inline . Adicione um atributo `class` com o valor `item` para o primeiro elemento `article` sob o título `Coffee`.
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index f9e164d4117..c711ebdf9d9 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ O quarto `tr` deve ter um elemento `th`.
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
на рівні блоків , отож вони займають всю ширину батьківського елемента.
-Щоб вони були на одній лінії, вам потрібно застосувати певну стилізацію для елементів `p`, щоб вони поводились як вбудовані елементи. Додайте атрибут `class` зі значенням `item` до першого елемента `article` під заголовком `Coffee`.
+To get them on the same line, you need to apply some styling to the `p` elements so they behave more like inline elements. To do that, start by adding a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
# --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 1950e4f6371..c5e90f56897 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,12 +19,6 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your text `Total Liabilities` should not include period `.`.
-
-```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.');
-```
-
Your `th` element should have the text `Total Liabilities`.
```js
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
new file mode 100644
index 00000000000..d65212aca6b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md
@@ -0,0 +1,214 @@
+---
+id: 63ec14d1c216aa063f0be4af
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive.
+
+To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively.
+
+Since these will not change, remember to use `const` to declare them.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#products-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#dessert-card-container` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
new file mode 100644
index 00000000000..98110e0bc8a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md
@@ -0,0 +1,201 @@
+---
+id: 63ec19978a066607e23439f8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#clear-cart-btn` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
new file mode 100644
index 00000000000..b3616baccb4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md
@@ -0,0 +1,227 @@
+---
+id: 63ec1a16f930b108b8a76806
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#total-items` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#subtotal` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#taxes` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/);
+```
+
+You should use `document.getElementById()` to get the `#total` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
new file mode 100644
index 00000000000..a973654d0d6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md
@@ -0,0 +1,209 @@
+---
+id: 63ec1bbf5584390a7d08d41f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`.
+
+Then, use `let` to declare a variable named `isCartShowing` and set it to `false`.
+
+# --hints--
+
+You should use `document.getElementById()` to get the `#show-hide-cart` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable.
+
+```js
+assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/);
+```
+
+You should use `let` to declare a variable named `isCartShowing`.
+
+```js
+assert.match(code, /let\s+isCartShowing/);
+```
+
+You should set the `isCartShowing` variable to `false`.
+
+```js
+assert.match(code, /let\s+isCartShowing\s*=\s*false/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
new file mode 100644
index 00000000000..172acaf6e3f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md
@@ -0,0 +1,198 @@
+---
+id: 63ec1cb59f2a4c0be5b6dfa0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products.
+
+# --hints--
+
+You should declare a `products` variable with `const`.
+
+```js
+assert.match(code, /const\s+products/);
+```
+
+You should set the `products` variable to an empty array.
+
+```js
+assert.match(code, /const\s+products\s*=\s*\[\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
new file mode 100644
index 00000000000..0815e4ecb06
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md
@@ -0,0 +1,226 @@
+---
+id: 63ec20a06fff670d37befbd9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+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`.
+
+# --hints--
+
+Your products array should have one value.
+
+```js
+assert.equal(products.length, 1);
+```
+
+Your products array should have an object as its first value.
+
+```js
+assert.isObject(products[0]);
+```
+
+Your products array should have an object with an `id` property set to the number `1`.
+
+```js
+assert.equal(products[0].id, 1);
+```
+
+Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`.
+
+```js
+assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your products array should have an object with a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[0].price, 12.99);
+```
+
+Your products array should have an object with a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[0].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
new file mode 100644
index 00000000000..30754019c8c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md
@@ -0,0 +1,472 @@
+---
+id: 63ec3287b182ec0efe8a3135
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up.
+
+| `name` | `price` | `category` |
+| ------------------------------ | ------- | ----------- |
+| `French Macaroon` | `3.99` | `Macaroon` |
+| `Pumpkin Cupcake` | `3.99` | `Cupcake` |
+| `Chocolate Cupcake` | `5.99` | `Cupcake` |
+| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` |
+| `Strawberry Ice Cream` | `2.99` | `Ice Cream` |
+| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` |
+| `Strawberry Pretzel` | `4.99` | `Pretzel` |
+| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` |
+| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` |
+| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` |
+| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` |
+
+# --hints--
+
+Your second object in the `products` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(products[1].id, 2);
+```
+
+Your second object in the `products` array should have a `name` property set to `French Macaroon`.
+
+```js
+assert.equal(products[1].name, 'French Macaroon');
+```
+
+Your second object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[1].price, 3.99);
+```
+
+Your second object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[1].category, 'Macaroon');
+```
+
+Your third object in the `products` array should have an `id` property set to the number `3`.
+
+```js
+assert.equal(products[2].id, 3);
+```
+
+Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`.
+
+```js
+assert.equal(products[2].name, 'Pumpkin Cupcake');
+```
+
+Your third object in the `products` array should have a `price` property set to the number `3.99`.
+
+```js
+assert.equal(products[2].price, 3.99);
+```
+
+Your third object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[2].category, 'Cupcake');
+```
+
+Your fourth object in the `products` array should have an `id` property set to the number `4`.
+
+```js
+assert.equal(products[3].id, 4);
+```
+
+Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`.
+
+```js
+assert.equal(products[3].name, 'Chocolate Cupcake');
+```
+
+Your fourth object in the `products` array should have a `price` property set to the number `5.99`.
+
+```js
+assert.equal(products[3].price, 5.99);
+```
+
+Your fourth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[3].category, 'Cupcake');
+```
+
+Your fifth object in the `products` array should have an `id` property set to the number `5`.
+
+```js
+assert.equal(products[4].id, 5);
+```
+
+Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`.
+
+```js
+assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)');
+```
+
+Your fifth object in the `products` array should have a `price` property set to the number `10.99`.
+
+```js
+assert.equal(products[4].price, 10.99);
+```
+
+Your fifth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[4].category, 'Pretzel');
+```
+
+Your sixth object in the `products` array should have an `id` property set to the number `6`.
+
+```js
+assert.equal(products[5].id, 6);
+```
+
+Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`.
+
+```js
+assert.equal(products[5].name, 'Strawberry Ice Cream');
+```
+
+Your sixth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[5].price, 2.99);
+```
+
+Your sixth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[5].category, 'Ice Cream');
+```
+
+Your seventh object in the `products` array should have an `id` property set to the number `7`.
+
+```js
+assert.equal(products[6].id, 7);
+```
+
+Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`.
+
+```js
+assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)');
+```
+
+Your seventh object in the `products` array should have a `price` property set to the number `9.99`.
+
+```js
+assert.equal(products[6].price, 9.99);
+```
+
+Your seventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[6].category, 'Macaroon');
+```
+
+Your eighth object in the `products` array should have an `id` property set to the number `8`.
+
+```js
+assert.equal(products[7].id, 8);
+```
+
+Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`.
+
+```js
+assert.equal(products[7].name, 'Strawberry Pretzel');
+```
+
+Your eighth object in the `products` array should have a `price` property set to the number `4.99`.
+
+```js
+assert.equal(products[7].price, 4.99);
+```
+
+Your eighth object in the `products` array should have a `category` property set to `Pretzel`.
+
+```js
+assert.equal(products[7].category, 'Pretzel');
+```
+
+Your ninth object in the `products` array should have an `id` property set to the number `9`.
+
+```js
+assert.equal(products[8].id, 9);
+```
+
+Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`.
+
+```js
+assert.equal(products[8].name, 'Butter Pecan Ice Cream');
+```
+
+Your ninth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[8].price, 2.99);
+```
+
+Your ninth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[8].category, 'Ice Cream');
+```
+
+Your tenth object in the `products` array should have an `id` property set to the number `10`.
+
+```js
+assert.equal(products[9].id, 10);
+```
+
+Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`.
+
+```js
+assert.equal(products[9].name, 'Rocky Road Ice Cream');
+```
+
+Your tenth object in the `products` array should have a `price` property set to the number `2.99`.
+
+```js
+assert.equal(products[9].price, 2.99);
+```
+
+Your tenth object in the `products` array should have a `category` property set to `Ice Cream`.
+
+```js
+assert.equal(products[9].category, 'Ice Cream');
+```
+
+Your eleventh object in the `products` array should have an `id` property set to the number `11`.
+
+```js
+assert.equal(products[10].id, 11);
+```
+
+Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`.
+
+```js
+assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)');
+```
+
+Your eleventh object in the `products` array should have a `price` property set to the number `11.99`.
+
+```js
+assert.equal(products[10].price, 11.99);
+```
+
+Your eleventh object in the `products` array should have a `category` property set to `Macaroon`.
+
+```js
+assert.equal(products[10].category, 'Macaroon');
+```
+
+Your twelfth object in the `products` array should have an `id` property set to the number `12`.
+
+```js
+assert.equal(products[11].id, 12);
+```
+
+Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`.
+
+```js
+assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)');
+```
+
+Your twelfth object in the `products` array should have a `price` property set to the number `12.99`.
+
+```js
+assert.equal(products[11].price, 12.99);
+```
+
+Your twelfth object in the `products` array should have a `category` property set to `Cupcake`.
+
+```js
+assert.equal(products[11].category, 'Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+--fcc-editable-region--
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+
+];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
new file mode 100644
index 00000000000..2a000e8614e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md
@@ -0,0 +1,281 @@
+---
+id: 63ec3427fc3e9214c9ed2a14
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that.
+
+Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function.
+
+# --hints--
+
+You should call the `.forEach` method of your `products` array.
+
+```js
+assert.match(code, /products\.forEach\(/);
+```
+
+You should use arrow syntax to create an empty callback function.
+
+```js
+assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/)
+```
+
+You should pass your empty callback function to the `.forEach` method.
+
+```js
+assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
new file mode 100644
index 00000000000..e9a2c069456
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md
@@ -0,0 +1,277 @@
+---
+id: 63ec36f6133df7160be3ec66
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Remember that you can use destructuring to extract multiple values from an array or object in a single statement.
+
+For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in.
+
+# --hints--
+
+You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters.
+
+```js
+assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/);
+```
+
+Your destructuring should be the first parameter of the callback function.
+
+```js
+assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ () => {}
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
new file mode 100644
index 00000000000..4add604d105
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md
@@ -0,0 +1,283 @@
+---
+id: 63ec47b454495519739486a7
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable.
+
+# --hints--
+
+You should use access the `innerHTML` property of the `dessertCards` variable.
+
+```js
+assert.match(code, /dessertCards\.innerHTML/);
+```
+
+You should use the addition assignment operator on the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/);
+```
+
+You should add an empty template literal string to the `innerHTML` property.
+
+```js
+assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
new file mode 100644
index 00000000000..02a59b523b4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md
@@ -0,0 +1,297 @@
+---
+id: 63ee5d38a5d29d0696f8d820
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('div')?.length, 12);
+```
+
+Your `div` element should have a class of `dessert-card`.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card')?.length, 12);
+```
+
+You should create an `h2` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.length, 12);
+```
+
+Your `h2` element should have the text of the `name` variable.
+
+```js
+assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)');
+```
+
+Your `h2` element should be inside the `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div h2')?.length, 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
new file mode 100644
index 00000000000..96485328760
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md
@@ -0,0 +1,309 @@
+---
+id: 63ee5d8f9e7168076e932fe2
+title: Step 12
+challengeType: 0
+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.
+
+# --hints--
+
+You should create two `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children.length, 3);
+assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2)
+```
+
+Your `p` elements should come after your `h2` element.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2');
+assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P');
+assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P');
+```
+
+Your first `p` element should have a `class` of `dessert-price`.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price');
+```
+
+Your first `p` element should have the text of the `price` variable with a dollar sign in front of it.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99');
+```
+
+Your second `p` element should have a `class` of `product-category`.
+
+```js
+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.
+
+```js
+assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
+
+ `;
+ }
+);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
new file mode 100644
index 00000000000..6092f597046
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
@@ -0,0 +1,304 @@
+---
+id: 63ee5e0f08e82208364c4128
+title: Step 13
+challengeType: 0
+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.
+
+# --hints--
+
+You should create a `button` element.
+
+```js
+assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
+```
+
+Your `button` element should come after your `p` elements.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
+assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
+```
+
+Your `button` element should have an `id` set to the value of the `id` variable.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.id, '1');
+```
+
+Your `button` element should have a `class` of `btn add-to-cart-btn`.
+
+```js
+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`.
+
+```js
+assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+--fcc-editable-region--
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
+
class . In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
+
+The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
+
+```js
+class Computer {};
+```
+
+Declare a `ShoppingCart` class.
+
+# --hints--
+
+You should declare a `ShoppingCart` variable.
+
+```js
+assert.match(code, /ShoppingCart/);
+```
+
+You should use the `class` keyword to declare a `ShoppingCart` class.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*/);
+```
+
+Your `ShoppingCart` class should be empty.
+
+```js
+assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+ `;
+ }
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
new file mode 100644
index 00000000000..da747a73c32
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
@@ -0,0 +1,349 @@
+---
+id: 63f018f04e487e164dc27bd9
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
+
+# --hints--
+
+Your first `p` element should have a `span` element.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children.length, 1);
+assert.equal(p.children[0].tagName, 'SPAN');
+```
+
+Your `span` element should have a `class` of `product-count`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].className, 'product-count');
+```
+
+Your `span` element should have an `id` of `product-count-for-id${id}`.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.children[0].id, 'product-count-for-id1');
+```
+
+Your first `p` element should have the text of the `name` variable. This should be outside the span.
+
+```js
+const cart = new ShoppingCart();
+cart.addItem(1, products);
+const div = document.querySelector('.product');
+const p = div.querySelector('p');
+assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
+
+```js
+const myComputer = new Computer();
+```
+
+Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
+
+# --hints--
+
+You should use `const` to declare a `cart` variable.
+
+```js
+assert.match(code, /const\s+cart\s*=/);
+```
+
+You should use the `new` keyword to instantiate a new `ShoppingCart` object.
+
+```js
+assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
+```
+
+You should assign your new `ShoppingCart` object to the `cart` variable.
+
+```js
+assert.isTrue(cart instanceof ShoppingCart);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+
freeCodeCamp Shopping Cart
+
+
+ Show Cart
+
+
+
Clear Cart
+
+
Total number of items: 0
+
Subtotal: $0
+
Taxes: $0
+
Total: $0
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --black: #000;
+ --white: #fff;
+ --grey: #3b3b4f;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.title {
+ color: var(--light-grey);
+ text-align: center;
+ margin: 25px 0;
+}
+
+#dessert-card-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.dessert-card {
+ background-color: var(--light-grey);
+ padding: 15px;
+ text-align: center;
+ border-radius: 15px;
+ margin: 20px 10px;
+}
+
+.dessert-price {
+ font-size: 1.2rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 100px;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#cart-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.add-to-cart-btn {
+ margin: 30px auto 10px;
+}
+
+#cart-container {
+ display: none;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ background-color: var(--light-grey);
+ width: 200px;
+ height: 400px;
+ border: 8px double var(--black);
+ border-radius: 15px;
+ text-align: center;
+ font-size: 1.2rem;
+ overflow-y: scroll;
+}
+
+.product {
+ margin: 25px 0;
+}
+
+.product-count {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.product-category {
+ margin: 10px 0;
+}
+
+@media (min-width: 768px) {
+ #dessert-card-container {
+ flex-direction: row;
+ }
+
+ .dessert-card {
+ flex: 1 0 21%;
+ }
+
+ #cart-container {
+ width: 300px;
+ }
+}
+```
+
+```js
+const cartContainer = document.getElementById("cart-container");
+const productsContainer = document.getElementById("products-container");
+const dessertCards = document.getElementById("dessert-card-container");
+const cartBtn = document.getElementById("cart-btn");
+const clearCartBtn = document.getElementById("clear-cart-btn");
+const totalNumberOfItems = document.getElementById("total-items");
+const cartSubTotal = document.getElementById("subtotal");
+const cartTaxes = document.getElementById("taxes");
+const cartTotal = document.getElementById("total");
+const showHideCartSpan = document.getElementById("show-hide-cart");
+let isCartShowing = false;
+
+const products = [
+ {
+ id: 1,
+ name: "Vanilla Cupcakes (6 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+ {
+ id: 2,
+ name: "French Macaroon",
+ price: 3.99,
+ category: "Macaroon",
+ },
+ {
+ id: 3,
+ name: "Pumpkin Cupcake",
+ price: 3.99,
+ category: "Cupcake",
+ },
+ {
+ id: 4,
+ name: "Chocolate Cupcake",
+ price: 5.99,
+ category: "Cupcake",
+ },
+ {
+ id: 5,
+ name: "Chocolate Pretzels (4 Pack)",
+ price: 10.99,
+ category: "Pretzel",
+ },
+ {
+ id: 6,
+ name: "Strawberry Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 7,
+ name: "Chocolate Macaroons (4 Pack)",
+ price: 9.99,
+ category: "Macaroon",
+ },
+ {
+ id: 8,
+ name: "Strawberry Pretzel",
+ price: 4.99,
+ category: "Pretzel",
+ },
+ {
+ id: 9,
+ name: "Butter Pecan Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 10,
+ name: "Rocky Road Ice Cream",
+ price: 2.99,
+ category: "Ice Cream",
+ },
+ {
+ id: 11,
+ name: "Vanilla Macaroons (5 Pack)",
+ price: 11.99,
+ category: "Macaroon",
+ },
+ {
+ id: 12,
+ name: "Lemon Cupcakes (4 Pack)",
+ price: 12.99,
+ category: "Cupcake",
+ },
+];
+
+products.forEach(
+ ({ name, id, price, category }) => {
+ dessertCards.innerHTML += `
+
+
${name}
+
$${price}
+
Category: ${category}
+
Add to cart
+
+
+
+
+
${price}
+