Develop a year Progress bar in HTML/ JS

Open-Source Internship opportunity by OpenGenus for programmers. Apply now.

In this article, we have developed a year Progress bar in HTML using JavaScript. Firstly we'll discuss on the Basic Introduction to HTML, CSS & JavaScript. Secondly, we'll describe our article's title. Later'll provide the implementation for the same with step-wise explanation.

Following are the sections of this article:-

Introduction

Title Description

Implementation

Conclusion

1. Introduction

Lets start our discussion by understanding the basics of these web-technologies - HTML, CSS & JavaScript.

HTML
It is the core of every web-page, regardless of the complexity of the web-page or web-site this acts as a Heart of the same.
HTML stands for HyperText Markup Language. "Markup language" means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the web-page.

CSS
CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page. In other words, this mainly looks after look & feel of the website or web-page.
HTML vs CSS - HTML mainly provides the raw tools needed to structure content on a website. Where as CSS, on the other hand, helps to style this content so it appears to the user the way it was intended to be seen.

JavaScript
This language mainly used for logic based or performing more complex calculation that lets web-developers design most efficient interactive web-page.
In this article we have defined a onclick event for the button which will be residing on the HTML page.
Also we are not using any specific Framework for the implementation of the same. We are just relying ourself on the Native JavaScript and its functionality.

2. Title Description

In this article we have made use of the basic features of HTML, CSS & Native JavaScript(No Framework). This simple approach will get us the current progress of the year in percentage. In general the percentage of the year progress or completion is calculated by - { [ ( currentDayOfYear - TotalDaysInYear ) / TotalDaysInYear ] * 100 }.

3. Implementation

HTML Implementation

Now lets move to the HTML part of the implementation,

We will be linking the CSS(yearCSS.css) & JavaScript(yearJS.js) files to the HTML file.
Inside the <head> tag we are linking the CSS(yearCSS.cs) file using tag, this method of linking is called as External Style Sheet linking.
Here, <link rel="stylesheet" type="text/css" href="./yearCSS.css">, It consists of attributes rel Specifies the relationship between the current document and the linked document. type it should be "text/css" for linking CSS file.

<head>
    <title>The Progress of Year 2020</title>
    <link rel="stylesheet" type="text/css" href="./yearCSS.css">
</head>

And the attribute href consists the exact path to the linking file i.e, yearCSS.css.
Now inside the <body> tag we have defined a <h3> header tag & couple of <div> tags with respective id's(progress_status & myprogress_bar).
Initially the value for the div id='myprogress_bar' will be 0%.
After we defined a button named - Get Current Progress, its linked to the JavaScript function by onclick='getProgress()' event.

<body> 
	<h3>The Progress of Year 2020 </h3> 
	<div id="progress_status"> 
		<div id="myprogress_bar">0%</div> 
	</div> 
    <br> 
    <button id="mybutton" onclick="getProgress()" align="">Get Current Progress</button> 
    <script src="./yearJS.js"></script>
</body>

By using the script tag we are importing the JavaScript functionalities for the onclick event for the button.
The script tag has the attribute as src, inside which we provide the path to the javascript file as - <script src="./yearJS.js"></script> .

From the above explanation, Following is the Final code for section of the implemented code & file - yearProgress.html.

<!DOCTYPE html> 
<html> 
<head>
    <title>The Progress of Year 2020</title>
    <link rel="stylesheet" type="text/css" href="./yearCSS.css">
</head>
<body> 
	<h3>The Progress of Year 2020 </h3> 
	<div id="progress_status"> 
		<div id="myprogress_bar">0%</div> 
	</div> 
<br> 
<button id="mybutton" onclick="getProgress()" align="">Get Current Progress</button> 

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

</body> 
</html>

CSS Implementation

Now lets move to the CSS part of the implementation,

To render the styles for the HTML tags and its elements, we have used few tags as well as some CSS selector method to render specific visuals.
For body tag, we have defined the properties as - background-color: #2b2b2b;. Which specifies the backround color for the HTML.
For h3 tag, we have defined the properties as -text-align: center;
color: white;, that specifies the alignment & color of the text.

body{
	background-color: #2b2b2b;
}

h3 {
	text-align: center;
	color: white; 
}

For div id='progress_status' at HTML, we have defined the properties in CSS file as -

#progress_status {
width: 50%; 
	background-color: #ddd; 
	border-style: inset;
	position: absolute;
	top: 10%;
	left: 25%;
	margin: -25px 0 0 -25px;
}

which specifies the width, background color, border-style of the border, position of the underlying div - progress_status portion & margin. This is for the outline progress bar area.

For div id=myprogress_bar, at HTML, we have defined the properties in CSS file as -

#myprogress_bar {
    width: 0%; 
	height: 40px; 
	background-color: #4CAF50; 
    border-style: outset;
	text-align: center; 
	line-height: 32px; 
	color: black; 
}

which specifies the width, background color, border-style of the border, position of the underlying div - myprogress_bar portion & margin.
This is for the in-line of progress bar area.

For the button at HTML id="mybutton", we have defined the properties in CSS file as -

#mybutton {
    position: absolute;
	top: 18%;
	left: 25%;
	margin: -25px 0 0 -25px; 
	background-color: #aaaaaa; 
}

which specifies the properties position, background-color for the button - Get Current Progress.

From the above explanation, Following is the Final CSS implementation & file - yearCSS.css.

body{
	background-color: #2b2b2b;
}

h3 {
	text-align: center;
	color: white; 
} 

#progress_status { 
	width: 50%; 
	background-color: #ddd; 
	border-style: inset;

	position: absolute;
	top: 10%;
	left: 25%;
	margin: -25px 0 0 -25px;  
}

#myprogress_bar { 
	width: 0%; 
	height: 40px; 
	background-color: #4CAF50; 
	text-align: center; 
	line-height: 32px; 
	color: black; 
	border-style: outset;
}

#mybutton{
	position: absolute;
	top: 18%;
	left: 25%;
	margin: -25px 0 0 -25px; 
	background-color: #aaaaaa; 
}

JavaScript Implementation

Now we will describe the yearJS.js files functionality for the button Get Current Progress,

This file mainly consists of a function - getProgress(), which will be called onclick of the button at HTML page.
We are rendering the progress to the section of the div tag id - myprogress_bar.
And we have the variable width which is related to the CSS files width property of the myprogress_bar.

function myrender() { 
            var firstDayOfYear = new Date(new Date().getFullYear(), 0, 1).getTime();

            var firstDayOfNextYear = new Date(new Date().getFullYear() + 1, 0, 1).getTime();
            const curDay = new Date().getTime();
            var tot_progress = Math.round((curDay - firstDayOfYear) / (firstDayOfNextYear - firstDayOfYear) * 100);

        if (width >= tot_progress) { 
            clearInterval(identity); 
        } else { 
            width++; 
            element.style.width = width + '%'; 
            element.innerHTML = width * 1 + '%'; 
            } 
        }

Through a sub-function setInterval() we are calling a user-defined function myrender() , inside which we are calculating the current year's progress and rendering it to the myprogress_bar.

Following is the Final JavaScript file section(yearJS.js) of the implemented code & file - yearJS.js.

function getProgress() { 
    var element = document.getElementById("myprogress_bar"); 
    var width = 1; 
    var identity = setInterval(myrender, 10); 
    function myrender() { 
            var firstDayOfYear = new Date(new Date().getFullYear(), 0, 1).getTime();

            var firstDayOfNextYear = new Date(new Date().getFullYear() + 1, 0, 1).getTime();
            const curDay = new Date().getTime();
            var tot_progress = Math.round((curDay - firstDayOfYear) / (firstDayOfNextYear - firstDayOfYear) * 100);

        if (width >= tot_progress) { 
            clearInterval(identity); 
        } else { 
            width++; 
            element.style.width = width + '%'; 
            element.innerHTML = width * 1 + '%'; 
            } 
        } 
}

Output

Before clicking on the button,

After clicking on the button,

4. Conclusion

Lastly we are at the end of this article, we were able to get the basic understanding on the web-technologies HTML, CCS & JavaScript. Also briefly described about the articles title & discussed the code snippets with line by line explanation.

Thanks, Hope it was an informative article!