{"id":2929,"date":"2026-04-10T19:31:22","date_gmt":"2026-04-10T17:31:22","guid":{"rendered":"https:\/\/bio-me.bio\/?page_id=2929"},"modified":"2026-04-10T19:32:20","modified_gmt":"2026-04-10T17:32:20","slug":"sunscreen-usage-calculator","status":"publish","type":"page","link":"https:\/\/bio-me.bio\/?page_id=2929","title":{"rendered":"Sunscreen Usage Calculator"},"content":{"rendered":"\n<div class=\"eco-tool wp-block-group\" id=\"eco-tool-sunscreen-p55t8\">\n  <div class=\"eco-tool__header\">\n    <h2 class=\"eco-tool__title\">Sunscreen Usage Calculator<\/h2>\n    <p class=\"eco-tool__lead\">\n      Estimate how much sunscreen you need and how often to reapply based on exposure time and conditions.\n    <\/p>\n  <\/div>\n\n  <form class=\"eco-tool__form\" id=\"eco-sunscreen-form-p55t8\" novalidate>\n    <div class=\"eco-tool__grid3\">\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"hours-p55t8\">Time in sun (hours)<\/label>\n        <input class=\"eco-tool__input\" id=\"hours-p55t8\" type=\"number\" min=\"0\" step=\"0.5\" value=\"3\" inputmode=\"decimal\" \/>\n        <div class=\"eco-tool__hint\">Total time outdoors.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"spfa-p55t8\">SPF level<\/label>\n        <select class=\"eco-tool__input\" id=\"spfa-p55t8\">\n          <option value=\"15\">SPF 15<\/option>\n          <option value=\"30\" selected>SPF 30<\/option>\n          <option value=\"50\">SPF 50<\/option>\n        <\/select>\n        <div class=\"eco-tool__hint\">Higher SPF offers more protection.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"activity-p55t8\">Activity<\/label>\n        <select class=\"eco-tool__input\" id=\"activity-p55t8\">\n          <option value=\"low\">Low (walking)<\/option>\n          <option value=\"medium\" selected>Moderate<\/option>\n          <option value=\"high\">Swimming \/ sweating<\/option>\n        <\/select>\n        <div class=\"eco-tool__hint\">Higher activity = more reapplication.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"skin-p55t8\">Skin type<\/label>\n        <select class=\"eco-tool__input\" id=\"skin-p55t8\">\n          <option value=\"1\">Very fair<\/option>\n          <option value=\"2\">Fair<\/option>\n          <option value=\"3\" selected>Medium<\/option>\n          <option value=\"4\">Olive<\/option>\n          <option value=\"5\">Brown<\/option>\n        <\/select>\n        <div class=\"eco-tool__hint\">Affects sensitivity to sun.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"area-p55t8\">Body coverage<\/label>\n        <select class=\"eco-tool__input\" id=\"area-p55t8\">\n          <option value=\"face\">Face only<\/option>\n          <option value=\"partial\" selected>Arms &#038; face<\/option>\n          <option value=\"full\">Full body<\/option>\n        <\/select>\n        <div class=\"eco-tool__hint\">More exposed skin = more sunscreen needed.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"uv-p55t8\">UV index<\/label>\n        <input class=\"eco-tool__input\" id=\"uv-p55t8\" type=\"number\" min=\"0\" max=\"15\" step=\"1\" value=\"7\" inputmode=\"numeric\" \/>\n        <div class=\"eco-tool__hint\">Higher UV = more frequent reapplication.<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"eco-tool__actions\">\n      <button type=\"button\" class=\"wp-element-button eco-tool__btn\" id=\"calc-p55t8\">Calculate<\/button>\n      <button type=\"button\" class=\"wp-element-button eco-tool__btn eco-tool__btn--ghost\" id=\"reset-p55t8\">Reset<\/button>\n      <div class=\"eco-tool__error\" id=\"error-p55t8\"><\/div>\n    <\/div>\n  <\/form>\n\n  <div class=\"eco-tool__result\" id=\"result-p55t8\" hidden>\n    <h3 class=\"eco-tool__subtitle\">Result<\/h3>\n\n    <div class=\"eco-tool__cards\">\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Recommended amount<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"amount-p55t8\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\" id=\"uses-p55t8\"><\/div>\n      <\/div>\n\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Reapplication<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"freq-p55t8\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\" id=\"tip-p55t8\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.eco-tool{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:16px;}\n.eco-tool__grid3{display:grid;gap:16px;}\n@media(min-width:860px){.eco-tool__grid3{grid-template-columns:1fr 1fr 1fr;}}\n.eco-tool__field{display:flex;flex-direction:column;gap:6px;}\n.eco-tool__input{height:44px;padding:0 12px;border:1px solid rgba(0,0,0,.2);border-radius:10px;}\n.eco-tool__hint{font-size:.9em;opacity:.7;min-height:38px;}\n.eco-tool__actions{display:flex;gap:10px;margin-top:16px;}\n.eco-tool__btn{padding:10px 22px}\n.eco-tool__btn--ghost{background:transparent!important;border:1px solid rgba(0,0,0,.2)!important}\n.eco-tool__btn--ghost:hover,.eco-tool__btn--ghost:focus{background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.35)!important}\n.eco-tool__cards{display:grid;gap:10px;}\n@media(min-width:860px){.eco-tool__cards{grid-template-columns:1fr 1fr;}}\n.eco-tool__card{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:12px;}\n.eco-tool__metric-value{font-size:1.6em;font-weight:800;}\n<\/style>\n\n<script>\n(function(){\nconst S=\"p55t8\";\nconst el=id=>document.getElementById(id+\"-\"+S);\n\nconst AREA={\n face:5,\n partial:15,\n full:30\n};\n\nfunction calc(){\n let hours=Number(el(\"hours\").value);\n let spf=Number(el(\"spfa\").value);\n let uv=Number(el(\"uv\").value);\n let activity=el(\"activity\").value;\n let area=AREA[el(\"area\").value];\n\n if(hours<=0)return;\n\n let reapply=2;\n\n if(uv>7) reapply=1.5;\n if(activity===\"high\") reapply=1;\n\n let uses=Math.ceil(hours\/reapply);\n\n let total=area*uses;\n\n el(\"amount\").textContent=total+\" ml total\";\n el(\"uses\").textContent=uses+\" applications\";\n\n el(\"freq\").textContent=\"Every \"+reapply+\" hours\";\n\n el(\"tip\").textContent=\n activity===\"high\"?\"Reapply more often due to sweat\/water\":\n uv>7?\"High UV increases need for protection\":\n \"Standard reapplication schedule\";\n\n el(\"result\").hidden=false;\n}\n\nfunction reset(){\n el(\"result\").hidden=true;\n}\n\nel(\"calc\").onclick=calc;\nel(\"reset\").onclick=reset;\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Sunscreen Usage Calculator Estimate how much sunscreen you need and how often to reapply based on exposure time and conditions. Time in sun (hours) Total time outdoors. SPF level SPF&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":2666,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/pages\/2929"}],"collection":[{"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bio-me.bio\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2929"}],"version-history":[{"count":2,"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/pages\/2929\/revisions"}],"predecessor-version":[{"id":2931,"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/pages\/2929\/revisions\/2931"}],"up":[{"embeddable":true,"href":"https:\/\/bio-me.bio\/index.php?rest_route=\/wp\/v2\/pages\/2666"}],"wp:attachment":[{"href":"https:\/\/bio-me.bio\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}