const $count = document.querySelector('#count');
const $price = document.querySelector('#price');
const $delivery = document.querySelector('#delivery');
const $total = document.querySelector('#total');
const getCalculateValue = () => $total.innerHTML = (Number($count.value) * Number($price.value)) + Number($delivery.value);
getCalculateValue();
$delivery.addEventListener('change', getCalculateValue);
$count.addEventListener('input', getCalculateValue);function getScrollbarWidth() {
// Creating invisible container
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
document.body.appendChild(outer);
// Creating inner element and placing it in the container
const inner = document.createElement('div');
outer.appendChild(inner);
// Calculating difference between container's full width and the child width
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
return scrollbarWidth;
}.class {
&[data-color="red"] {
// some code...
}
}const elements = document.querySelectorAll('[data-color]');
elements.forEach(el => el.classList.add(el.dataset.color));