Create a Timeline using JavaScript

0 0 2 minutes read

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:

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();

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!