{"id":19,"date":"2026-08-13T06:29:26","date_gmt":"2026-08-13T06:29:26","guid":{"rendered":"https:\/\/theprowebdev.online\/?page_id=19"},"modified":"2026-08-13T06:29:26","modified_gmt":"2026-08-13T06:29:26","slug":"age-cal","status":"publish","type":"page","link":"https:\/\/theprowebdev.online\/?page_id=19","title":{"rendered":"Age Cal"},"content":{"rendered":"\n\n\n\n \n \n Age Generator Tool<\/title>\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial, sans-serif;\n }\n\n body {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(135deg, #667eea, #764ba2);\n padding: 20px;\n }\n\n .age-box {\n width: 100%;\n max-width: 520px;\n background: #ffffff;\n padding: 35px;\n border-radius: 20px;\n box-shadow: 0 15px 40px rgba(0,0,0,0.2);\n text-align: center;\n }\n\n .age-box h1 {\n color: #333;\n margin-bottom: 10px;\n font-size: 32px;\n }\n\n .age-box p {\n color: #777;\n margin-bottom: 25px;\n }\n\n .input-group {\n text-align: left;\n margin-bottom: 20px;\n }\n\n .input-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: bold;\n color: #444;\n }\n\n input[type=\"date\"] {\n width: 100%;\n padding: 14px;\n border: 2px solid #ddd;\n border-radius: 10px;\n font-size: 16px;\n outline: none;\n }\n\n input[type=\"date\"]:focus {\n border-color: #667eea;\n }\n\n button {\n width: 100%;\n padding: 15px;\n border: none;\n border-radius: 10px;\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n font-size: 17px;\n font-weight: bold;\n cursor: pointer;\n transition: 0.3s;\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(102,126,234,0.4);\n }\n\n .result {\n display: none;\n margin-top: 25px;\n }\n\n .result h2 {\n color: #333;\n margin-bottom: 15px;\n }\n\n .age-result {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .result-card {\n background: #f5f6ff;\n padding: 18px 10px;\n border-radius: 12px;\n }\n\n .result-card strong {\n display: block;\n font-size: 28px;\n color: #667eea;\n }\n\n .result-card span {\n color: #666;\n font-size: 14px;\n }\n\n .extra-info {\n background: #f8f8f8;\n padding: 15px;\n border-radius: 12px;\n text-align: left;\n }\n\n .extra-info div {\n padding: 8px 0;\n border-bottom: 1px solid #ddd;\n color: #555;\n }\n\n .extra-info div:last-child {\n border-bottom: none;\n }\n\n .error {\n color: #e74c3c;\n margin-top: 15px;\n display: none;\n font-weight: bold;\n }\n\n @media (max-width: 500px) {\n .age-box {\n padding: 25px 20px;\n }\n\n .age-box h1 {\n font-size: 27px;\n }\n\n .age-result {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <div class=\"age-box\">\n\n <h1>Age Generator<\/h1>\n <p>Enter your date of birth to calculate your exact 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 onclick=\"calculateAge()\">Calculate My Age<\/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 Is<\/h2>\n\n <div class=\"age-result\">\n\n <div class=\"result-card\">\n <strong id=\"years\">0<\/strong>\n <span>Years<\/span>\n <\/div>\n\n <div class=\"result-card\">\n <strong id=\"months\">0<\/strong>\n <span>Months<\/span>\n <\/div>\n\n <div class=\"result-card\">\n <strong id=\"days\">0<\/strong>\n <span>Days<\/span>\n <\/div>\n\n <\/div>\n\n <div class=\"extra-info\">\n\n <div>\n \ud83c\udf82 Next Birthday:\n <strong id=\"birthday\"><\/strong>\n <\/div>\n\n <div>\n \ud83d\udcc5 Total Days:\n <strong id=\"totalDays\"><\/strong>\n <\/div>\n\n <div>\n \ud83d\udcc6 Date of Birth:\n <strong id=\"birthDate\"><\/strong>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n <script>\n\n \/\/ Set maximum date to today\n const today = new Date();\n\n document.getElementById(\"dob\").max =\n today.toISOString().split(\"T\")[0];\n\n\n function calculateAge() {\n\n const dobInput = document.getElementById(\"dob\").value;\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 + \"T00:00:00\");\n const currentDate = new Date();\n\n if (birthDate > currentDate) {\n error.style.display = \"block\";\n result.style.display = \"none\";\n return;\n }\n\n error.style.display = \"none\";\n\n let years = currentDate.getFullYear() - birthDate.getFullYear();\n let months = currentDate.getMonth() - birthDate.getMonth();\n let days = currentDate.getDate() - birthDate.getDate();\n\n if (days < 0) {\n\n months--;\n\n const previousMonth =\n new Date(\n currentDate.getFullYear(),\n currentDate.getMonth(),\n 0\n );\n\n days += previousMonth.getDate();\n }\n\n if (months < 0) {\n years--;\n months += 12;\n }\n\n \/\/ Display age\n document.getElementById(\"years\").textContent = years;\n document.getElementById(\"months\").textContent = months;\n document.getElementById(\"days\").textContent = days;\n\n \/\/ Format birth date\n document.getElementById(\"birthDate\").textContent =\n birthDate.toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\"\n });\n\n \/\/ Calculate total days\n const difference =\n currentDate.getTime() - birthDate.getTime();\n\n const totalDays =\n Math.floor(difference \/ (1000 * 60 * 60 * 24));\n\n document.getElementById(\"totalDays\").textContent =\n totalDays.toLocaleString() + \" days\";\n\n\n \/\/ Calculate next birthday\n let nextBirthday = new Date(\n currentDate.getFullYear(),\n birthDate.getMonth(),\n birthDate.getDate()\n );\n\n if (nextBirthday < currentDate) {\n nextBirthday.setFullYear(\n currentDate.getFullYear() + 1\n );\n }\n\n const daysUntilBirthday =\n Math.ceil(\n (nextBirthday - currentDate) \/\n (1000 * 60 * 60 * 24)\n );\n\n if (daysUntilBirthday === 0) {\n\n document.getElementById(\"birthday\").textContent =\n \"Today! \ud83c\udf89\";\n\n } else {\n\n document.getElementById(\"birthday\").textContent =\n daysUntilBirthday + \" days remaining\";\n }\n\n result.style.display = \"block\";\n }\n\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Age Generator Tool Age Generator Enter your date of birth to calculate your exact age. Date of Birth Calculate My Age Please enter a valid date of birth. Your Age Is 0 Years 0 Months 0 Days \ud83c\udf82 Next Birthday: \ud83d\udcc5 Total Days: \ud83d\udcc6 Date of Birth:<\/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-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/theprowebdev.online\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theprowebdev.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theprowebdev.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theprowebdev.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theprowebdev.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":1,"href":"https:\/\/theprowebdev.online\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/theprowebdev.online\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/theprowebdev.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}