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, neveropen 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!
