Create a Timeline using JavaScript

Last Updated : 22 Sep, 2023

In this article, we will cover how to create a timeline using HTML CSS, and JavaScript. A Timeline is the visual representation of events along with the time they happened. On completion, the JavaSctript timeline will look like this:

Screenshot-from-2023-08-07-15-45-56

Prerequisites:

The prerequisites knowledge required for this project are:

Approach:

The approach to accomplish the task is as follows:

Create the basic timeline Structure Using HTML tags like divs, ul, and li along with defined class names.
Style the project with CSS properties like background color, padding, margins, position, etc.
In JavaScript create a Javascript array names timelineArray to store the time and events.
Use JavaScript array.map() method to traverse and render timeline items in HTML Using HTML DOM methods like createElement and appendChild etc.

Example: This example demonstrates the Basic Timeline of Javascript using HTML, CSS, & JS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>JavaScript Timeline</title> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1" /> 
    <link rel="stylesheet" 
          href="style.css" /> 
</head> 
  
<body> 
    <ul class="timeline" 
        id="menu"></ul> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Styling universal selector */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
/* Style body element */
body { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background: hsl(113, 19%, 18%); 
    font-family: "Poppins", sans-serif; 
} 
  
/* Styling card container */
.card { 
    max-width: 20rem; 
    background: #e5e9f3; 
    margin: 0 1rem; 
    padding: 1rem; 
    box-shadow: 0 0 5px rgba(191, 189, 189, 0.2); 
    width: 95%; 
    border-radius: 0.5rem; 
    margin: 2%; 
    margin-bottom: 10%; 
} 
  
.timeline { 
    position: relative; 
    max-width: 1200px; 
    margin: 0 auto; 
} 
  
  
.timeline::after { 
    content: ""; 
    position: absolute; 
    width: 6px; 
    background-color: white; 
    top: 28px; 
    bottom: 75px; 
    left: 50%; 
    margin-left: -3px; 
} 
  
ul { 
    list-style: none; 
} 
  
.right { 
    text-align: left; 
    position: relative; 
    right: -185px; 
    list-style: none; 
} 
  
.left { 
    text-align: right; 
    position: relative; 
    left: -185px; 
    list-style: none; 
} 
  
.dotRight::after { 
    content: ""; 
    position: absolute; 
    width: 22px; 
    height: 22px; 
    left: -40px; 
    background-color: white; 
    border: 4px dashed #559cff; 
    top: 20px; 
    border-radius: 50%; 
    z-index: 1; 
} 
  
.dotLeft::after { 
    content: ""; 
    position: absolute; 
    width: 22px; 
    height: 22px; 
    right: -40px; 
    background-color: white; 
    border: 4px dashed #559cff; 
    top: 20px; 
    border-radius: 50%; 
    z-index: 1; 
}

Javascript

const timelineArray = [ 
    { 
        year: "1995", 
        eventt:  
"JavaScript Introduced by Brendan Eich at Netscape", 
    }, 
    { 
        year: "1997", 
        eventt:  
"ECMAScript created to Standardize JavaScript", 
    }, 
    { 
        year: "1999", 
        eventt:  
"ECMAScript3: Introduction of RegEx, try-catch", 
    }, 
    { 
        year: "2009", 
        eventt:  
"ECMAScript5: strict mode, Object method", 
    }, 
    { 
        year: "2015", 
        eventt:  
"ES6: introduced classes, Arraow functons, let/const variables ", 
    }, 
    { 
        year: "2016 Onwards", 
        eventt:  
"introducing features like async/await, spread/rest operators etc.", 
    }, 
]; 
  
function gfg() { 
    timelineArray.map((e, i) => { 
        let clss = "right"; 
        let dot = "dotRight"; 
        if (i % 2 == 0) { 
            clss = "left"; 
            dot = "dotLeft"; 
        } 
        const year = document.createElement("h3"); 
        year.innerText = e.year; 
        const eventt = document.createElement("p"); 
        eventt.innerText = e.eventt; 
        const item = document.createElement("div"); 
        item.appendChild(year); 
        item.appendChild(eventt); 
        item.classList.add("card"); 
        const contain = document.createElement("div"); 
        const li = document.createElement("li"); 
        contain.classList.add(dot); 
        contain.appendChild(item); 
        li.appendChild(contain); 
        li.classList.add(clss); 
        document.getElementById("menu").appendChild(li); 
    }); 
} 
gfg();