-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathInteractive Learning Timeline
More file actions
33 lines (33 loc) · 1.13 KB
/
Interactive Learning Timeline
File metadata and controls
33 lines (33 loc) · 1.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- Objective: Develop an interactive learning timeline. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning Timeline</title>
</head>
<body>
<h2>My Learning Timeline</h2>
<button id="addMilestoneBtn">Add Milestone</button>
<div id="timelineContainer">Timeline will be built here.</div>
<script>
let milestones = JSON.parse(localStorage.getItem('milestones')) || [];
document.getElementById('addMilestoneBtn').addEventListener('click', () => {
const milestoneTitle = prompt("Enter milestone title:");
const milestoneDate = prompt("Enter milestone date:");
milestones.push({ title: milestoneTitle, date: milestoneDate });
localStorage.setItem('milestones', JSON.stringify(milestones));
buildTimeline();
});
function buildTimeline() {
const container = document.getElementById('timelineContainer');
container.innerHTML = ''; // Clear current timeline
milestones.forEach(milestone => {
const milestoneElement = document.createElement('div');
milestoneElement.textContent = `${milestone.title} - ${milestone.date}`;
container.appendChild(milestoneElement);
});
}
buildTimeline();
</script>
</body>
</html>