Custom Components

Countdown

{"@webstudio/instance/v0.1":{"instanceSelector":["zWkQRRWsfO4XLxk_vy4cb","6gjbqHvtQQwGzIB7pnNlb","53uK9G5T74yqlyLeoSWpH","akPbRFdP4BzHUjTk-sI4I"],"children":[{"type":"id","value":"zWkQRRWsfO4XLxk_vy4cb"}],"instances":[{"type":"instance","id":"zWkQRRWsfO4XLxk_vy4cb","component":"Box","label":"Countdown Component","children":[{"type":"id","value":"7IioXxJxPMYjQ_Sl2dNyf"},{"type":"id","value":"HEGDg5W_tjzKuIFgsKWSA"}]},{"type":"instance","id":"7IioXxJxPMYjQ_Sl2dNyf","component":"Box","label":"Countdown","children":[{"type":"id","value":"N9QZKJCAnm_Fh1TK8dmZE"},{"type":"id","value":"2Cj9EgZajumrF2XJLXNIM"}]},{"type":"instance","id":"N9QZKJCAnm_Fh1TK8dmZE","component":"Box","label":"Countdown Display","children":[{"type":"id","value":"klBRjpvLySRB0eQQea6l0"},{"type":"id","value":"qJOFcwDgI0MS92cnVXtMh"},{"type":"id","value":"goEGQ8qjQH_8O-KILscwa"},{"type":"id","value":"nVVncFFxi7ixPiGi3_KuX"},{"type":"id","value":"mykDb019ySl8BWQ4spVHf"},{"type":"id","value":"_cVh9WVQiSbZpUm_RopSb"}]},{"type":"instance","id":"klBRjpvLySRB0eQQea6l0","component":"Box","label":"Countdown Unit Wrapper","children":[{"type":"id","value":"T2HwASa04uXiWx2NerbtO"},{"type":"id","value":"Ph0t5NACtcWkqKuh2tlly"}]},{"type":"instance","id":"T2HwASa04uXiWx2NerbtO","component":"Box","label":"Years","children":[]},{"type":"instance","id":"Ph0t5NACtcWkqKuh2tlly","component":"Text","children":[{"type":"text","value":"years"}]},{"type":"instance","id":"qJOFcwDgI0MS92cnVXtMh","component":"Box","label":"Countdown Unit Wrapper","children":[{"type":"id","value":"VwZE8-eUHsoI5VndQ_o77"},{"type":"id","value":"2mnsV1uAQ2B40QfXCrLj0"}]},{"type":"instance","id":"VwZE8-eUHsoI5VndQ_o77","component":"Box","label":"Months","children":[]},{"type":"instance","id":"2mnsV1uAQ2B40QfXCrLj0","component":"Text","children":[{"type":"text","value":"months"}]},{"type":"instance","id":"goEGQ8qjQH_8O-KILscwa","component":"Box","label":"Countdown Unit Wrapper","children":[{"type":"id","value":"rIPHyjIiycobsB1BLdCNo"},{"type":"id","value":"ba1CXU3D_y4RPPDHVDeQv"}]},{"type":"instance","id":"rIPHyjIiycobsB1BLdCNo","component":"Box","label":"Days","children":[]},{"type":"instance","id":"ba1CXU3D_y4RPPDHVDeQv","component":"Text","children":[{"type":"text","value":"days"}]},{"type":"instance","id":"nVVncFFxi7ixPiGi3_KuX","component":"Box","label":"Countdown Unit Wrapper","children":[{"type":"id","value":"oYtmIco3_Ow6o5Hs8YYWD"},{"type":"id","value":"VIltdvB6IP4g2J4_MdNhD"}]},{"type":"instance","id":"oYtmIco3_Ow6o5Hs8YYWD","component":"Box","label":"Hours","children":[]},{"type":"instance","id":"VIltdvB6IP4g2J4_MdNhD","component":"Text","children":[{"type":"text","value":"hours"}]},{"type":"instance","id":"mykDb019ySl8BWQ4spVHf","component":"Box","label":"Countdown Unit Wrapper","children":[{"type":"id","value":"u6Wxu1xWIcLiSnT_vl9Zc"},{"type":"id","value":"kirpd1E791ZSK-_iiAgvT"}]},{"type":"instance","id":"u6Wxu1xWIcLiSnT_vl9Zc","component":"Box","label":"Minutes","children":[]},{"type":"instance","id":"kirpd1E791ZSK-_iiAgvT","component":"Text","children":[{"type":"text","value":"minutes"}]},{"type":"instance","id":"_cVh9WVQiSbZpUm_RopSb","component":"Box","label":"Countdown Unit Wrapper","children":[{"type":"id","value":"BQOMNQoQrRkitKJ0b9nRi"},{"type":"id","value":"C6-Vp_hCz_cUO1Q5kGg8R"}]},{"type":"instance","id":"BQOMNQoQrRkitKJ0b9nRi","component":"Box","label":"Seconds","children":[]},{"type":"instance","id":"C6-Vp_hCz_cUO1Q5kGg8R","component":"Text","children":[{"type":"text","value":"seconds"}]},{"type":"instance","id":"2Cj9EgZajumrF2XJLXNIM","component":"Box","label":"Countdown Complete","children":[{"type":"id","value":"OAHZVgN-oBHvyC6FfZOH9"}]},{"type":"instance","id":"OAHZVgN-oBHvyC6FfZOH9","component":"Paragraph","children":[{"type":"text","value":"Time's up!"}]},{"type":"instance","id":"HEGDg5W_tjzKuIFgsKWSA","component":"HtmlEmbed","label":"JS","children":[]}],"styleSourceSelections":[{"instanceId":"zWkQRRWsfO4XLxk_vy4cb","values":["0EqrQfnJsvej72ntrb92S"]},{"instanceId":"7IioXxJxPMYjQ_Sl2dNyf","values":["sScPv7QDnafycTUQd6xH3"]},{"instanceId":"N9QZKJCAnm_Fh1TK8dmZE","values":["gUJ_fghFWpsSiwjzIudW_"]},{"instanceId":"klBRjpvLySRB0eQQea6l0","values":["66lFLIkwCT4TmoLo3Sq7m"]},{"instanceId":"Ph0t5NACtcWkqKuh2tlly","values":["IZrf9K6IfzyzW0WcP916A"]},{"instanceId":"qJOFcwDgI0MS92cnVXtMh","values":["66lFLIkwCT4TmoLo3Sq7m"]},{"instanceId":"2mnsV1uAQ2B40QfXCrLj0","values":["GwHM_s5L6DcWUxAe9PJMH"]},{"instanceId":"goEGQ8qjQH_8O-KILscwa","values":["66lFLIkwCT4TmoLo3Sq7m"]},{"instanceId":"ba1CXU3D_y4RPPDHVDeQv","values":["5ZxSYOgiboD5yX2Z7uoyP"]},{"instanceId":"nVVncFFxi7ixPiGi3_KuX","values":["66lFLIkwCT4TmoLo3Sq7m"]},{"instanceId":"VIltdvB6IP4g2J4_MdNhD","values":["7pESsGWlytQnj28Ykm2HT"]},{"instanceId":"mykDb019ySl8BWQ4spVHf","values":["66lFLIkwCT4TmoLo3Sq7m"]},{"instanceId":"kirpd1E791ZSK-_iiAgvT","values":["tTJLOuNZPpbYUVxa-Zstv"]},{"instanceId":"_cVh9WVQiSbZpUm_RopSb","values":["66lFLIkwCT4TmoLo3Sq7m"]},{"instanceId":"C6-Vp_hCz_cUO1Q5kGg8R","values":["RI9VwGAOQPCMeOLmXESCf"]},{"instanceId":"2Cj9EgZajumrF2XJLXNIM","values":["UUeuT8Owt573IbHv6qrhf"]}],"styleSources":[{"type":"local","id":"0EqrQfnJsvej72ntrb92S"},{"type":"token","id":"sScPv7QDnafycTUQd6xH3","name":"dv_countdown"},{"type":"token","id":"gUJ_fghFWpsSiwjzIudW_","name":"dv_countdown-display"},{"type":"token","id":"66lFLIkwCT4TmoLo3Sq7m","name":"dv_countdown-unit-wrapper"},{"type":"local","id":"IZrf9K6IfzyzW0WcP916A"},{"type":"local","id":"GwHM_s5L6DcWUxAe9PJMH"},{"type":"local","id":"5ZxSYOgiboD5yX2Z7uoyP"},{"type":"local","id":"7pESsGWlytQnj28Ykm2HT"},{"type":"local","id":"tTJLOuNZPpbYUVxa-Zstv"},{"type":"local","id":"RI9VwGAOQPCMeOLmXESCf"},{"type":"token","id":"UUeuT8Owt573IbHv6qrhf","name":"dv_countdown-complete"}],"breakpoints":[{"id":"2AQJrSP7PN3cvLY9d2vK-","label":"Base"},{"id":"UXQtH0v48lAbrKmOit3SL","label":"Tablet","maxWidth":991}],"styles":[{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"justifyContent","value":{"type":"keyword","value":"start"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"columnGap","value":{"type":"var","value":"gap-m"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"rowGap","value":{"type":"var","value":"gap-m"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UUeuT8Owt573IbHv6qrhf","property":"display","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UUeuT8Owt573IbHv6qrhf","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UUeuT8Owt573IbHv6qrhf","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"66lFLIkwCT4TmoLo3Sq7m","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"66lFLIkwCT4TmoLo3Sq7m","property":"columnGap","value":{"type":"var","value":"gap-xs"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"66lFLIkwCT4TmoLo3Sq7m","property":"rowGap","value":{"type":"var","value":"gap-xs"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"sScPv7QDnafycTUQd6xH3","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"UXQtH0v48lAbrKmOit3SL","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"flexDirection","value":{"type":"keyword","value":"column"}},{"breakpointId":"UXQtH0v48lAbrKmOit3SL","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"columnGap","value":{"type":"var","value":"gap-s"}},{"breakpointId":"UXQtH0v48lAbrKmOit3SL","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"rowGap","value":{"type":"var","value":"gap-s"}},{"breakpointId":"UXQtH0v48lAbrKmOit3SL","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"alignItems","value":{"type":"keyword","value":"start"}},{"breakpointId":"UXQtH0v48lAbrKmOit3SL","styleSourceId":"gUJ_fghFWpsSiwjzIudW_","property":"justifyContent","value":{"type":"keyword","value":"start"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0EqrQfnJsvej72ntrb92S","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0EqrQfnJsvej72ntrb92S","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0EqrQfnJsvej72ntrb92S","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"IZrf9K6IfzyzW0WcP916A","property":"color","value":{"type":"var","value":"foreground-muted"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"GwHM_s5L6DcWUxAe9PJMH","property":"color","value":{"type":"var","value":"foreground-muted"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"5ZxSYOgiboD5yX2Z7uoyP","property":"color","value":{"type":"var","value":"foreground-muted"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"7pESsGWlytQnj28Ykm2HT","property":"color","value":{"type":"var","value":"foreground-muted"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"tTJLOuNZPpbYUVxa-Zstv","property":"color","value":{"type":"var","value":"foreground-muted"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"RI9VwGAOQPCMeOLmXESCf","property":"color","value":{"type":"var","value":"foreground-muted"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"66lFLIkwCT4TmoLo3Sq7m","property":"fontSize","value":{"type":"var","value":"font-size-4"}}],"dataSources":[],"resources":[],"props":[{"id":"DBhvl9-1OtIpv0IJjMyMY","instanceId":"7IioXxJxPMYjQ_Sl2dNyf","name":"dv-countdown","type":"string","value":"true"},{"id":"s85-KtUydr8o-waik5tZa","instanceId":"7IioXxJxPMYjQ_Sl2dNyf","name":"dv-countdown-target-date","type":"string","value":"2030-12-31"},{"id":"cKOujZ2U0xA8yGr4pobcd","instanceId":"7IioXxJxPMYjQ_Sl2dNyf","name":"dv-countdown-target-time","type":"string","value":"23:59:59"},{"id":"84z4RBKbV1o7sx6nxSY72","instanceId":"7IioXxJxPMYjQ_Sl2dNyf","name":"dv-countdown-timezone","type":"string","value":"-03:00"},{"id":"sExy5QiZrnFcsur43V1Q6","instanceId":"N9QZKJCAnm_Fh1TK8dmZE","name":"dv-countdown-display","type":"string","value":"true"},{"id":"Eduef75mgwCZnxJdqwMSo","instanceId":"2Cj9EgZajumrF2XJLXNIM","name":"dv-countdown-complete","type":"string","value":"true"},{"id":"0wJgSp65qVt9rWGM0ULOW","instanceId":"T2HwASa04uXiWx2NerbtO","name":"dv-countdown-unit","type":"string","value":"years"},{"id":"4n8Ul-hxzSV8QBnTMTfDJ","instanceId":"VwZE8-eUHsoI5VndQ_o77","name":"dv-countdown-unit","type":"string","value":"months"},{"id":"YuQaGx2VFHIwDXXm5tXMI","instanceId":"rIPHyjIiycobsB1BLdCNo","name":"dv-countdown-unit","type":"string","value":"days"},{"id":"zCrtItRmvYexeY1ZiVqLU","instanceId":"oYtmIco3_Ow6o5Hs8YYWD","name":"dv-countdown-unit","type":"string","value":"hours"},{"id":"hVUqGw1wATU7LRH4bENqm","instanceId":"u6Wxu1xWIcLiSnT_vl9Zc","name":"dv-countdown-unit","type":"string","value":"minutes"},{"id":"ihqr2rcV3pnPBOewSH0Cf","instanceId":"BQOMNQoQrRkitKJ0b9nRi","name":"dv-countdown-unit","type":"string","value":"seconds"},{"id":"_97kMuGkHf1k0SWxohAMM","instanceId":"HEGDg5W_tjzKuIFgsKWSA","name":"code","type":"string","value":"<script src=\"https://drevo.b-cdn.net/Library/Custom%20Components/Countdown/countdown-v1.0.js\" type=\"module\"></script>"},{"id":"EEkoqVPs4f2T2B4JcOkc4","instanceId":"HEGDg5W_tjzKuIFgsKWSA","name":"clientOnly","type":"boolean","value":true}],"assets":[]}}

Countdown

Instructions

Overview

Add a dynamic countdown timer to your website that displays the time remaining until a specific date and time.

Getting Started

Quick Start

Click the Copy Component button on the top of the page.
Paste the component into your Webstudio site.

Manual Start

Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Countdown/countdown-v1.0.js"></script>[/code-block]

Add the Countdown Element: Place a container with the following attributes: <div dv-countdown dv-countdown-target-date="2024-12-31" dv-countdown-target-time="23:59:59" dv-countdown-timezone="+00:00"></div>. Inside this container, add an element with dv-countdown-display="true" to contain all countdown units: <div dv-countdown-display="true"></div>

countdown attributes

Customization Options

Required Attributes

dv-countdown = Main attribute to identify the countdown component
dv-countdown-target-date = Target date in YYYY-MM-DD format
dv-countdown-target-time = Target time in HH:MM:SS format
dv-countdown-timezone = Timezone offset in +/-HH:MM format

Display Units

Add elements with the dv-countdown-unit attribute to display specific time units:

dv-countdown-unit="years" = Years remaining
dv-countdown-unit="months" = Months remaining
dv-countdown-unit="days" = Days remaining
dv-countdown-unit="hours" = Hours remaining
dv-countdown-unit="minutes" = Minutes remaining
dv-countdown-unit="seconds" = Seconds remaining

Example: <span dv-countdown-unit="days">00</span>

Completion Message

Add an element with dv-countdown-complete="true" to display when countdown reaches zero: <div dv-countdown-complete="true" style="display: none;">Countdown complete!</div>

Notes

The countdown updates automatically every second
When the countdown reaches zero, the display element is hidden and the complete element is shown
You can include any combination of time units
Time calculations adjust based on which units are displayed
The component automatically reinitializes when added to the DOM dynamically