{"id":248,"date":"2026-02-20T23:16:07","date_gmt":"2026-02-20T23:16:07","guid":{"rendered":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/?page_id=248"},"modified":"2026-02-25T17:10:35","modified_gmt":"2026-02-25T17:10:35","slug":"mulch","status":"publish","type":"page","link":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/mulch\/","title":{"rendered":"Mulch"},"content":{"rendered":"[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; column_position=&#8221;default&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_column_text css=&#8221;&#8221; text_direction=&#8221;default&#8221;]\n<style>\n.mulch-wrapper{max-width:720px;margin:20px auto;padding:20px;border:1px solid #ddd;border-radius:8px;font-family:Arial, sans-serif;background:#fff;}\n.mulch-wrapper h2{margin-bottom:12px;}\n.mulch-row{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap;}\n.mulch-col{flex:1;min-width:130px;}\n.mulch-wrapper input, .mulch-wrapper select{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;}\n.mulch-btn{background:#f96302;color:#fff;padding:10px 15px;border:none;cursor:pointer;border-radius:4px;font-size:16px;}\n.mulch-btn:hover{background:#d35400;}\n.mulch-area{border:1px solid #eee;padding:15px;margin-bottom:15px;border-radius:6px;}\n.mulch-result{margin-top:20px;padding:15px;background:#f7f7f7;border-radius:5px;}\n.mulch-result .section{margin-bottom:15px;}\n.mulch-icon{width:40px;height:40px;vertical-align:middle;margin-right:10px;}\n.mulch-note{font-size:14px;color:#777;margin-bottom:10px;}\n\t.section img {\n    display: none !important;\n}\n<\/style>\n\n<div class=\"mulch-wrapper\">\n    <h2>Mulch Calculator<\/h2>\n\n    <div class=\"mulch-row\">\n        <div class=\"mulch-col\">\n            <label>Material Type<\/label>\n            <select id=\"materialType\">\n                <option value=\"Wood\">Wood<\/option>\n                <option value=\"Top Soil\">Top Soil<\/option>\n                <option value=\"Rubber\">Rubber<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"mulch-col\">\n            <label>Bag Size<\/label>\n            <select id=\"bagSize\">\n                <option value=\"1.5\">1.5 cu ft<\/option>\n                <option value=\"2\">2 cu ft<\/option>\n                <option value=\"3\">3 cu ft<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"mulch-col\">\n            <label>Calculate By<\/label>\n            <select id=\"calcType\">\n                <option value=\"lwd\">Length \u00d7 Width \u00d7 Depth<\/option>\n                <option value=\"sqft\">Square Footage \u00d7 Depth<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n\n    <div id=\"mulchAreas\"><\/div>\n\n    <button class=\"mulch-btn\" onclick=\"addMulchArea()\">+ Add Area<\/button>\n    <br><br>\n    <button class=\"mulch-btn\" onclick=\"calculateMulch()\">Calculate<\/button>\n\n    <div class=\"mulch-result\" id=\"mulchResult\" style=\"display:none;\"><\/div>\n<\/div>\n\n<script>\nlet mulchAreaCount = 0;\n\nfunction addMulchArea(){\n    mulchAreaCount++;\n    const container = document.getElementById('mulchAreas');\n    const div = document.createElement('div');\n    div.classList.add('mulch-area'); div.id = 'mulchArea'+mulchAreaCount;\n    div.innerHTML = `\n        <h4>Area ${mulchAreaCount}<\/h4>\n\n        <div class=\"mulch-row lwd\">\n            <div class=\"mulch-col\">\n                <label>Length (ft)<\/label>\n                <input type=\"number\" step=\"0.01\" class=\"length\">\n            <\/div>\n            <div class=\"mulch-col\">\n                <label>Width (ft)<\/label>\n                <input type=\"number\" step=\"0.01\" class=\"width\">\n            <\/div>\n        <\/div>\n\n        <div class=\"mulch-row sqft\" style=\"display:none;\">\n            <div class=\"mulch-col\">\n                <label>Square Footage<\/label>\n                <input type=\"number\" step=\"0.01\" class=\"square\">\n            <\/div>\n        <\/div>\n\n        <div class=\"mulch-row\">\n            <div class=\"mulch-col\">\n                <label>Depth (inches)<\/label>\n                <input type=\"number\" step=\"0.01\" value=\"3\" class=\"depth\">\n            <\/div>\n        <\/div>\n    `;\n    container.appendChild(div);\n}\n\ndocument.addEventListener('change', function(e){\n    if(e.target && e.target.id === 'calcType'){\n        const type = e.target.value;\n        document.querySelectorAll('.lwd').forEach(el => el.style.display = type === 'lwd' ? 'flex' : 'none');\n        document.querySelectorAll('.sqft').forEach(el => el.style.display = type === 'sqft' ? 'flex' : 'none');\n    }\n});\n\nfunction calculateMulch(){\n    const materialType = document.getElementById('materialType').value;\n    const bagSize = parseFloat(document.getElementById('bagSize').value);\n    const calcType = document.getElementById('calcType').value;\n    let totalCubicFeet = 0;\n\n    for(let i=1;i<=mulchAreaCount;i++){\n        const area = document.getElementById('mulchArea'+i);\n        if(!area) continue;\n        const depthFeet = (parseFloat(area.querySelector('.depth').value)||0)\/12;\n        let cubicFeet = 0;\n        if(calcType==='lwd'){\n            cubicFeet = (parseFloat(area.querySelector('.length').value)||0) *\n                        (parseFloat(area.querySelector('.width').value)||0) *\n                        depthFeet;\n        } else {\n            cubicFeet = (parseFloat(area.querySelector('.square').value)||0) * depthFeet;\n        }\n        totalCubicFeet += cubicFeet;\n    }\n\n    const bags = Math.ceil(totalCubicFeet \/ bagSize);\n    const bulk = Math.ceil(totalCubicFeet \/ 54); \/\/ bulk is ~54 cu ft\n\n    const result = document.getElementById('mulchResult');\n    result.style.display = 'block';\n    result.innerHTML = `\n        <div class=\"mulch-note\">Please note: calculations are estimates only<\/div>\n\n        <div class=\"section\">\n            <img decoding=\"async\" src=\"BAG_ICON_URL\" class=\"mulch-icon\"> \n            <strong>${bags} bags of ${materialType} mulch<\/strong><br>\n            Min of ${bagSize} cu ft per bag\n        <\/div>\n\n        <div class=\"section\">\n            <img decoding=\"async\" src=\"BULK_ICON_URL\" class=\"mulch-icon\"> \n            <strong>${bulk} bulk ${materialType} mulch<\/strong><br>\n            Min of 54 cu ft per bulk\n        <\/div>\n\n        <div class=\"section\">\n            <strong>Total Volume =<\/strong> ${totalCubicFeet.toFixed(2)} cu ft\n        <\/div>\n    `;\n}\n\naddMulchArea();\n<\/script>\n\n[\/vc_column_text][vc_column_text css=&#8221;&#8221; text_direction=&#8221;default&#8221;]\n<p style=\"text-align: center;\"><span style=\"color: #000000;\"><strong>Use this calculator to figure out how much product you need to complete your project.<\/strong><\/span><\/p>\n[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-248","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/pages\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":11,"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/pages\/248\/revisions"}],"predecessor-version":[{"id":344,"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/pages\/248\/revisions\/344"}],"wp:attachment":[{"href":"https:\/\/devu1a.customdev.solutions\/chrisfagan\/wp-json\/wp\/v2\/media?parent=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}