Interactive Timeline Component | HTML CSS JavaScript

Interactive Timeline Component with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #30

Project Overview

The Interactive Timeline Component is a dynamic frontend project built using HTML, CSS, and JavaScript. It allows users to create timeline events by entering a year and an event description. Each new entry appears instantly on a vertical timeline with a connected marker and a content card.

First, users enter the year and event details through the input fields. Next, JavaScript validates the information and dynamically creates a new timeline item using DOM manipulation. Meanwhile, CSS controls the vertical line, circular markers, spacing, and event cards to create a clear timeline layout. This project demonstrates dynamic content creation, event handling, DOM manipulation, and responsive UI design.

Key Features

Dynamic Timeline Events: Users can enter a year and event description to create new timeline entries. Each entry appears immediately without refreshing the webpage.
Vertical Timeline Layout: The project displays events in a clean vertical timeline structure. A connected line helps users follow the events from one entry to the next.
Timeline Markers: Each event includes a circular marker placed along the timeline. These markers make individual events easier to identify visually.
Interactive Event Creation: JavaScript creates new timeline elements whenever the user clicks the Add Event button. This demonstrates how websites can generate content dynamically.
Input Validation: The project checks whether both the year and event fields contain information. If either field is empty, it displays a message asking the user to complete both fields.
Dynamic DOM Manipulation: JavaScript creates new elements, assigns CSS classes, and inserts them into the timeline. Therefore, users can add as many events as needed during the session.
Clean Event Cards: Each timeline entry contains a year heading and an event description inside a separate content card. This keeps the timeline information organized and readable.
Responsive Design: The main container uses a flexible width and a maximum width of 95%. As a result, the timeline can adjust to different screen sizes.
Simple User Interface: The project uses a centered white container, input fields, and a clear blue action button. This makes the timeline easy to understand and use.
Reusable Component: The timeline can be adapted for different purposes, such as project histories, company milestones, personal achievements, or important events.

What You'll Learn

How to structure an interactive timeline using HTML
How to create timeline layouts using CSS
How to use CSS pseudo-elements for visual elements
How to handle button clicks with JavaScript
How to validate user input
How to create HTML elements dynamically
How to use className and innerHTML with JavaScript
How to add dynamic elements using appendChild()

HTML Code

The HTML creates the basic structure of the Interactive Timeline Component. First, it adds a main container with the heading Interactive Timeline. Next, the form section contains two input fields. One accepts the year, while the other accepts the event description. The Add Event button calls the addEvent() function when clicked.

Finally, an empty timeline container with the ID timeline provides the area where JavaScript adds new events. The JavaScript file is loaded at the end of the page so it can control the timeline dynamically.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Timeline Component</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="timeline-container">

<h1>Interactive Timeline</h1>

<div class="form">

<input id="yearInput" placeholder="Enter Year">
<input id="eventInput" placeholder="Enter Event">

<button onclick="addEvent()">Add Event</button>

</div>

<div class="timeline" id="timeline">

</div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

The CSS creates the overall appearance and structure of the timeline. The main container uses a white background, padding, rounded corners, a maximum width, and a shadow to create a clean card-style layout.

Next, the form uses Flexbox to place the inputs and button in a row with consistent spacing. The timeline uses a pseudo-element to create the vertical blue line, while each timeline item uses a circular marker to connect the event with the line. The .content class creates light-colored event cards with padding and rounded corners. The layout also uses flexible sizing so the component can adapt to smaller screens.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

body{
background:#042354;
display:flex;
justify-content:center;
padding:40px 20px;
}

/* MAIN CONTAINER */

.timeline-container{
background:white;
padding:30px;
border-radius:12px;
width:700px;
max-width:95%;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
text-align:center;
margin-bottom:20px;
}

/* FORM */

.form{
display:flex;
gap:10px;
margin-bottom:25px;
}

.form input{
flex:1;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
}

.form button{
padding:10px 15px;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.form button:hover{
background:#1d4ed8;
}

/* TIMELINE */

.timeline{
position:relative;
margin-left:30px;
padding-left:10px;
}

/* Vertical line */

.timeline::before{
content:"";
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:#2563eb;
border-radius:2px;
}

/* Timeline item */

.timeline-item{
position:relative;
margin-bottom:25px;
padding-left:40px;
}

/* Timeline dot */

.circle{
position:absolute;
left:-15px;
top:15px;
width:16px;
height:16px;
background:#2563eb;
border-radius:50%;
border:3px solid white;
box-shadow:0 0 0 2px #2563eb;
}

/* Content card */

.content{
background:#f1f5f9;
padding:15px;
border-radius:8px;
}

.content h3{
margin-bottom:5px;
color:#111;
}

.content p{
color:#444;
font-size:14px;
}

Javascript Code

JavaScript handles the creation and display of timeline events. First, the addEvent() function reads the values from the year and event input fields and selects the timeline container. Next, it checks whether either input is empty. If the required information is missing, JavaScript displays an alert and stops the function.

After that, JavaScript creates a new div, assigns it the timeline-item class, and uses innerHTML to add the timeline marker, year, and event description. Finally, appendChild() adds the new item to the timeline, and the input fields are cleared so users can enter another event.

function addEvent(){

const year = document.getElementById("yearInput").value
const event = document.getElementById("eventInput").value

const timeline = document.getElementById("timeline")

if(year.trim()==="" || event.trim()===""){
alert("Please enter year and event")
return
}

const item = document.createElement("div")
item.className = "timeline-item"

item.innerHTML = `

<div class="circle"></div>

<div class="content">
<h3>${year}</h3>
<p>${event}</p>
</div>

`

timeline.appendChild(item)

document.getElementById("yearInput").value=""
document.getElementById("eventInput").value=""

}