From 654d52e1c5524633b4a9e50cc65a261d478c5cb6 Mon Sep 17 00:00:00 2001 From: Mathieu Lemaire Date: Tue, 3 Dec 2024 22:47:33 +0100 Subject: [PATCH] feat: add jquery (#37) --- .../public/scripts/product.js | 13 +++++++++ .../public/styles/main.css | 6 +++++ .../server/views/pages/product.njk | 1 + .../views/partials/conversion-stock.njk | 9 ++++++- .../02.01-stability/public/scripts/product.js | 13 +++++++++ steps/02.01-stability/public/styles/main.css | 27 +++++++++++++++++++ .../server/views/pages/product.njk | 1 + .../views/partials/conversion-stock.njk | 9 ++++++- .../public/scripts/product.js | 13 +++++++++ .../public/styles/main.css | 6 +++++ .../server/views/pages/product.njk | 1 + .../views/partials/conversion-stock.njk | 9 ++++++- steps/02.02-fonts/public/scripts/product.js | 13 +++++++++ steps/02.02-fonts/public/styles/main.css | 6 +++++ .../server/views/pages/product.njk | 1 + .../views/partials/conversion-stock.njk | 9 ++++++- .../public/scripts/product.js | 13 +++++++++ steps/03.01-speed-size/public/styles/main.css | 6 +++++ .../server/views/pages/product.njk | 1 + .../views/partials/conversion-stock.njk | 9 ++++++- 20 files changed, 161 insertions(+), 5 deletions(-) create mode 100644 steps/02.01-stability-solution/public/scripts/product.js create mode 100644 steps/02.01-stability/public/scripts/product.js create mode 100644 steps/02.02-fonts-solution/public/scripts/product.js create mode 100644 steps/02.02-fonts/public/scripts/product.js create mode 100644 steps/03.01-speed-size/public/scripts/product.js diff --git a/steps/02.01-stability-solution/public/scripts/product.js b/steps/02.01-stability-solution/public/scripts/product.js new file mode 100644 index 0000000..94de8a8 --- /dev/null +++ b/steps/02.01-stability-solution/public/scripts/product.js @@ -0,0 +1,13 @@ +$(document).ready(function () { + $(document).on('click', '#increase-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + $('#quantity').val(qty + 1); + }); + + $(document).on('click', '#decrease-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + if (qty > 1) { + $('#quantity').val(qty - 1); + } + }); +}); diff --git a/steps/02.01-stability-solution/public/styles/main.css b/steps/02.01-stability-solution/public/styles/main.css index eee4a20..c972713 100644 --- a/steps/02.01-stability-solution/public/styles/main.css +++ b/steps/02.01-stability-solution/public/styles/main.css @@ -386,6 +386,12 @@ body { } .conversion__price { + display: flex; + align-items: center; + justify-content: space-between; +} + +.conversion__price-amount { font-size: 1.5rem; font-weight: 700; } diff --git a/steps/02.01-stability-solution/server/views/pages/product.njk b/steps/02.01-stability-solution/server/views/pages/product.njk index 4d52b71..e7b64fa 100644 --- a/steps/02.01-stability-solution/server/views/pages/product.njk +++ b/steps/02.01-stability-solution/server/views/pages/product.njk @@ -7,6 +7,7 @@ + diff --git a/steps/02.01-stability-solution/server/views/partials/conversion-stock.njk b/steps/02.01-stability-solution/server/views/partials/conversion-stock.njk index feec890..04b0cb4 100644 --- a/steps/02.01-stability-solution/server/views/partials/conversion-stock.njk +++ b/steps/02.01-stability-solution/server/views/partials/conversion-stock.njk @@ -23,7 +23,14 @@
- {{ sizes[0].price.amount }}€ +
+ {{ sizes[0].price.amount }}€ +
+ + + +
+
diff --git a/steps/02.01-stability/public/scripts/product.js b/steps/02.01-stability/public/scripts/product.js new file mode 100644 index 0000000..94de8a8 --- /dev/null +++ b/steps/02.01-stability/public/scripts/product.js @@ -0,0 +1,13 @@ +$(document).ready(function () { + $(document).on('click', '#increase-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + $('#quantity').val(qty + 1); + }); + + $(document).on('click', '#decrease-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + if (qty > 1) { + $('#quantity').val(qty - 1); + } + }); +}); diff --git a/steps/02.01-stability/public/styles/main.css b/steps/02.01-stability/public/styles/main.css index b1686cb..7e42d3c 100644 --- a/steps/02.01-stability/public/styles/main.css +++ b/steps/02.01-stability/public/styles/main.css @@ -384,6 +384,12 @@ body { } .conversion__price { + display: flex; + align-items: center; + justify-content: space-between; +} + +.conversion__price-amount { font-size: 1.5rem; font-weight: 700; } @@ -441,6 +447,27 @@ body { border-color: #000; } +/* Quantity */ +.quantity { + display: flex; + align-items: stretch; + gap: var(--spacing-2); +} + +.btn-quantity { + color: var(--color-anthracite); + min-width: 2rem; +} + +.btn-quantity:disabled { + color: var(--color-bg-secondary); +} + +.input-quantity { + width: 4rem; + text-align: center; +} + /* Product title */ .product-title { font-size: var(--font-size-xl); diff --git a/steps/02.01-stability/server/views/pages/product.njk b/steps/02.01-stability/server/views/pages/product.njk index b2c5b8d..8476905 100644 --- a/steps/02.01-stability/server/views/pages/product.njk +++ b/steps/02.01-stability/server/views/pages/product.njk @@ -7,6 +7,7 @@ + diff --git a/steps/02.01-stability/server/views/partials/conversion-stock.njk b/steps/02.01-stability/server/views/partials/conversion-stock.njk index feec890..04b0cb4 100644 --- a/steps/02.01-stability/server/views/partials/conversion-stock.njk +++ b/steps/02.01-stability/server/views/partials/conversion-stock.njk @@ -23,7 +23,14 @@
- {{ sizes[0].price.amount }}€ +
+ {{ sizes[0].price.amount }}€ +
+ + + +
+
diff --git a/steps/02.02-fonts-solution/public/scripts/product.js b/steps/02.02-fonts-solution/public/scripts/product.js new file mode 100644 index 0000000..94de8a8 --- /dev/null +++ b/steps/02.02-fonts-solution/public/scripts/product.js @@ -0,0 +1,13 @@ +$(document).ready(function () { + $(document).on('click', '#increase-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + $('#quantity').val(qty + 1); + }); + + $(document).on('click', '#decrease-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + if (qty > 1) { + $('#quantity').val(qty - 1); + } + }); +}); diff --git a/steps/02.02-fonts-solution/public/styles/main.css b/steps/02.02-fonts-solution/public/styles/main.css index 0e0e502..7fe4363 100644 --- a/steps/02.02-fonts-solution/public/styles/main.css +++ b/steps/02.02-fonts-solution/public/styles/main.css @@ -291,6 +291,12 @@ body { } .conversion__price { + display: flex; + align-items: center; + justify-content: space-between; +} + +.conversion__price-amount { font-size: 1.5rem; font-weight: 700; } diff --git a/steps/02.02-fonts-solution/server/views/pages/product.njk b/steps/02.02-fonts-solution/server/views/pages/product.njk index 0a7beec..dea362e 100644 --- a/steps/02.02-fonts-solution/server/views/pages/product.njk +++ b/steps/02.02-fonts-solution/server/views/pages/product.njk @@ -11,6 +11,7 @@ + diff --git a/steps/02.02-fonts-solution/server/views/partials/conversion-stock.njk b/steps/02.02-fonts-solution/server/views/partials/conversion-stock.njk index feec890..04b0cb4 100644 --- a/steps/02.02-fonts-solution/server/views/partials/conversion-stock.njk +++ b/steps/02.02-fonts-solution/server/views/partials/conversion-stock.njk @@ -23,7 +23,14 @@
- {{ sizes[0].price.amount }}€ +
+ {{ sizes[0].price.amount }}€ +
+ + + +
+
diff --git a/steps/02.02-fonts/public/scripts/product.js b/steps/02.02-fonts/public/scripts/product.js new file mode 100644 index 0000000..94de8a8 --- /dev/null +++ b/steps/02.02-fonts/public/scripts/product.js @@ -0,0 +1,13 @@ +$(document).ready(function () { + $(document).on('click', '#increase-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + $('#quantity').val(qty + 1); + }); + + $(document).on('click', '#decrease-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + if (qty > 1) { + $('#quantity').val(qty - 1); + } + }); +}); diff --git a/steps/02.02-fonts/public/styles/main.css b/steps/02.02-fonts/public/styles/main.css index eee4a20..c972713 100644 --- a/steps/02.02-fonts/public/styles/main.css +++ b/steps/02.02-fonts/public/styles/main.css @@ -386,6 +386,12 @@ body { } .conversion__price { + display: flex; + align-items: center; + justify-content: space-between; +} + +.conversion__price-amount { font-size: 1.5rem; font-weight: 700; } diff --git a/steps/02.02-fonts/server/views/pages/product.njk b/steps/02.02-fonts/server/views/pages/product.njk index 4d52b71..e7b64fa 100644 --- a/steps/02.02-fonts/server/views/pages/product.njk +++ b/steps/02.02-fonts/server/views/pages/product.njk @@ -7,6 +7,7 @@ + diff --git a/steps/02.02-fonts/server/views/partials/conversion-stock.njk b/steps/02.02-fonts/server/views/partials/conversion-stock.njk index feec890..04b0cb4 100644 --- a/steps/02.02-fonts/server/views/partials/conversion-stock.njk +++ b/steps/02.02-fonts/server/views/partials/conversion-stock.njk @@ -23,7 +23,14 @@
- {{ sizes[0].price.amount }}€ +
+ {{ sizes[0].price.amount }}€ +
+ + + +
+
diff --git a/steps/03.01-speed-size/public/scripts/product.js b/steps/03.01-speed-size/public/scripts/product.js new file mode 100644 index 0000000..94de8a8 --- /dev/null +++ b/steps/03.01-speed-size/public/scripts/product.js @@ -0,0 +1,13 @@ +$(document).ready(function () { + $(document).on('click', '#increase-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + $('#quantity').val(qty + 1); + }); + + $(document).on('click', '#decrease-qty', function () { + let qty = parseInt($('#quantity').val(), 10) || 0; + if (qty > 1) { + $('#quantity').val(qty - 1); + } + }); +}); diff --git a/steps/03.01-speed-size/public/styles/main.css b/steps/03.01-speed-size/public/styles/main.css index 0e0e502..7fe4363 100644 --- a/steps/03.01-speed-size/public/styles/main.css +++ b/steps/03.01-speed-size/public/styles/main.css @@ -291,6 +291,12 @@ body { } .conversion__price { + display: flex; + align-items: center; + justify-content: space-between; +} + +.conversion__price-amount { font-size: 1.5rem; font-weight: 700; } diff --git a/steps/03.01-speed-size/server/views/pages/product.njk b/steps/03.01-speed-size/server/views/pages/product.njk index 0a7beec..dea362e 100644 --- a/steps/03.01-speed-size/server/views/pages/product.njk +++ b/steps/03.01-speed-size/server/views/pages/product.njk @@ -11,6 +11,7 @@ + diff --git a/steps/03.01-speed-size/server/views/partials/conversion-stock.njk b/steps/03.01-speed-size/server/views/partials/conversion-stock.njk index feec890..04b0cb4 100644 --- a/steps/03.01-speed-size/server/views/partials/conversion-stock.njk +++ b/steps/03.01-speed-size/server/views/partials/conversion-stock.njk @@ -23,7 +23,14 @@
- {{ sizes[0].price.amount }}€ +
+ {{ sizes[0].price.amount }}€ +
+ + + +
+