Notable Inventions Timeline using HTML CSS and JavaScript

Inventions have played a crucial role in shaping human history, from the wheel to the internet. Creating a timeline of notable inventions can be a great way to educate people on the advancements that have helped shape the world we live in today. In this tutorial, we’ll show you how to create a beautiful and interactive timeline of notable inventions using HTML, CSS, and JavaScript. You’ll learn how to use HTML to create the structure of the timeline and style it with CSS to give it a visually appealing appearance. We’ll also cover how to use JavaScript to add interactive features like hover effects and click events, allowing users to explore the timeline in more detail. By the end of this tutorial, you’ll have a fully-functional and visually stunning timeline that showcases some of the most significant inventions in human history. So, let’s get started on creating a notable inventions timeline using HTML, CSS, and JavaScript!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Notable Inventions Timeline using HTML CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"> 
    </script>


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

</html>

Paste the below code in your `<body>` tag.

<h1>Notable inventions, <span>1910–2000</span></h1>
<div class="flex-parent">
    <div class="input-flex-container">
        <div class="input">
            <span data-year="1910" data-info="headset"></span>
        </div>
        <div class="input">
            <span data-year="1920" data-info="jungle gym"></span>
        </div>
        <div class="input active">
            <span data-year="1930" data-info="chocolate chip cookie"></span>
        </div>
        <div class="input">
            <span data-year="1940" data-info="Jeep"></span>
        </div>
        <div class="input">
            <span data-year="1950" data-info="leaf blower"></span>
        </div>
        <div class="input">
            <span data-year="1960" data-info="magnetic stripe card"></span>
        </div>
        <div class="input">
            <span data-year="1970" data-info="wireless LAN"></span>
        </div>
        <div class="input">
            <span data-year="1980" data-info="flash memory"></span>
        </div>
        <div class="input">
            <span data-year="1990" data-info="World Wide Web"></span>
        </div>
        <div class="input">
            <span data-year="2000" data-info="Google AdWords"></span>
        </div>
    </div>
    <div class="description-flex-container">
        <p>And future Call of Duty players would thank them.</p>
        <p>Because every kid should get to be Tarzan for a day.</p>
        <p class="active">And the world rejoiced.</p>
        <p>Because building roads is inconvenient.</p>
        <p>Ain’t nobody got time to rake.</p>
        <p>Because paper currency is for noobs.</p>
        <p>Nobody likes cords. Nobody.</p>
        <p>Brighter than glow memory.</p>
        <p>To capitalize on an as-yet nascent market for cat photos.</p>
        <p>Because organic search rankings take work.</p>
    </div>
</div>



<div style="position: absolute; bottom: 40px; right: 10px; font-size: 12px">
    <a href="https://codepen.io/cjl750/pen/XMyRoB" target="_blank">original version with slinky mobile menu</a>
</div>
<div style="position: absolute; bottom: 15px; right: 10px; font-size: 12px">
    <a href="https://codepen.io/cjl750/pen/wdVxzV" target="_blank">alternate version with custom range input</a>
</div>
<div style="position: absolute; bottom: 15px; left: 10px; font-size: 18px; font-weight: bold">
    <a href="https://codepen.io/cjl750/pen/MXvYmg" target="_blank">version 4: pure CSS!</a>
</div>

CSS Code

Create a file style.css and paste the code below.

html,
body {
  height: 100%;
}

body {
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  color: #424949;
  background-color: #ecf0f1;
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  position: relative;
}

h1 {
  text-align: center;
  height: 38px;
  margin: 60px 0;
}
h1 span {
  white-space: nowrap;
}

.flex-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.input-flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  height: 100px;
  max-width: 1000px;
  position: relative;
  z-index: 0;
}

.input {
  width: 25px;
  height: 25px;
  background-color: #2c3e50;
  position: relative;
  border-radius: 50%;
}
.input:hover {
  cursor: pointer;
}
.input::before,
.input::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  background-color: #2c3e50;
  width: 4vw;
  height: 5px;
  max-width: 50px;
}
.input::before {
  left: calc(-4vw + 12.5px);
}
.input::after {
  right: calc(-4vw + 12.5px);
}
.input.active {
  background-color: #2c3e50;
}
.input.active::before {
  background-color: #2c3e50;
}
.input.active::after {
  background-color: #aeb6bf;
}
.input.active span {
  font-weight: 700;
}
.input.active span::before {
  font-size: 13px;
}
.input.active span::after {
  font-size: 15px;
}
.input.active ~ .input,
.input.active ~ .input::before,
.input.active ~ .input::after {
  background-color: #aeb6bf;
}
.input span {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.input span::before,
.input span::after {
  visibility: visible;
  position: absolute;
  left: 50%;
}
.input span::after {
  content: attr(data-year);
  top: 25px;
  transform: translateX(-50%);
  font-size: 14px;
}
.input span::before {
  content: attr(data-info);
  top: -65px;
  width: 70px;
  transform: translateX(-5px) rotateZ(-45deg);
  font-size: 12px;
  text-indent: -10px;
}

.description-flex-container {
  width: 80vw;
  font-weight: 400;
  font-size: 22px;
  margin-top: 100px;
  max-width: 1000px;
}
.description-flex-container p {
  margin-top: 0;
  display: none;
}
.description-flex-container p.active {
  display: block;
}

@media (min-width: 1250px) {
  .input::before {
    left: -37.5px;
  }
  .input::after {
    right: -37.5px;
  }
}

@media (max-width: 850px) {
  .input {
    width: 17px;
    height: 17px;
  }
  .input::before,
  .input::after {
    height: 3px;
  }
  .input::before {
    left: calc(-4vw + 8.5px);
  }
  .input::after {
    right: calc(-4vw + 8.5px);
  }
}

@media (max-width: 600px) {
  .flex-parent {
    justify-content: initial;
  }
  .input-flex-container {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 15vh;
  }
  .input {
    width: 60px;
    height: 60px;
    margin: 0 10px 50px;
    background-color: #aeb6bf;
  }
  .input::before,
  .input::after {
    content: none;
  }
  .input span {
    width: 100%;
    height: 100%;
    display: block;
  }
  .input span::before {
    top: calc(100% + 5px);
    transform: translateX(-50%);
    text-indent: 0;
    text-align: center;
  }
  .input span::after {
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ecf0f1;
  }
  .description-flex-container {
    margin-top: 30px;
    text-align: center;
  }
}

@media (max-width: 400px) {
  body {
    min-height: 950px;
  }
}

JavaScript Code

Create a file script.js and paste the code below.

$(function () {
    var inputs = $('.input');
    var paras = $('.description-flex-container').find('p');
    inputs.click(function () {
        var t = $(this),
            ind = t.index(),
            matchedPara = paras.eq(ind);

        t.add(matchedPara).addClass('active');
        inputs.not(t).add(paras.not(matchedPara)).removeClass('active');
    });
});

Final Output

Notable Inventions Timeline using HTML CSS and JavaScript

Written by: Piyush Patil

Code Credits: @cjl750

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖