Age Calculator<\/title>\n\n<style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n }\n\n body {\n background: #f4f7fb;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n\n .age-calculator {\n width: 100%;\n max-width: 500px;\n background: #ffffff;\n padding: 35px;\n border-radius: 20px;\n box-shadow: 0 10px 35px rgba(0,0,0,0.10);\n }\n\n .age-calculator h1 {\n text-align: center;\n margin-bottom: 10px;\n color: #222;\n }\n\n .age-calculator p {\n text-align: center;\n color: #777;\n margin-bottom: 30px;\n }\n\n .input-group {\n margin-bottom: 20px;\n }\n\n .input-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n color: #333;\n }\n\n .input-group input {\n width: 100%;\n padding: 14px;\n border: 1px solid #ddd;\n border-radius: 10px;\n font-size: 16px;\n }\n\n .calculate-btn {\n width: 100%;\n padding: 15px;\n border: none;\n border-radius: 10px;\n background: #2563eb;\n color: white;\n font-size: 17px;\n font-weight: bold;\n cursor: pointer;\n transition: 0.3s;\n }\n\n .calculate-btn:hover {\n background: #1d4ed8;\n }\n\n .result {\n display: none;\n margin-top: 25px;\n text-align: center;\n padding: 20px;\n background: #f1f5ff;\n border-radius: 12px;\n }\n\n .result h2 {\n color: #2563eb;\n margin-bottom: 10px;\n }\n\n .result-box {\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n margin-top: 15px;\n }\n\n .result-item {\n min-width: 90px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n box-shadow: 0 3px 10px rgba(0,0,0,0.08);\n }\n\n .result-item strong {\n display: block;\n font-size: 25px;\n color: #2563eb;\n }\n\n .result-item span {\n color: #777;\n font-size: 14px;\n }\n\n .error {\n color: #dc2626;\n margin-top: 15px;\n text-align: center;\n display: none;\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"age-calculator\">\n\n <h1>Age Calculator<\/h1>\n\n <p>Enter your date of birth to calculate your age.<\/p>\n\n <div class=\"input-group\">\n <label for=\"dob\">Date of Birth<\/label>\n <input type=\"date\" id=\"dob\">\n <\/div>\n\n <button class=\"calculate-btn\" onclick=\"calculateAge()\">\n Calculate Age\n <\/button>\n\n <div class=\"error\" id=\"error\">\n Please enter a valid date of birth.\n <\/div>\n\n <div class=\"result\" id=\"result\">\n\n <h2>Your Age<\/h2>\n\n <div class=\"result-box\">\n\n <div class=\"result-item\">\n <strong id=\"years\">0<\/strong>\n <span>Years<\/span>\n <\/div>\n\n <div class=\"result-item\">\n <strong id=\"months\">0<\/strong>\n <span>Months<\/span>\n <\/div>\n\n <div class=\"result-item\">\n <strong id=\"days\">0<\/strong>\n <span>Days<\/span>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/div>\n\n\n<script>\n\nfunction calculateAge() {\n\n const dobInput = document.getElementById(\"dob\").value;\n\n const error = document.getElementById(\"error\");\n const result = document.getElementById(\"result\");\n\n if (!dobInput) {\n error.style.display = \"block\";\n result.style.display = \"none\";\n return;\n }\n\n const birthDate = new Date(dobInput);\n const today = new Date();\n\n if (birthDate > today) {\n error.innerText = \"Date of birth cannot be in the future.\";\n error.style.display = \"block\";\n result.style.display = \"none\";\n return;\n }\n\n error.style.display = \"none\";\n\n let years = today.getFullYear() - birthDate.getFullYear();\n let months = today.getMonth() - birthDate.getMonth();\n let days = today.getDate() - birthDate.getDate();\n\n if (days < 0) {\n months--;\n\n const previousMonth = new Date(\n today.getFullYear(),\n today.getMonth(),\n 0\n );\n\n days += previousMonth.getDate();\n }\n\n if (months < 0) {\n years--;\n months += 12;\n }\n\n document.getElementById(\"years\").innerText = years;\n document.getElementById(\"months\").innerText = months;\n document.getElementById(\"days\").innerText = days;\n\n result.style.display = \"block\";\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Age Calculator Age Calculator Enter your date of birth to calculate your age. Date of Birth Calculate Age Please enter a valid date of birth. Your Age 0 Years 0…<\/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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":2,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16,"date":"2026-09-03T08:31:38","date_gmt":"2026-09-03T08:31:38","guid":{"rendered":"https:\/\/mrsamarabbas.online\/?page_id=16"},"modified":"2026-09-03T08:32:19","modified_gmt":"2026-09-03T08:32:19","slug":"age-calculator","status":"publish","type":"page","link":"https:\/\/mrsamarabbas.online\/?page_id=16","title":{"rendered":"Age calculator"},"content":{"rendered":"\n\n\n\n\n\n\nAge Calculator<\/title>\n\n<style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n }\n\n body {\n background: #f4f7fb;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n\n .age-calculator {\n width: 100%;\n max-width: 500px;\n background: #ffffff;\n padding: 35px;\n border-radius: 20px;\n box-shadow: 0 10px 35px rgba(0,0,0,0.10);\n }\n\n .age-calculator h1 {\n text-align: center;\n margin-bottom: 10px;\n color: #222;\n }\n\n .age-calculator p {\n text-align: center;\n color: #777;\n margin-bottom: 30px;\n }\n\n .input-group {\n margin-bottom: 20px;\n }\n\n .input-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n color: #333;\n }\n\n .input-group input {\n width: 100%;\n padding: 14px;\n border: 1px solid #ddd;\n border-radius: 10px;\n font-size: 16px;\n }\n\n .calculate-btn {\n width: 100%;\n padding: 15px;\n border: none;\n border-radius: 10px;\n background: #2563eb;\n color: white;\n font-size: 17px;\n font-weight: bold;\n cursor: pointer;\n transition: 0.3s;\n }\n\n .calculate-btn:hover {\n background: #1d4ed8;\n }\n\n .result {\n display: none;\n margin-top: 25px;\n text-align: center;\n padding: 20px;\n background: #f1f5ff;\n border-radius: 12px;\n }\n\n .result h2 {\n color: #2563eb;\n margin-bottom: 10px;\n }\n\n .result-box {\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n margin-top: 15px;\n }\n\n .result-item {\n min-width: 90px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n box-shadow: 0 3px 10px rgba(0,0,0,0.08);\n }\n\n .result-item strong {\n display: block;\n font-size: 25px;\n color: #2563eb;\n }\n\n .result-item span {\n color: #777;\n font-size: 14px;\n }\n\n .error {\n color: #dc2626;\n margin-top: 15px;\n text-align: center;\n display: none;\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"age-calculator\">\n\n <h1>Age Calculator<\/h1>\n\n <p>Enter your date of birth to calculate your age.<\/p>\n\n <div class=\"input-group\">\n <label for=\"dob\">Date of Birth<\/label>\n <input type=\"date\" id=\"dob\">\n <\/div>\n\n <button class=\"calculate-btn\" onclick=\"calculateAge()\">\n Calculate Age\n <\/button>\n\n <div class=\"error\" id=\"error\">\n Please enter a valid date of birth.\n <\/div>\n\n <div class=\"result\" id=\"result\">\n\n <h2>Your Age<\/h2>\n\n <div class=\"result-box\">\n\n <div class=\"result-item\">\n <strong id=\"years\">0<\/strong>\n <span>Years<\/span>\n <\/div>\n\n <div class=\"result-item\">\n <strong id=\"months\">0<\/strong>\n <span>Months<\/span>\n <\/div>\n\n <div class=\"result-item\">\n <strong id=\"days\">0<\/strong>\n <span>Days<\/span>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/div>\n\n\n<script>\n\nfunction calculateAge() {\n\n const dobInput = document.getElementById(\"dob\").value;\n\n const error = document.getElementById(\"error\");\n const result = document.getElementById(\"result\");\n\n if (!dobInput) {\n error.style.display = \"block\";\n result.style.display = \"none\";\n return;\n }\n\n const birthDate = new Date(dobInput);\n const today = new Date();\n\n if (birthDate > today) {\n error.innerText = \"Date of birth cannot be in the future.\";\n error.style.display = \"block\";\n result.style.display = \"none\";\n return;\n }\n\n error.style.display = \"none\";\n\n let years = today.getFullYear() - birthDate.getFullYear();\n let months = today.getMonth() - birthDate.getMonth();\n let days = today.getDate() - birthDate.getDate();\n\n if (days < 0) {\n months--;\n\n const previousMonth = new Date(\n today.getFullYear(),\n today.getMonth(),\n 0\n );\n\n days += previousMonth.getDate();\n }\n\n if (months < 0) {\n years--;\n months += 12;\n }\n\n document.getElementById(\"years\").innerText = years;\n document.getElementById(\"months\").innerText = months;\n document.getElementById(\"days\").innerText = days;\n\n result.style.display = \"block\";\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Age Calculator Age Calculator Enter your date of birth to calculate your age. Date of Birth Calculate Age Please enter a valid date of birth. Your Age 0 Years 0…<\/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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":2,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/mrsamarabbas.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}