Output div.tick-group using Javascript?

[jacobgraf]

I am trying to rebuild this recurring event demo (https://pqina.nl/flip/#nutshell) using JavaScript since I need to output the same countdown on multiple places on a single page.

I've got it close, but am having trouble trying to figure out how to recreate the .tick-group div using JavaScript/Presenters. Any chance you could point me in the right direction here?

// Flip.js
// https://pqina.nl/flip/

var elements = document.querySelectorAll('.countdown')
if (elements.length > 0) {
    elements.forEach(element => {
        var tick = Tick.DOM.create(element, {
            view: {
                children:[
                    {
                        root: 'div',
                        transform: 'preset(d, h, m, s) -> delay',
                        key: 'value',
                        children: [
                            {
                                view: 'flip'
                            }
                        ],
                        layout: 'horizontal fill',
                        repeat: true
                    }
                ]
            },
            didInit: function(tick) {
                Tick.count.schedule('every day at 0').onupdate = function(value) {
                    tick.value = value
                }
            }
        })
    })
}

// END Flip.js

[jacobgraf]

Ok, I was able to get the parent/child elements populating correctly, but the thing I am missing (to match the example html) is to be able to apply a class to those outputted elements (e.g. tick-label). Is there a way to do this?

[rikschennink]

@jacobgraf I think you can use className as a property on a child object.

[jacobgraf]

@jacobgraf I think you can use className as a property on a child object.

That worked! Would love to see this added to the docs somewhere! Thanks!