{"id":2741,"date":"2022-08-19T00:26:06","date_gmt":"2022-08-19T00:26:06","guid":{"rendered":"https:\/\/myswimsplits.com\/yards-goal-time-calculator-copy\/"},"modified":"2022-11-15T06:30:15","modified_gmt":"2022-11-15T06:30:15","slug":"css-pace-calculator","status":"publish","type":"page","link":"https:\/\/app.myswimsplits.com\/app\/index.php\/css-pace-calculator\/","title":{"rendered":"Critical Swim Speed Calculator"},"content":{"rendered":"<div class=\"bg-margin-for-link\"><input type='hidden' bg_collapse_expand='6ab46a0126c709009554363' value='6ab46a0126c709009554363'><input type='hidden' id='bg-show-more-text-6ab46a0126c709009554363' value='More Info'><input type='hidden' id='bg-show-less-text-6ab46a0126c709009554363' value='Show Less'><a id='bg-showmore-action-6ab46a0126c709009554363' class='bg-showmore-plg-link  '  style=\" color:#0000ff;font-weight: 500;\" href='#'>More Info<\/a><div id='bg-showmore-hidden-6ab46a0126c709009554363' ><\/p>\n<p>Critical Swim Speed Calculator is a simple tool that allows the swimmer or coach to calculate the athletes Critical Swim Speed (CSS) or Threshold Pace.<\/p>\n<p>*Note you will need either PB&#8217;s or to Time Trial for both 400 and 200m or yard swims.<\/p>\n<p><\/div><\/div>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.2\/css\/all.min.css\" \/>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.0.12\/dist\/css\/select2.min.css\" rel=\"stylesheet\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n.css__calculator *,\r\n.css__calculator *:after,\r\n.css__calculator *:before {\r\n    box-sizing: border-box;\r\n}\r\n.css__calculator {\r\n    width: 100%;\r\n    max-width: 470px;\r\n    position: relative;\r\n    background: #fff;\r\n    box-shadow: 1px 1px 5px rgb(0 0 0 \/ 20%);\r\n    margin: 0 auto;\r\n    margin-top: 10px;\r\n    margin-bottom: 30px;\r\n    font-family: inherit;\r\n}\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n    \r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n    \r\n}\r\n\r\ninput[type=number] {\r\n    -moz-appearance: textfield;\r\n    \r\n}\r\n.css__calculator label {\r\n    display: inline-block;\r\n    max-width: 100%;\r\n    margin-bottom: 5px;\r\n    font-weight: bold;\r\n    font-family: inherit;\r\n}\r\n#css__race_calculator.css__calculator {\r\n    max-width: 750px;\r\n}\r\n\r\n.css__wrap {\r\n    padding: 25px;\r\n}\r\n\r\n.css__calculator .css__warning.css__name .css__name_text {\r\n    color: red;\r\n}\r\n\r\n.css__outer {\r\n    background: #1976d2;\r\n    box-shadow: 1px 1px 5px rgb(0 0 0 \/ 52%);\r\n    padding: 10px;\r\n    color: #fff;\r\n    font-size: 15px;\r\n    margin-top: 20px;\r\n    display: none;\r\n}\r\n\r\n.css__row {\r\n    display: flex;\r\n}\r\n\r\n#css__race_calculator .css__row {\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -ms-flex-wrap: wrap;\r\n    flex-wrap: wrap;\r\n    margin-right: -15px;\r\n    margin-left: -15px;\r\n}\r\n.css__row {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.css__outer .css__row:nth-last-child(1) {\r\n    border-bottom: 0px solid rgb(255 255 255 \/ 28%);\r\n}\r\n\r\n.css__race_btn {\r\n    display: none;\r\n}\r\n\r\n#css__race_calculator .css__inner {\r\n    display: flex;\r\n}\r\n\r\n#css__race_calculator .css__group {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n}\r\n\r\n#css__race_calculator .css__group:nth-child(1) {\r\n    flex: 0.75;\r\n    margin: 0 5px;\r\n}\r\n\r\n.css__cell {\r\n    flex: 1;\r\n    margin: 5px;\r\n    text-align: center;\r\n    background: white;\r\n    color: #1976d2;\r\n    font-size: 18px;\r\n    padding: 5px 0px;\r\n}\r\n\r\n#css__race_calculator .css__cell {\r\n    position: relative;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n    -ms-flex: 0 0 13.75%;\r\n    flex: 0 0 13.75%;\r\n    max-width: 13.75%;\r\n    display: -ms-flexbox;\r\n    \r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n    \r\n    padding-bottom: .5rem!important;\r\n    padding-top: .5rem!important;\r\n    text-align: center;\r\n    color: #1976d2;\r\n    font-size: 14px;\r\n    text-align: center;\r\n    background: transparent;\r\n}\r\n\r\n.css__outer .css__row:nth-child(1) .css__cell {\r\n    font-weight: bold;\r\n}\r\n@media screen and (max-width:992px) {\r\n.css__outer .css__row:nth-child(1) .css__cell {\r\nfont-size: 14px;\r\n}\r\n}\r\n.css__outer .css__row:nth-last-child(1) .css__cell {\r\n    font-weight: bold;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row:nth-last-child(1) .css__cell {\r\n    font-weight: normal;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell {\r\n    font-weight: bold;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row:nth-child(1) .css__cell {\r\n    color: #fff;\r\n    font-size: 12px;\r\n    font-weight: bold;\r\n}\r\n#css__race_calculator .css__outer .css__row:nth-child(1) {\r\n    border: 0px solid #fff;\r\n    background: #ffffff;\r\n    border-bottom: 1px solid #000;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell.css__lower {\r\n    color: #eca446;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell {\r\n    background: #1976d2;\r\n    font-weight: normal;\r\n    color: #fff;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell:nth-child(1),\r\n#css__race_calculator .css__outer .css__row .css__cell:nth-child(2) {\r\n    background: #ffffff;\r\n    color: #1976d2;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell:nth-child(3) {\r\n    background: #42A5F5;\r\n    color: #000;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row:nth-child(1) .css__cell:nth-child(1),\r\n#css__race_calculator .css__outer .css__row:nth-child(1) .css__cell:nth-child(2) {\r\n    color: #1976d2;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell {\r\n    background: transparent;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(1),\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(2),\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(6) {\r\n    background: #1976d2;\r\n    color: #fff;\r\n    font-size: 17px;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(6),\r\n#css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(5) {\r\n    background: #ccc;\r\n    color: #000;\r\n    font-weight: normal;\r\n    font-size: 17px;\r\n}\r\n#css__race_calculator .css__outer .css__row .css__cell.css__speed_class_green {\r\n    background: green;\r\n    font-weight: bold;\r\n    color: #fff;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell.css__speed_class_yellow {\r\n    background: #FF8F00;\r\n    font-weight: bold;\r\n    color: #fff;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell.css__speed_class_red {\r\n    background: red;\r\n    font-weight: bold;\r\n    color: #fff;\r\n}\r\n\r\n#css__race_calculator .css__outer .css__row .css__cell.css__speed_class_black {\r\n    background: #000;\r\n    font-weight: bold;\r\n    color: #fff;\r\n}\r\n#css__race_calculator .css__outer {\r\n    margin-bottom: 20px;\r\n    padding: 0px;\r\n    background: transparent;\r\n    box-shadow: none;\r\n}\r\n\r\n#css__race_calculator.css__calculator input[type=\"number\"] {\r\n    \r\n    max-height: 30px;\r\n    text-align: left;\r\n    \r\n    max-width: 88px;\r\n    line-height: 1.2;\r\n    border-radius: 0px;\r\n    border-top-right-radius: 0;\r\n    border-bottom-right-radius: 0;\r\n    margin-bottom: 0px;\r\n    background-image: none!important;\r\n    height: auto;\r\n    display: inline-block;\r\n    \r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    \r\n    border: 0px solid #ced4da;\r\n    \r\n    padding-left: 9px;\r\n    border: 1px solid #000000;\r\n}\r\n\r\n#css__race_calculator.css__calculator span.css__addons {\r\n    background: #000;\r\n    color: #fff;\r\n    text-transform: lowercase;\r\n    font-family: initial!important;\r\n    width: auto;\r\n    height: auto;\r\n    display: inline-block;\r\n    border-radius: 0px;\r\n    border-top-left-radius: 0;\r\n    border-bottom-left-radius: 0;\r\n    position: absolute;\r\n    text-align: center;\r\n    line-height: normal;\r\n    font-size: 11px;\r\n    background: rgb(229 229 229 \/ 0%);\r\n    color: #979494;\r\n    position: absolute;\r\n    right: 11px;\r\n    top: 13px;\r\n}\r\n\r\n.css__inputs {\r\n    display: flex;\r\n}\r\n\r\n.css__inputs .css__input {\r\n    flex: 1;\r\n    padding-bottom: 0px;\r\n    margin-bottom: 0px;\r\n    position: relative;\r\n}\r\n\r\n.css__name_num {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 7px;\r\n    background: #FF8F00;\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    width: 30px;\r\n    height: 30px;\r\n    text-align: center;\r\n    font-size: 20px;\r\n    font-weight: 400;\r\n    line-height: 28px;\r\n    display: none;\r\n}\r\n\r\n.css__group {\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.css__header {\r\n    color: #000000;\r\n    color: #FF8F00;\r\n        \r\n    font-family: Oswald!important;\r\n    text-align: center;\r\n    font-size: 19px;\r\n    text-transform: uppercase;\r\n    text-align: left;\r\n    padding-bottom: 13px;\r\n}\r\n\r\n.css__button {\r\n    text-align: center;\r\n}\r\n\r\n.css__button a {\r\n    background: #e91e63;\r\n    color: #ffffff;\r\n    font-family: Oswald!important;\r\n    text-transform: uppercase;\r\n    padding: 5px 20px;\r\n    text-align: center;\r\n    text-decoration: none;\r\n}\r\n\r\n.css__name_text {\r\n    \r\n    color: #000;\r\n    font-weight: 700;\r\n    position: relative;\r\n    display: inline-block;\r\n    letter-spacing: 1px;\r\n    font-family: Oswald!important;\r\n    text-align: center;\r\n    font-size: 25px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.css__calculator .css__title {\r\n    background: #1976D2;\r\n    background: -moz-linear-gradient(270deg, #1976D2 0, #2196F3 50%, #42A5F5 100%);\r\n    background: -webkit-linear-gradient( 270deg, #1976D2 0, #2196F3 50%, #42A5F5 100%);\r\n    background: linear-gradient( 270deg, #1976D2 0, #2196F3 50%, #42A5F5 100%);\r\n    \r\n    padding: 20px;\r\n    align-items: center;\r\n    position: relative;\r\n    clip-path: polygon(0 0, 100% 0, 100% 83%, 0 100%);\r\n    min-height: 102px;\r\n    font-family: Oswald!important;\r\n    text-align: center;\r\n    font-size: 40px;\r\n    text-transform: uppercase;\r\n    color: #000;\r\n    text-align: left;\r\n    line-height: 50px;\r\n    font-weight: 700;\r\n}\r\n\r\n.css__calculator input[type=\"number\"] {\r\n    padding: 8px 0;\r\n    max-height: 40px;\r\n    text-align: center;\r\n    font-weight: 700;\r\n    font-size: 18px;\r\n    border: 2px solid #000;\r\n    border: 2px solid #e5e5e5;\r\n    background-color: #fff;\r\n    color: #000;\r\n    max-width: 135px;\r\n    line-height: 1.2;\r\n    border-radius: 4px;\r\n    border-top-right-radius: 0;\r\n    border-bottom-right-radius: 0;\r\n    margin-bottom: 0px;\r\n    background-image: none!important;\r\n    height: auto;\r\n    display: inline-block;\r\n}\r\n    \r\n\r\n.css__calculator span.css__addons {\r\n    background: #000;\r\n    color: #fff;\r\n    text-transform: uppercase;\r\n    font-family: Oswald!important;\r\n    width: 60px;\r\n    height: 40px;\r\n    display: inline-block;\r\n    border-radius: 4px;\r\n    border-top-left-radius: 0;\r\n    border-bottom-left-radius: 0;\r\n    position: absolute;\r\n    text-align: center;\r\n    line-height: 38px;\r\n    font-size: 15px;\r\n    background: #e5e5e5;\r\n    color: #979494;\r\n}\r\n\r\n.css__calculator .css__name {\r\n    color: #404040;\r\n    text-align: left;\r\n    text-transform: capitalize;\r\n    margin-bottom: 10px;\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    position: relative;\r\n}\r\n\r\n.css__switched {\r\n    display: flex;\r\n    margin-top: 10px;\r\n}\r\n\r\n.css__switched_box {\r\n    flex: 1;\r\n    margin: 0 5px;\r\n}\r\n\r\n.css__button.css__race_btn {\r\n    margin-top: 20px;\r\n}\r\n\r\n.css__calculator .css__switched label {\r\n    width: 100%;\r\n    background: rgb(228 228 228);\r\n    font-size: 14px;\r\n    font-weight: 100;\r\n    text-align: center;\r\n    text-shadow: none;\r\n    padding: 9px 5px;\r\n    border: 0px solid rgb(236, 236, 236, 0.25);\r\n    -webkit-transition: all 0.1s ease-in-out;\r\n    -moz-transition: all 0.1s ease-in-out;\r\n    -ms-transition: all 0.1s ease-in-out;\r\n    -o-transition: all 0.1s ease-in-out;\r\n    transition: all 0.1s ease-in-out;\r\n    cursor: pointer;\r\n    \r\n    color: #000000;\r\n}\r\n\r\n.css__calculator .css__switched input[type=\"radio\"] {\r\n    position: absolute !important;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    width: 1px;\r\n    border: 0;\r\n    overflow: hidden;\r\n}\r\n\r\n.css__calculator .css__switched input:checked+label {\r\n    background: #1976D2;\r\n    color: #fff;\r\n    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.select2-container--default .select2-selection--single {\r\n    background-color: #fff;\r\n    border: 2px solid #000;\r\n    border: 2px solid #e4e4e4;\r\n    border-radius: 4px;\r\n    outline: 0;\r\n}\r\n\r\n.select2-container .select2-selection--single {\r\n    height: 40px;\r\n    padding-top: 2px;\r\n}\r\n\r\n.select2-container--default .select2-selection--single .select2-selection__rendered {\r\n    color: #000;\r\n    text-transform: uppercase;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    padding-top: 2px;\r\n    padding-left: 25px;\r\n    font-family: Oswald!important;\r\n}\r\n\r\n.select2-container--default .select2-selection--single .select2-selection__arrow {\r\n    position: absolute;\r\n    top: 2px;\r\n    right: 1px;\r\n    background: #000;\r\n    \r\n    background-position: calc(100% - 1rem), 100% 0;\r\n    background-size: 1em 1em;\r\n    background-repeat: no-repeat;\r\n    width: 50px;\r\n    height: 36px;\r\n    border-bottom-right-radius: 3px;\r\n    border-top-right-radius: 3px;\r\n    background: #e4e4e4;\r\n}\r\n\r\n.select2-container--default .select2-results__option--highlighted[aria-selected] {\r\n    background-color: #f2f2f2;\r\n    color: #000;\r\n}\r\n\r\n.select2-results__option {\r\n    padding: 6px;\r\n    user-select: none;\r\n    -webkit-user-select: none;\r\n    text-transform: uppercase;\r\n    font-size: 10px;\r\n}\r\n\r\n.select2-results__option[aria-selected] {\r\n    cursor: pointer;\r\n    color: #000;\r\n    font-size: 14px;\r\n    font-family: Oswald!important;\r\n}\r\n@media (max-width: 1210px) {\r\n    #css__race_calculator .css__outer .css__row.css__row_total {\r\n        margin-top: 10px;\r\n        margin-bottom: 10px;\r\n    }\r\n    #css__race_calculator .css__outer .css__row:nth-child(1) .css__cell {\r\n        color: #fff;\r\n        font-size: 10px;\r\n        font-weight: bold;\r\n    }\r\n    #css__race_calculator.css__calculator span.css__addons {\r\n        display: none;\r\n    }\r\n    #css__race_calculator.css__calculator span.css__addons {\r\n        right: auto;\r\n        left: 20%;\r\n    }\r\n    #css__race_calculator.css__calculator input[type=\"number\"] {\r\n        max-width: 100%;\r\n    }\r\n    #css__race_calculator .css__outer .css__row .css__cell:nth-child(1) {\r\n        text-align: center;\r\n    }\r\n    #css__race_calculator .css__outer .css__row:nth-child(1) .css__cell {\r\n        font-size: 9px;\r\n        line-height: 10px;\r\n    }\r\n    #css__race_calculator .css__row:nth-child(1)>div.css__cell {\r\n        min-height: 50px;\r\n        font-size: 11px;\r\n        line-height: 35px;\r\n        margin-bottom: 10px;\r\n    }\r\n    #css__race_calculator .css__row>div.css__cell {\r\n        min-height: 45px;\r\n        font-size: 10px;\r\n        line-height: 35px;\r\n        margin-bottom: 10px;\r\n    }\r\n    #css__race_calculator .css__outer .css__row .css__cell.css__cell_speed {\r\n        font-size: 10px;\r\n        line-height: 17px;\r\n    }\r\n    #css__race_calculator.css__calculator input[type=\"number\"] {\r\n        max-width: 100%;\r\n        padding-left: 2px;\r\n        font-size: 11px;\r\n    }\r\n    span#swim_race_total_score {}\r\n    #css__race_calculator .css__outer .css__row.css__row_total>div.css__cell,\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(1),\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(2) {\r\n        font-size: 11px;\r\n    }\r\n    #css__race_calculator .css__outer .css__row.css__row_total>div.css__cell {\r\n        -ms-flex: 0 0 8.9%;\r\n        flex: 0 0 8.9%;\r\n        max-width: 8.9%;\r\n    }\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(6) {\r\n        -ms-flex: 0 0 16%;\r\n        flex: 0 0 16%;\r\n        max-width: 16%;\r\n        font-size: 10px;\r\n        min-height: 47px;\r\n    }\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(5) {\r\n        -ms-flex: 0 0 20%;\r\n        flex: 0 0 20%;\r\n        max-width: 20%;\r\n    }\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(2) {\r\n        -ms-flex: 0 0 16%;\r\n        flex: 0 0 16%;\r\n        max-width: 16%;\r\n    }\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(5) {\r\n        font-size: 10px;\r\n        min-height: 47px;\r\n    }\r\n    #css__race_calculator .css__outer .css__row.css__row_total .css__cell:nth-child(1) {\r\n        -ms-flex: 0 0 13%;\r\n        flex: 0 0 13%;\r\n        max-width: 13%;\r\n    }\r\n}\r\n\r\n@media all and (max-width:1000px) {\r\n    #css__race_calculator.css__calculator span.css__addons {\r\n        left: 20%;\r\n    }\r\n}\r\n\r\n@media all and (max-width:780px) {\r\n    .css__calculator span.inputs_addon {\r\n        font-size: 10px;\r\n        top: 5px;\r\n        right: 10px;\r\n    }\r\n    #css__race_calculator .css__inner {\r\n        display: block;\r\n    }\r\n    #css__race_calculator.css__calculator span.css__addons {\r\n        right: auto;\r\n        left: 21%;\r\n    }\r\n}\r\n\r\n@media all and (max-width:550px) {\r\n    #css__race_calculator .css__outer .css__row .css__cell.css__cell_speed {\r\n    \r\n    }\r\n    #css__race_calculator .css__outer .css__row:nth-child(1) .css__cell {\r\n        font-size: 11px;\r\n        line-height: 20px;\r\n    }\r\n    #css__race_calculator .css__row>div.css__cell {}\r\n}\r\n\r\n@media all and (max-width:500px) {\r\n    .css__calculator input[type=\"number\"] {\r\n        max-width: 100px;\r\n    }\r\n    \r\n    #css__race_calculator .css__outer .css__row .css__cell.css__cell_speed {\r\n        font-size: 10px;\r\n    }\r\n\t.css__calculator span.css__addons {\r\n\t\tfont-size: 12px;\r\n\t}\r\n\t.css__name_text {\r\n\t\tfont-size: 20px;\t\r\n\t}\r\n}\r\n\t\r\n@media all and (max-width:500px) {\r\n    .css__calculator input[type=\"number\"] {\r\n        max-width: 100px;\r\n    }\r\n    \r\n    #css__race_calculator .css__outer .css__row .css__cell.css__cell_speed {\r\n        font-size: 10px;\r\n    }\r\n}\r\n\t\r\n@media all and (max-width:393px) {\r\n    .css__calculator input[type=\"number\"] {\r\n        max-width: 90px;\r\n    }\r\n}\r\n\t\r\n@media all and (max-width:375px) {\r\n    .css__calculator input[type=\"number\"] {\r\n        max-width: 85px;\r\n    }\r\n}\r\n\t\r\n@media all and (max-width:360px) {\r\n    .css__calculator input[type=\"number\"] {\r\n        max-width: 75px;\r\n    }\r\n}\r\n<\/style>\r\n<div class=\"css__calculator\" id=\"css__goal_calculator\">\r\n    <div class=\"css__title\"><i class=\"fas fa-bullseye\"><\/i> CSS Pace Calculator<\/div>\r\n    <div class=\"css__wrap\">\r\n        <div class=\"css__group\">\r\n            <div class=\"css__name\"><span class=\"css__name_num\">3<\/span>\r\n                <div class=\"css__name_text\">Unit<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"css__switched\" id=\"swim_boxes\">\r\n                <div class=\"css__switched_box\">\r\n                    <input type=\"radio\" checked id=\"unit1\" class=\"unit1\" name=\"unit\" value=\"m\">\r\n                    <label for=\"unit1\">                      \r\n                        <span>Meters<\/span>\r\n                    <\/label>\r\n                <\/div>\r\n            \r\n                <div class=\"css__switched_box\">\r\n                    <input type=\"radio\" id=\"unit2\" class=\"unit2\" name=\"unit\" value=\"yrd\">\r\n                    <label for=\"unit2\">                      \r\n                        <span>Yards<\/span>\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n        <div class=\"css__header\">Enter your time:<\/div>\r\n        <div class=\"css__inner\">\r\n\r\n            <div class=\"css__group\">\r\n                <div class=\"css__name\" id=\"css__time_check\"><span class=\"css__name_num\">1<\/span>\r\n                    <div class=\"css__name_text\">Time for 400<span style=\"text-transform:lowercase\" class=\"show_unit\">m<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"css__inputs\">\r\n                    <div class=\"css__input\"><input type=\"number\" inputmode=\"decimal\" pattern=\"\\d*\" class=\"css__minutes\" id=\"400time_min\" placeholder=\"0\" value=\"\"><span class=\"css__addons\">minutes<\/span><\/div>\r\n                    <div class=\"css__input\"><input type=\"number\" inputmode=\"decimal\" pattern=\"\\d*\" class=\"css__seconds\" id=\"400time_sec\" placeholder=\"0.00\" value=\"\"><span class=\"css__addons\">seconds<\/span><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"css__group\">\r\n                <br>\r\n                <div class=\"css__name\" id=\"css__time_check\"><span class=\"css__name_num\">1<\/span>\r\n                    <div class=\"css__name_text\">Time for 200<span style=\"text-transform:lowercase\" class=\"show_unit\">m<\/span><\/div>\r\n                <\/div>\r\n                <div class=\"css__inputs\">\r\n                    <div class=\"css__input\"><input type=\"number\" inputmode=\"decimal\" pattern=\"\\d*\" class=\"css__minutes\" id=\"200time_min\" placeholder=\"0\" value=\"\"><span class=\"css__addons\">minutes<\/span><\/div>\r\n                    <div class=\"css__input\"><input type=\"number\" inputmode=\"decimal\" pattern=\"\\d*\" class=\"css__seconds\" id=\"200time_sec\" placeholder=\"0.00\" value=\"\"><span class=\"css__addons\">seconds<\/span><\/div>\r\n                <\/div>\r\n                <br>\r\n            <\/div>\r\n            <div class=\"css__button\">\r\n                <a href=\"#\" id=\"calcBtn\">calculate<\/a>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"css__outer\">\r\n            <div id=\"swim_goal_results\">\r\n                <div class=\"css__row\">\r\n                    <div class=\"css__cell\">CSS Pace:<\/div>\r\n                    <div class=\"css__cell\" id=\"css_pace\">-<\/div>\r\n                <\/div>\r\n                <div class=\"css__row\">\r\n                    <div class=\"css__cell\">Actual speed:<\/div>\r\n                    <div class=\"css__cell\" id=\"actual_speed\">-<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.0.12\/dist\/js\/select2.min.js\"><\/script>\r\n<script>\r\njQuery(function ($) {\r\n    let unit = \"m\";\r\n    $(document).on('change', 'input[name=\"unit\"]', function(){\r\n        unit = $(this).val();\r\n        $('.show_unit').text(unit);\r\n        $('.css__outer').slideUp();\r\n    });\r\n\r\n    $('#calcBtn').on('click', function(e){\r\n        e.preventDefault();\r\n        if(calcPace() == false) {\r\n            $('.css__outer').slideUp();\r\n        } else {\r\n            $('.css__outer').slideDown();\r\n        }\r\n    })\r\n\r\n    function calcPace(){\r\n        var time400 = getSeconds(document.getElementById(\"400time_min\").value+\":\"+document.getElementById(\"400time_sec\").value);\r\n        var time200 = getSeconds(document.getElementById(\"200time_min\").value+\":\"+document.getElementById(\"200time_sec\").value);\r\n\r\n        if(time400 === false || time200 === false){\r\n            alert('Please make sure you\\'ve entered a valid time format 00:00')\r\n            return false;\r\n        }else if(time400 < time200 ){\r\n            alert('Please make sure your 400m time is greater than your 200m time')\r\n            return false;\r\n        }\r\n\r\n        var pace = (time400-time200)\/2\r\n        $('#css_pace').text(getTime(pace)+\"\/100\"+unit);\r\n        $('#actual_speed').text((100\/pace).toFixed(4)+\" \"+unit+\"\/s\");\r\n    }\r\n\r\n    function getSeconds(time){\r\n        if(time.match(\/^[0-9]{0,2}:[0-9]{1,2}\/)){\r\n            \/\/console.log(time)\r\n        }else{\r\n            return false\r\n        }\r\n\r\n        var a = time.split(':');\r\n        var seconds = (a[0]) * 60  + (+a[1]);\r\n        return seconds\r\n    }\r\n\r\n    function getTime(time){\r\n        var minutes = Math.floor(time \/ 60);\r\n        var seconds = time - minutes * 60;\r\n        return minutes+':'+seconds.toFixed(0).padStart(2,'0');\r\n    }\r\n});    \r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":426,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2741","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/pages\/2741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/comments?post=2741"}],"version-history":[{"count":4,"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/pages\/2741\/revisions"}],"predecessor-version":[{"id":3158,"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/pages\/2741\/revisions\/3158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/media\/426"}],"wp:attachment":[{"href":"https:\/\/app.myswimsplits.com\/app\/index.php\/wp-json\/wp\/v2\/media?parent=2741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}