{"id":3775,"date":"2022-11-10T10:14:17","date_gmt":"2022-11-10T10:14:17","guid":{"rendered":"https:\/\/marblex.peacefulqode.com\/?page_id=3775"},"modified":"2026-01-19T06:21:30","modified_gmt":"2026-01-19T06:21:30","slug":"marble-flooring","status":"publish","type":"page","link":"https:\/\/anoraceramic.com\/index.php\/marble-flooring\/","title":{"rendered":"Tiles Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3775\" class=\"elementor elementor-3775\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb482e7 e-flex e-con-boxed e-con e-parent\" data-id=\"fb482e7\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-251c466 elementor-widget elementor-widget-shortcode\" data-id=\"251c466\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n    .tiles-wrapper{\n        max-width:1200px;\n        margin:40px auto;\n        font-family:Arial, sans-serif;\n    }\n    .tiles-top{\n        display:grid;\n        grid-template-columns:1fr 1fr;\n        gap:40px;\n        margin-bottom:40px;\n    }\n    .tiles-box{\n        background:#f5f5f5;\n        padding:30px;\n        border-radius:14px;\n    }\n    .tiles-box h3{\n        margin-bottom:20px;\n    }\n    .tiles-grid{\n        display:grid;\n        grid-template-columns:1fr 1fr;\n        gap:20px;\n        margin-bottom:20px;\n    }\n\n    \/* INPUT FIX *\/\n    .tiles-box input{\n        width:100%;\n        height:52px;\n        padding:0 14px;\n        border:1px solid #ddd;\n        border-radius:8px;\n        background:#fff;\n        font-size:14px;\n    }\n\n    \/* \u2705 SELECT FIX (IMPORTANT) *\/\n    .tiles-box select{\n        width:100%;\n        height:52px;\n        padding:0 40px 0 14px;\n        border:1px solid #ddd;\n        border-radius:8px;\n        background:#fff;\n        font-size:14px;\n        line-height:52px;\n        appearance:none;\n        -webkit-appearance:none;\n        -moz-appearance:none;\n        background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='10'><polygon points='0,0 14,0 7,10' fill='%23999'\/><\/svg>\");\n        background-repeat:no-repeat;\n        background-position:right 14px center;\n        background-size:12px;\n        margin-bottom:20px;\n    }\n\n    .calc-btn{\n        width:100%;\n        padding:15px;\n        background:#0a63a5;\n        color:#fff;\n        border:none;\n        border-radius:8px;\n        font-size:16px;\n        cursor:pointer;\n    }\n    .calc-btn:hover{\n        background:#084f84;\n    }\n    .tiles-image{\n        background:#fff;\n        padding:20px;\n        border-radius:14px;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n    }\n    .tiles-image img{\n        max-width:100%;\n    }\n    .result-box{\n        background:#f5f5f5;\n        padding:30px;\n        border-radius:14px;\n    }\n    .result-grid{\n        display:grid;\n        grid-template-columns:1fr 1fr;\n        gap:20px;\n        margin-top:20px;\n    }\n    .result{\n        background:#fff;\n        padding:15px;\n        border-radius:8px;\n        font-weight:600;\n    }\n\n    @media(max-width:900px){\n        .tiles-top{grid-template-columns:1fr;}\n        .result-grid{grid-template-columns:1fr;}\n    }\n<\/style>\n\n\n    <div class=\"tiles-wrapper\">\n\n        <!-- TOP SECTION -->\n        <div class=\"tiles-top\">\n\n            <!-- LEFT -->\n            <div class=\"tiles-box\">\n                <h3>Box Calculation<\/h3>\n\n                <div class=\"tiles-grid\">\n                    <input type=\"number\" id=\"len\" placeholder=\"Enter Length (Feet)\">\n                    <input type=\"number\" id=\"wid\" placeholder=\"Enter Width (Feet)\">\n                <\/div>\n\n                <select id=\"tile\">\n                    <option value=\"0.3x0.45\">300 X 450 MM [ Digital Wall Tiles ]<\/option>\n                    <option value=\"0.4x0.4\">400 X 400 MM [ Digital Parking Tiles ]<\/option>\n                    <option value=\"0.6x1.2\">600 X 1200 MM [ Glazed Vitrified Tiles ]<\/option>\n                    <option value=\"0.6x0.6\">600 X 600 MM [ Porcelain Floor Tiles ]<\/option>\n                <\/select>\n\n                <button class=\"calc-btn\" onclick=\"tilesCalc()\">Calculate \u2192<\/button>\n            <\/div>\n\n            <!-- RIGHT IMAGE -->\n            <div class=\"tiles-image\">\n                <img decoding=\"async\" src=\"https:\/\/anoraceramic.com\/wp-content\/uploads\/2026\/01\/images.png\" alt=\"Tiles Diagram\">\n            <\/div>\n\n        <\/div>\n\n        <!-- RESULT SECTION -->\n        <div class=\"result-box\">\n            <h3>Calculations (Total Area Covered)<\/h3>\n\n            <div class=\"result-grid\">\n                <div class=\"result\" id=\"sqm\">Total Square Meter: -<\/div>\n                <div class=\"result\" id=\"sqft\">Total Square Feet: -<\/div>\n                <div class=\"result\" id=\"tiles\">Total Required Tiles: -<\/div>\n                <div class=\"result\" id=\"boxes\">Total Required Box: -<\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script>\n        function tilesCalc(){\n            let l = parseFloat(document.getElementById(\"len\").value);\n            let w = parseFloat(document.getElementById(\"wid\").value);\n            let tile = document.getElementById(\"tile\").value.split(\"x\");\n\n            if(isNaN(l) || isNaN(w)){\n                alert(\"Enter length & width\");\n                return;\n            }\n\n            let sqft = l * w;\n            let sqm = sqft * 0.092903;\n\n            let tileArea = parseFloat(tile[0]) * parseFloat(tile[1]);\n            let totalTiles = Math.ceil(sqm \/ tileArea);\n\n            let tilesPerBox = 6;\n            let boxes = Math.ceil(totalTiles \/ tilesPerBox);\n\n            document.getElementById(\"sqft\").innerHTML = \"Total Square Feet: \" + sqft.toFixed(2);\n            document.getElementById(\"sqm\").innerHTML  = \"Total Square Meter: \" + sqm.toFixed(2);\n            document.getElementById(\"tiles\").innerHTML = \"Total Required Tiles: \" + totalTiles;\n            document.getElementById(\"boxes\").innerHTML = \"Total Required Box: \" + boxes;\n        }\n    <\/script>\n    <?php\n    return ob_get_clean();\n}\nadd_shortcode('tiles_calculator_full', 'tiles_calculator_full');\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Box Calculation 300 X 450 MM [ Digital Wall Tiles ]400 X 400 MM [ Digital Parking Tiles ]600 X 1200 MM [ Glazed Vitrified Tiles ]600 X 600 MM [ Porcelain Floor Tiles ] Calculate \u2192 Calculations (Total Area Covered) Total Square Meter: &#8211; Total Square Feet: &#8211; Total Required Tiles: &#8211; Total Required [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3775","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/pages\/3775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/comments?post=3775"}],"version-history":[{"count":13,"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/pages\/3775\/revisions"}],"predecessor-version":[{"id":6815,"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/pages\/3775\/revisions\/6815"}],"wp:attachment":[{"href":"https:\/\/anoraceramic.com\/index.php\/wp-json\/wp\/v2\/media?parent=3775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}