function empty() {}
console.log(typeof empty()); // 'undefined'
id
в свою вёрстку:<div class="addItemCard2__item" id="${ID_VAR_HERE}">...</div>
id
в элементы своей коллекции:const example = [
{ id: '1', img: 'my-img.jpg', name: 'Item 1', description: 'some desc', price: 1000 },
{ id: '2', img: 'my-img.jpg', name: 'Item 2', description: 'some desc', price: 2000 },
];
const doAction = (wrapper, callback) => {
const countElement = wrapper.querySelector('.order-counter__number');
const costElement = wrapper.querySelector('.order-footer__costs');
const count = parseInt(countElement.textContent);
const item = example.find(entry => entry.id === wrapper.id); // поменять example на свой массив со всеми элементами
if (item) {
callback(item, count, {
count: countElement,
cost: costElement
});
}
}
const doPlus = (wrapper) => doAction(wrapper, (item, count, elements) => {
const newCount = count + 1;
elements.count.textContent = newCount;
elements.cost.textContent = newCount * item.price;
});
const doMinus = (wrapper) => doAction(wrapper, (item, count, elements) => {
const newCount = Math.max(1, count - 1);
elements.count.textContent = newCount;
elements.cost.textContent = newCount * item.price;
});
window.addEventListener('click', event => {
const button = event.target.closest('.order-counter__btn');
if (button) {
const wrapper = event.target.closest('.addItemCard2__item');
if (button.classList.contains('order-counter__plus')) {
doPlus(wrapper);
} else if (button.classList.contains('order-counter__minus')) {
doMinus(wrapper);
}
}
});
{
"name": "workspace",
"version": "1.0.0",
"scripts": {
"build": "gulp"
},
"dependencies": {
"gsap": "^3.9.1"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^13.1.3",
"gulp": "^4.0.2",
"rollup": "^2.70.0"
}
}
const { series } = require('gulp');
const rollup = require('rollup');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const build = async (done) => {
const bundle = await rollup.rollup({
input: './src/index.js',
plugins: [nodeResolve()]
});
await bundle.write({
dir: './dist',
format: 'umd',
sourcemap: true
});
done();
};
exports.build = build;
exports.default = series(build);
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);