Attribute
Description
Material
HDF (High-Density Fiberboard) & Felt
Panel Dimension
110 inches (L) x 23.75 inches (W) x 0.8 inches (D)
Color
As Shown
Packing/Box
4 Panels per Box
Total Area
72 Square Feet per Box
Installation
Screws & Glue
Function
Indoor Decorative Wall Panel, Soundproofing
Pickup Address
5170 Dixie Rd, Mississauga, ON L4W 1E3
.m__calculator *,
.m__calculator ::after,
.m__calculator ::before {
box-sizing: border-box
}
.m__calculator * {
font-family: inherit;
font-family: "Roboto Condensed", sans-serif;
}
[data-tippy-root] *{
font-family: "Roboto Condensed", sans-serif;
font-size: 12px;
}
.m__calculator {
max-width: 290px;
background: #ffffff;
border: 4px solid #691029;
border-radius: 8px;
overflow: hidden;
margin: auto;
}
.m__calculator .m__row {
margin: 25px 15px;
}
.m__calculator .m__row.m__head {
margin: 0;
background: #f5f5f5;
padding: 20px 0;
border-bottom: 1px solid #ececec;
}
.m__group {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.m__title {
font-size: 22px;
font-weight: 700;
color: #691029;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
}
.m__label {
font-size: 16px;
font-family: inherit;
color: #691029;
font-weight: 600;
margin-bottom: 4px;
}
.unit_changer {
background: #691029;
border: 2px solid #691029;
color: white;
height: 40px;
border-radius: 4px;
font-size: 14px;
padding-left: 8px;
max-width: 70px;
width: 100%;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.m__calculator .m__row.m__result {
margin: 0;
padding: 20px;
text-align: center;
background: #691029;
}
.m__calculator .m__row.m__result .m__label {
color: white;
font-size: 16px;
}
.m__calculator .m__row.m__result .m__res {
font-size: 29px;
font-family: inherit;
color: #ffffff;
font-weight: 700;
}
.group_input {
display: flex;
border: 2px solid #C9994C;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-height: 40px;
}
.group_input input {
width: 100%;
border: 0;
outline: none;
font-size: 18px;
font-family: inherit;
text-align: center;
min-height: 36px;
}
.group_input button {
background-color: #ffffff;
color: #535353;
border: none;
cursor: pointer;
font-size: 20px;
width: 40px;
height: auto;
text-align: center;
transition: background-color 0.2s;
position: relative;
}
.group_input button.m_minus:before {
content: " ";
background: #ffe9c8;
width: 1px;
height: 24px;
display: block;
position: absolute;
right: 0;
}
.group_input button.m_plus:before {
content: " ";
background: #ffe9c8;
width: 1px;
height: 24px;
display: block;
position: absolute;
left: 0;
}
.group_input button:hover {
background-color: #ffe9c8;
}
.m__input_number {
width: 40px;
text-align: center;
border: none;
padding: 8px 10px;
font-size: 16px;
outline: none;
}
.tooltip-btn{
cursor: pointer;
}
Panels Calculator
Your Wall Height
− +
Feet
Your Wall Width
− +
Feet
Total Boxes You need
0 Box
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('.input-box'),
resultDisplay = document.querySelector('.m__res');
let currentUnit = 'Feet';
const autoNumericFields = Array.from(inputs).map(input => {
const anField = new AutoNumeric(input, { minimumValue: '0', maximumValue: '1000', decimalPlaces: 1, modifyValueOnWheel: true });
const container = input.closest('.group_input'),
minusBtn = container.querySelector('.m_minus'),
plusBtn = container.querySelector('.m_plus');
const updateButtons = () => {
let value = anField.getNumber();
minusBtn.disabled = value = 1000;
};
minusBtn.addEventListener('click', () => {
anField.set(Math.max(anField.getNumber() - 1, 0).toFixed(1));
updateButtons();
calculateResult();
});
plusBtn.addEventListener('click', () => {
anField.set(Math.min(anField.getNumber() + 1, 1000).toFixed(1));
updateButtons();
calculateResult();
});
input.addEventListener('input', () => {
updateButtons();
calculateResult();
});
return anField;
});
document.querySelectorAll('.unit_changer').forEach(changer => {
changer.addEventListener('click', () => {
currentUnit = currentUnit === 'Feet' ? 'Inch' : 'Feet';
document.querySelectorAll('.unit_changer span').forEach(span => span.textContent = currentUnit);
autoNumericFields.forEach(anField => {
let value = anField.getNumber();
anField.set(currentUnit === 'Inch' ? (value * 12).toFixed(1) : (value / 12).toFixed(1));
});
calculateResult();
});
});
function calculateResult() {
const height = parseFloat(document.getElementById('calc_Height').value) || 0,
width = parseFloat(document.getElementById('calc_Width').value) || 0;
let result = 0;
if (currentUnit === 'Feet') {
result = Math.ceil((height * width) / 72);
} else {
result = Math.ceil((height * width) / 10368);
}
resultDisplay.textContent = `${result} Box`;
}
calculateResult();
tippy('.tooltip-btn');
});
.container {
display: flex;
gap: 20px;
align-items: flex-start;
flex-direction: row; /* Ensures calculator stays on the right side */
}
.table-container {
flex: 1;
}
.m__calculator {
max-width: 290px;
}
@media (max-width: 480px) {
.container {
flex-direction: column; /* Stack elements vertically on mobile */
gap: 20px;
}
}
.pdp-description-table{width:100%;}.pdp-table-tr{display:flex;justify-content:space-between;}.pdp-table-td{padding:12px 16px;text-align:left;border:none;}.pdp-table-td:first-child{font-weight:bold;width:30%;}.pdp-table-td:nth-child(2){width:70%;}
Brand:4 Panels/BoxCategory:Acoustic PanelsSKU:SWAC27LD