showing timeline throught javascript

Using W3Schools HTML and CSS timeline design, and  code a JavaScript timeline, get showing timeline ...


const events = [ 

{ date: 2017, descrip: "Lore ipsum ..." }, 

{ date: 2018, descrip: "Lore ipsum ..." }, 

{ date: 2019, descrip: "Lore ipsum ..." }, ]; 

const timeline = document.getElementById("timeline") 


/* Loop for enumerable property names of an object */
for (let i=0; i<events.length;i++)
{
    // Displays elements
    const eventContent = `
        <div class="container ${i % 2 == 0 ? 'right' : 'left'}">
            <div class="content">
                <h2>${events[i].date}</h2>
                <p>${events[i].descrip}</p>
            </div>
        </div>
    `

    timeline.innerHTML += eventContent
}

 

... Like this:


Timeline output


Comments

Popular posts from this blog

solved ERROR You installed yt-dlp from a manual build or with a package manager

vorago stela 100 no enciende

lanix neuron a v20